PassFront
  1. PassFront
  2. База знаний
  3. Основы языка

Какие особенности оператора && важно учитывать на практике и почему?

Основы языка

Особенности оператора `&&`: короткое замыкание, возврат операнда (не boolean), нюанс с `0`/пустой строкой в JSX (рендерит их вместо ничего).

Особенности

Короткое замыкание

Не вычисляет правую часть, если левая ложна — для условного выполнения:

isValid && submit(); // submit только если isValid
user && user.name;   // защита от null

Возвращает операнд, а не boolean

Возвращает первый ложный операнд или последний:

'a' && 'b';  // 'b'
0 && 'b';     // 0
'a' && null;  // null

Нюанс с 0 и '' в JSX

Частая ловушка — && в JSX с числом/пустой строкой рендерит само значение, а не ничего:

{count && <List />}         // при count === 0 отрендерит "0"!
{items.length && <List />}  // при 0 отрендерит "0"

// Правильно:
{count > 0 && <List />}     // boolean-условие
{!!count && <List />}       // приведение к boolean
{items.length ? <List /> : null}

Потому что 0 && ... возвращает 0, а React рендерит 0 (в отличие от false/null, которые не рендерятся).

Falsy-значения

&& считает ложными: false, 0, '', null, undefined, NaN.

Практические выводы

  • Для JSX-рендера использовать boolean-условие (count > 0 &&), не «сырое» число.
  • Для защиты от null — && или ?..

Коротко для собеседования

Особенности &&: короткое замыкание (не вычисляет правую часть при ложной левой — условное выполнение, защита от null), возврат операнда (первый ложный или последний, не boolean). Ловушка в JSX: {count && <X/>} при count === 0 рендерит 0 — используют {count > 0 && <X/>}. Falsy: 0, '', false, null, undefined, NaN.

Другие вопросы раздела