Как на самом деле в JavaScript работают операторы && и ||

От автора: в данной статье мы попробуем разобраться с тем, как на самом деле в JavaScript работают операторы && и ||. И (&&) и или (||) являются логическими операторами JavaScript.

Обычно вы используете эти операторы для логических значений:

true && true // => true
true && false // => false true || true // => true
true || false // => true

Однако можно ли использовать && и || с операндами, отличными от логических значений? Оказывается, можно! В этом посте подробно объясняется, как операторы && и || работают в JavaScript. Прежде чем перейти к тому, как работают операторы, давайте начнем с основных понятий истинности и ложности.

1. Ложное значение

Поскольку JavaScript является свободно типизированным языком, логические операции могут выполняться с любым типом. Такие выражения, как 1 && 2, null || undefined, ‘hello’ && true странные, но все равно работают в JavaScript. Для выполнения логических операций с любым типом JavaScript решает, можно ли считать конкретное значение ложным (эквивалент false) или истинным (эквивалент true).

Ложное — это значение, для которого Boolean(value) возвращается false. Ложные значения в JavaScript — это только false, 0, », null, undefined и NaN.

Boolean(false); // => false
Boolean(0); // => false
Boolean(''); // => false
Boolean(null); // => false
Boolean(undefined); // => false
Boolean(NaN); // => false

2. Истинное значение

Истинное — это значение, для которого Boolean(value) возвращается true. Говоря по-другому, истинными являются все неложные значения. Примерами истинных значений являются true, 4, ‘Hello’, { name: ‘John’ } и все остальное, что не ложно.

Boolean(true); // => true
Boolean(4); // => true
Boolean('Hello'); // => true
Boolean({ name: 'John' }); // => true

3. Как работает оператор &&

Теперь давайте рассмотрим, как работает оператор &&. Обратите внимание, что оператор работает с точки зрения истинности и ложности, а не true и false. Вот синтаксис оператора && в цепочке:

operand1 && operand2 && ... && operandN

Выражение оценивается следующим образом: начиная слева и двигаясь вправо, возвращает первый операнд, который является ложным. Если ложный операнд не был найден, возвращает последний операнд.

Давайте рассмотрим, как работает алгоритм на нескольких примерах. Когда операнды логические, это просто:

true && false && true; // => false

Оценка начинается слева и перемещается вправо. Первый операнд true пропускается. Однако второй операнд false является ложным значением, и оценка останавливается. false становится результатом всего выражения. Третий операнд true не оценивается.

Когда операнды являются числами:

3 && 1 && 0 && 10; // => 0

Оценка выполняется слева направо. 3 и 1 пропускаются, потому что они истинны. Но оценка останавливается на третьем операнде 0, так как это ложное значение. 0 становится результатом всего выражения. Четвертый операнд 10 не оценивается.

Чуть более сложный пример с разными типами:

true && 1 && { name: 'John' }

Опять же, операнды проверяются на ложность слева направо. Ни один операнд не является ложным, поэтому возвращается последний операнд. Результат оценки — { name: ‘John’ }.

3.1 Пропуск операндов

Алгоритм оценки && является оптимальным, так как оценка операндов прекращается, как только значение ложное встречаются. Давайте рассмотрим пример:

const person = null; person && person.address && person.address.street; // => null

Оценка длинного логического выражения операнде person && person.address && person.address.street останавливается прямо на первом (то есть null является ложным). Операнды person.address и person.address.street пропускаются.

4. Как работает оператор ||

Вот обобщенный синтаксис оператора || в цепочке:

operand1 || operand2 || ... || operandN

Оценка || происходит следующим образом: мы начинаем слева и перемещаемся вправо, возвращая первый операнд, который является истинным. Если истинный операнд не найден, возвращается последний операнд.

|| работает так же, как и &&, с той лишь разницей, что || останавливает вычисление при обнаружении истинного операнда. Давайте рассмотрим несколько примеров ||. Простое выражение, содержащее 2 логических значения:

true || false; // => true

Оценка начинается слева и перемещается вправо. К счастью, первый операнд true является истинным значением, поэтому все выражение оценивается как true. Второй операнд false не проверяется. Наличие нескольких чисел в качестве операндов:

0 || -1 || 10; // => -1

Первый операнд 0 — ложный, поэтому оценка продолжается. Второй аргумент -1 уже истинный, поэтому оценка останавливается, и результат будет -1.

4.1 Значение по умолчанию при доступе к свойствам

Вы можете использовать побочный эффект оценки || для доступа к свойству объекта, предоставляя значение по умолчанию, когда свойство отсутствует.

Например, давайте получим доступ к свойствам name и job объекта person. Когда свойство отсутствует, просто по умолчанию используется строка ‘Unknown’. Вот как вы можете использовать для этого оператор ||:

const person = { name: 'John'
}; person.name || 'Unknown'; // => 'John'
person.job || 'Unknown'; // => 'Unknown'

Давайте посмотрим на выражение person.name || ‘Unknown’. Поскольку первым операндом person.name является ‘John’ (истинное значение), в начале существует оценка с истинным значением. Выражение оценивается как ‘John’.

person.job || ‘Unknown’ действует по-другому. person.job является undefined, поэтому выражение такое же, как undefined || ‘Unknown’. Алгоритм оценки && говорит о том, что выражение должно возвращать первый операнд, который истинен, это в данном случае ‘Unknown’.

5. Заключение

Поскольку JavaScript является свободно типизированным языком, операнды && и || могут быть любого типа. Понятия ложности и истинности удобны для работы с преобразованием типов внутри логических операторов. Ложные значения — это false, 0, », null, undefined и NaN, в то время как остальные значения истинны.

Оператор && оценивает операнды слева направо и возвращает первое обнаруженное ложное значение. Если ни один из операндов не является ложным, возвращается последний операнд.

Таким же образом || оператор оценивает операнды слева направо, но возвращает первое найденное истинное значение. Если истинное значение не найдено, возвращается последний операнд.

Хотя алгоритмы оценки && и || на первый взгляд кажутся странными, на мой взгляд, они довольно эффективны. Алгоритмы выполняют ранний выход, что является хорошей оптимизацией производительности.

С точки зрения использования, я рекомендую придерживаться использования логических операндов как для &&, так и для ||, и избегать других типов, если это возможно. Логические выражения, которые работают только с логическими значениями, легче понять. Можете ли вы объяснить, как оценивается 0 || 1 && 2?

Автор: Dmitri Pavlutin

Источник: https://dmitripavlutin.com

Редакция: Команда webformyself.