Оператор ??= в JavaScript: Простота присвоєння значень за замовчуванням

Втомились від громіздких або неточних способів обробки null та undefined у вашому коді? Зустрічайте оператор присвоєння з об’єднанням з null (??=), який став справжнім проривом у ECMAScript 2021 (ES12).

Подумайте про ??= як про розумного охоронця для ваших змінних. Він призначає значення лише тоді, коли змінна дорівнює null або undefined.

До ??=

// Підхід до 2021 року  
if (user.name === null || user.name === undefined) {  
 user.name = 'Anonymous';  
}  

// Або використовуючи оператор об'єднання з null (??)  
user.name = user.name ?? 'Anonymous';

Після ??=

// ES2021 та пізніше  
user.name ??= 'Anonymous';

Коли ви пишете user.name ??= 'Anonymous', код перевіряє, чи є user.name рівним null або undefined.

• Якщо так, він присвоює 'Anonymous'.
• Якщо ні, існуюче значення залишається незмінним, навіть якщо це 0, false або порожній рядок.

Чому ??= краще альтернатив

1️⃣ Громіздкі if-вирази: Занадто повторювані.

if (user.name === null || user.name === undefined) {  
 user.name = 'Anonymous';  
}

2️⃣ Логічний оператор "OR" (||): Замінює валідні значення "falsy", такі як 0 або ''.

user.name = user.name || 'Anonymous'; // Перезаписує '', 0 або false

3️⃣ Тернарний оператор: Може стати важким для розуміння при складних умовах.

user.name = user.name === null || user.name === undefined  
 ? 'Anonymous'  
 : user.name;

4️⃣ ??=: Чисто, точно та інтуїтивно.

user.name ??= 'Anonymous';

🎯 Де ??= працює найкраще

Він ідеально підходить для випадків, коли значення "falsy", такі як 0, false або '', мають значення:

let score = 0;  
score ??= 100; // Залишає 0  

let tag = '';  
tag ??= 'default'; // Залишає порожній рядок  

let active = false;  
active ??= true; // Залишає false

Використовуючи ??=, ви гарантуєте, що ваш код працює так, як очікується, зменшуючи можливість помилок, особливо коли обробляєте введення користувача або налаштування за замовчуванням.

Перекладено з: JavaScript’s ??= Operator: Default Values Made Simple