Операция «И»

В последние годы многие Frontend-разработчики начинают использовать трендовые технологии раньше, чем изучат основы JavaScript, что порой приводит к неожиданным для них багам.

Например, для скрытия пустого списка новички в React могут использовать, казалось бы, привычный многим код:

<div>
    {props.tasks.length &&
        <TaskList tasks={props.tasks} />
    }
</div>

Увы, когда props.tasks окажется пустым массивом, вместо списка будет отрисовано число 0. Особенно везучие разработчики узнают об этом, когда проект уже находится в production.

Чтобы понять причину такого поведения, следует вспомнить, как работает логический оператор && в JavaScript: он интерпретирует значения как логические, но результат возвращает без преобразования.

В данном примере, если массив окажется пустым, логическое И преобразует 0 в false и остановит вычисление, так как результат ложный и вернет 0.

Для избежания таких проблем, убедитесь, что выражение перед && всегда является логическим (boolean).