Logical assignment operators: ||=, &&=, ??=

Логические операторы присваивания в JavaScript 🧠✨

JavaScript постоянно развивается, и логические операторы присваивания (||=, &&=, ??=) — одни из самых удобных нововведений. Они позволяют сократить код и сделать его выразительнее. Давай разберёмся, как они работают!

Оператор ||= (Logical OR Assignment)

Этот оператор присваивает значение переменной только если текущее значение является ложным (false, 0, "", null, undefined, NaN).

Как это работает?

let name = "";
name ||= "Anonymous"; 
console.log(name); // "Anonymous"

Здесь переменная name изначально пустая (ложное значение), поэтому ей присваивается "Anonymous".

Аналог без ||=

Без этого оператора пришлось бы писать так:

let name = "";
if (!name) {
  name = "Anonymous";
}

Или через обычный ||:

name = name || "Anonymous";

||= делает то же самое, но короче и нагляднее!

💡 Совет: Используй ||=, когда нужно задать значение по умолчанию для переменной, которая может быть ложной.

Оператор &&= (Logical AND Assignment)

Этот оператор присваивает значение переменной только если текущее значение истинное (не false, 0, "" и т. д.).

Пример:

let isLoggedIn = true;
isLoggedIn &&= "Welcome!";
console.log(isLoggedIn); // "Welcome!"

Если бы isLoggedIn был false, присваивания бы не произошло.

Аналог без &&=

Раньше приходилось писать так:

if (isLoggedIn) {
  isLoggedIn = "Welcome!";
}

Или через &&:

isLoggedIn = isLoggedIn && "Welcome!";

&&= делает код лаконичнее!

🔥 Где пригодится? Например, для обновления свойства объекта только при условии, что оно уже существует.

Оператор ??= (Nullish Coalescing Assignment)

Этот оператор присваивает значение переменной только если текущее значение null или undefined (игнорирует другие ложные значения, такие как 0 или "").

Пример:

let score = 0;
score ??= 100;
console.log(score); // 0 (потому что 0 не равен null или undefined)

А вот если бы score был null:

let score = null;
score ??= 100;
console.log(score); // 100

Аналог без ??=

Раньше использовали проверку:

if (score === null || score === undefined) {
  score = 100;
}

Или через ??:

score = score ?? 100;

??= — идеальный выбор, когда важно учитывать только null и undefined, а не все ложные значения.

🎯 Полезный случай: Отлично подходит для инициализации конфигов, где 0 или "" могут быть допустимыми значениями.

Сравнение операторов в таблице 📊

Практические примеры 🛠️

1. Установка дефолтного значения объекта

const user = { name: "" };
user.name ||= "Anonymous";
console.log(user.name); // "Anonymous" (так как "" — ложное значение)

2. Обновление токена, если он уже есть

let authToken = "existing_token";
authToken &&= "new_token";
console.log(authToken); // "new_token"

3. Инициализация неопределённых настроек

let settings = { darkMode: null };
settings.darkMode ??= true;
console.log(settings.darkMode); // true

Итоги 🏁

• ||= — для значений по умолчанию (проверяет ложные значения).
• &&= — для обновления только существующих/истинных значений.
• ??= — для случаев, когда важно учитывать только null и undefined.

Эти операторы делают код чище и помогают избежать лишних проверок. Попробуй их в своих проектах! 🚀