Понимание конструкции 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;

Интерпретация результата логического ИЛИ

Логическое ИЛИ не всегда возвращает булево значение. Оно возвращает исходное значение, которое было расценено как истинное, и это может быть любой тип данных.

Полезные материалы

1. Логическое ИЛИ (||) – JavaScript | MDN — детальное описание работы оператора логического ИЛИ (||) в JavaScript.
2. Истинные значения – Глоссарий MDN Web Docs — описание значений, которые интерпретируются как истинные в JavaScript.
3. Операторы присваивания JavaScript – w3schools — туториал по операторам присваивания в JavaScript, включая их использование с ||.
4. Ложные значения в JavaScript — обзор ложных значений, важных для понимания работы оператора ||.
5. Спецификация языка ECMAScript® 2021 — ECMAScript стандарт для операторов присваивания.
6. Значения, типы и операторы :: Проницательный JavaScript — детальное рассмотрение типов данных и операторов в JavaScript.
7. Учебник по логическим операторам в JavaScript | DigitalOcean – всесторонний обзор логических операторов в JavaScript.