Понимание конструкции x = x || y в JavaScript: особенности и примеры
Быстрый ответ
Выражение x = x || y
использует оператор логического ИЛИ ||
для присвоения переменной x
значения y
, если текущее значение x
при интерпретации приводится к ложному (т.е. null
, undefined
, 0
, false
, ""
или NaN
). Это обычный способ задания значений по умолчанию и предотвращения ошибок, связанных с отсутствием входящих данных в JavaScript.
let x = null;
let y = "default";
x = x || y; // Если переменная x не имеет валидного значения, используется значение переменной y
console.log(x); // "default"
Детальный разбор логического ИЛИ
Оператор ||
возвращает первое значение, которое будет истинно при приведении, либо, если такого нет, последнее проверенное значение. Этот механизм называется "коротк circuit evaluation": процесс проверки прекращается, как только обнаруживается первое истинное значение.
Применение в функциях для значений параметров по умолчанию
До появления ES6 распространённой была практика установления значений по умолчанию для параметров функции с помощью x = x || y
. Это помогало избежать ситуаций, когда функция получала ложное значение:
function greet(message, name) {
name = name || 'Гость'; // Если имя не указано, используется значение 'Гость' по умолчанию
console.log(message + ', ' + name + '!');
}
greet('Добро пожаловать'); // "Добро пожаловать, Гость!"
Однако после внедрения ECMAScript 6 более предпочтительным стало использование значений параметров по умолчанию. Этот подход обеспечивает прозрачность кода и лучшую совместимость с браузерами:
function greet(message, name = 'Гость') {
console.log(message + ', ' + name + '!');
}
greet('Добро пожаловать'); // "Добро пожаловать, Гость!"
Визуализация
Выражение x = x || y
можно представить как процесс наполнения стакана (🍹) резервным напитком (🥛), если он оказывается пустым.
Стакан X (🍹): Может оказаться пустым.
Стакан Y (🥛): Всегда полон!
Это можно описать следующим образом:
🤔: "Наливай в стакан X (🍹) из стакана Y (🥛), если стакан X пуст."
Это означает, что x
сохраняет своё значение, но в случае, если оно является ложным, x
получает значение y
.
Перед: X (🍹), Y (🥛)
После: X (🍹) || Y (🥛) => X (🍹/🥛)
Таким образом, мы всегда имеем полный стакан! 🥂✨
О ценности знания ложных значений в JavaScript
В JavaScript существует несколько ложных значений: null
, undefined
, 0
, false
, ''
, NaN
. И хотя x = x || y
может оказаться полезным, оно может неожиданно переписать допустимые значения, такие как 0
:
let x = 0;
let y = 5;
x = x || y; // 0 "пропадает", и на его место приходит 5!
console.log(x); // 5
Для того чтобы правильно обрабатывать подобные ситуации, следует более точно проверять x
на null
и undefined
:
x = (x !== undefined && x !== null) ? x : y;
Интерпретация результата логического ИЛИ
Логическое ИЛИ не всегда возвращает булево значение. Оно возвращает исходное значение, которое было расценено как истинное, и это может быть любой тип данных.
Полезные материалы
- Логическое ИЛИ (||) – JavaScript | MDN — детальное описание работы оператора логического ИЛИ (
||
) в JavaScript. - Истинные значения – Глоссарий MDN Web Docs — описание значений, которые интерпретируются как истинные в JavaScript.
- Операторы присваивания JavaScript – w3schools — туториал по операторам присваивания в JavaScript, включая их использование с
||
. - Ложные значения в JavaScript — обзор ложных значений, важных для понимания работы оператора
||
. - Спецификация языка ECMAScript® 2021 — ECMAScript стандарт для операторов присваивания.
- Значения, типы и операторы :: Проницательный JavaScript — детальное рассмотрение типов данных и операторов в JavaScript.
- Учебник по логическим операторам в JavaScript | DigitalOcean – всесторонний обзор логических операторов в JavaScript.