React. Реакт. Тестовая задача 018. Какой смысл в конструкции: item && item.value

---

Какой смысл в конструкции: item && item.value

Разберёмся, что здесь происходит:

  <script src="/js/react/react.development.js"></script>
  <script src="/js/react/react-dom.development.js"></script>
  <script src="/js/react/babel.min.js"></script>
  ...
  <script type="text/babel">
    const { useState, createElement } = React;
    const { createRoot } = ReactDOM;

// const item = {}; // объект без свойства value
const item = {
  value: 'какое‑то значение'
};

console.log('item:', item);
console.log('item.value:', item.value);
console.log('item && item.value:', item && item.value);
console.log('Итог:', (item && item.value) || 'Нет данных');

createRoot(document.getElementById('root')).render(
  <>
    {(item && item.value)
      ? <h2>{item.value}</h2>
      : <h2>'Нет данных'</h2>
    }
  </>
); 

Какой смысл в конструкции: item && item.value.

Конструкция item && item.value - это сокращённая проверка на существование объекта и доступ к его свойству с использованием логического оператора "И" (&&).

Разберём пошагово, как она работает и зачем нужна.

Как это работает.

Первый операнд: item

JavaScript проверяет, является ли item "истинным" (truthy) или "ложным" (falsy).

Если item равен null, undefined, false, 0, '' (пустая строка) или NaN — выражение сразу возвращает это значение (т. е. item).

Если item "истинный" (например, объект, непустая строка, число ≠ 0) — переходит ко второму операнду.

Второй операнд: item.value

Если item прошёл проверку (т. е. существует), JavaScript пытается получить свойство value у item.

Результат: значение item.value (может быть любым: строка, число, undefined и т. д.).

Итог:

Если item не существует (null/undefined) → возвращается item (т. е. null/undefined).

Если item существует → возвращается item.value.

Нажмите F12, чтобы посмотреть отображение информации в консоли.