Операторы присваивания JavaScript

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

Базовый оператор присваивания: =

Присваивает значение справа переменной слева.

let count = 0;
let message = "Привет";
let isActive = true;

Это единственный оператор, который создаёт переменную при первом использовании в глобальной области видимости (если не используется let/const — не рекомендуется).

Составные операторы присваивания

Сокращённая форма операций, где значение переменной изменяется и сразу присваивается обратно.

Оператор Эквивалент Пример
+= x = x + y a += 5 → a = a + 5
-= x = x - y b -= 3 → b = b - 3
*= x = x * y c *= 2 → c = c * 2
/= x = x / y d /= 4 → d = d / 4
%= x = x % y e %= 7 → e = e % 7
**= x = x ** y f **= 3 → f = f ** 3

Примеры:

let score = 100;

score += 25;   // 125
score *= 2;    // 250
score -= 50;   // 200
score %= 60;   // 20 (остаток от 200 ÷ 60)
score **= 2;   // 400 (20²)

console.log(score); // 400

✅ Преимущество: короче, читаемее, немного эффективнее — особенно полезны в циклах и обработке данных.

Оператор объединения с присваиванием: ??=

Присваивает значение только если левый операнд равен null или undefined.

let userLanguage = null;
userLanguage ??= "en"; // теперь userLanguage = "en"

let userName = "";
userName ??= "Аноним"; // останется "", потому что "" ≠ null/undefined

let settings = { theme: undefined };
settings.theme ??= "dark"; // theme станет "dark"

console.log(settings.theme); // "dark"

💡 Отличие от =: ??= не перезаписывает существующие значения, даже если они ложные (0, "", false).
Это делает его идеальным для установки значений по умолчанию в конфигурациях, настройках, API-ответах.

Практический пример: загрузка настроек из локального хранилища

let theme = localStorage.getItem("theme");
theme ??= "light"; // если не задано — использовать светлую тему

let fontSize = localStorage.getItem("fontSize");
fontSize ??= 16;     // если не задано — 16px

console.log({ theme, fontSize });

Оператор присваивания с опциональной цепочкой: ?.=

Присваивает значение только если предшествующая цепочка существует (не null/undefined).

let user = { profile: { name: "Иван" } };

// Попытка присвоить значение только если user.profile существует
user.profile?.name ??= "Гость"; // НЕ сработает — это не присваивание через ?.
user.profile?.age ??= 25;        // НЕ сработает — age не существует, но ?. не создаёт свойства

// А вот так:
user.profile?.age = 25;          // ❌ Ошибка: нельзя присвоить, если user.profile не существует

На самом деле, ?.= — это оператор присваивания, а не объединения. Он работает следующим образом:

let obj = {};

obj?.prop = 10; // ❌ ОШИБКА — SyntaxError: Invalid left-hand side expression

// Правильно — только если объект существует:
let config = { settings: {} };
config.settings?.debug = true; // ✅ Работает — config.settings существует

console.log(config.settings.debug); // true

// Если объект отсутствует — ничего не происходит:
let data = null;
data?.value = "test"; // Ничего не произойдёт — ошибки нет
console.log(data); // null

⚠️ Важно: ?.= не создаёт свойства — он лишь пропускает присваивание, если левая часть null/undefined.
Он применяется только к существующим объектам и их вложенным свойствам.

Полезный кейс: безопасное обновление вложенных данных

function updateUser(user, newSettings) {
  user?.profile?.name = newSettings.name;
  user?.profile?.email = newSettings.email;
  user?.preferences?.theme = newSettings.theme;
}

updateUser(null, { name: "Анна" });      // Ничего не сломается
updateUser({ profile: {} }, { name: "Анна" }); // profile.name = "Анна" — сработает

✅ Идеально подходит для работы с API-ответами, где структура может быть неполной.

Что нельзя делать

  • Не используйте ?.= для создания новых свойств в null/undefined объектах — это невозможно.
  • Не путайте ??= и ?.=:
    • ??= — присваивает, если значение null/undefined
    • ?.= — присваивает, только если путь существует