От автора: в данной статье мы попробуем разобраться с тем, как на самом деле в 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.