Теория: Результат логических операций

Посмотрите на код ниже и попробуйте угадать, что будет напечатано на экран:

console.log(0 || 1)

Правильный ответ: 1

Оператор ИЛИ работает так, что его выполнение (слева направо) прерывается и возвращается результат первого аргумента, который можно преобразовать в true. Если первый аргумент невозможно преобразовать в true, то возвращается второй, даже если его нельзя преобразовать в true.

Ниже пример с оператором И:

console.log(0 && 1) // => 0

Оператор И работает так, что его выполнение (слева направо) прерывается и возвращается результат первого аргумента, который можно преобразовать в false.

В JavaScript есть два простых правила, по которым происходят преобразования:

• 0, '' (пустая строка), undefined, NaN, null приводятся к false. Эти значения называют falsy.
• Все остальное приводится к true

Этим активно пользуются в разработке, например, для определения значения по умолчанию:

const value = name || ''
// Примеры
234 || '' // 234
'hexlet' || '' // hexlet
undefined || '' // ''

Если name примет одно из falsy-значений, константе value будет присвоена пустая строка. В этом случае в последующем коде мы сможем работать с value как со строкой.

Но здесь есть потенциальный баг. Если name содержит falsy-значение, а присваивание константе value значений типа 0, undefined, NaN или null допустимо, то код выше начнет работать неверно:

// Упс
false || '' // ''
0 || '' // ''
undefined || '' // ''

В одном из уроков мы рассмотрели операторы сравнения === и !== и упомянули, что в JavaScript так же есть операторы == и !=, но их не стоит использовать. Отличия как раз заключаются в преобразовании типов:

console.log('' === false) // => false
console.log('' == false) // => true

Пустая строка и false — это разные значения, поэтому оператор === говорит «ложь! они не равны!». Но оператор == преобразует типы, и с его точки зрения пустая строка и false равны. Это преобразование неявное, поэтому по возможности избегайте операторов == и !=.

Вспомните операцию отрицания:

const answer = true
console.log(!answer) // => false

При двойном отрицании !! итоговое значение равно начальному:

const answer = true
console.log(!!answer) // => true

Но здесь дополнительно может происходить преобразование типа. Поэтому результатом двойного отрицания всегда будет значение типа boolean. Этим приемом иногда пользуются, чтобы поменять тип данных.

Ошибка выбора

Представьте себе задачу, в которой нам нужно проверить, что значение равно либо одному, либо другому. Например, переменная value должна содержать одно из двух значений: first или second. Начинающие разработчики иногда записывают это выражение так:

value === ('first' || 'second')

В голове мы это себе примерно так и представляем, но языки работают по-другому, поэтому такой код приведет к неверному результату. Как его правильно прочитать? Мы должны вспомнить приоритет выполнения операций. Первым делом вычисляется все что указано в скобках, то есть 'first' || 'second'. Если выполнить этот код в репле, то вывод будет таким:

node
'Welcome to Node.js v17.4.0.
> 'first' || 'second'
'first'
>

Теперь мы можем заменить исходное выражение на частично вычисленное:

value === 'first'

Совсем не то, что мы ожидали. А теперь вернемся к началу, и напишем проверку правильно:

// Скобки ставить не обязательно,
// потому что приоритет === выше, чем приоритет ||
value === 'first' || value === 'second'