Какие особенности оператора && важно учитывать на практике и почему?
Основы языка
Особенности оператора `&&`: короткое замыкание, возврат операнда (не 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.