Нульове злиття в JavaScript: Повний посібник з присвоєння значень за замовчуванням

У JavaScript присвоєння значень за замовчуванням є поширеним завданням. Традиційно розробники використовували для цього оператор OR (||). Однак оператор нульового злиття (??), представлений в ECMAScript 2020, надає точніший та надійніший спосіб обробки присвоєнь значень за замовчуванням, особливо при роботі зі значеннями null або undefined. Цей посібник пропонує глибоке занурення в оператор нульового злиття, досліджуючи його синтаксис, поведінку, відмінності від оператора OR та практичні випадки використання.

Що таке нульове злиття?

Оператор нульового злиття (??) — це логічний оператор, який повертає свій правий операнд, якщо його лівий операнд є null або undefined. В іншому випадку він повертає свій лівий операнд. Простими словами, він надає значення за замовчуванням лише тоді, коли змінна є строго null або undefined.

Синтаксис

Синтаксис оператора нульового злиття простий:

leftOperand ?? rightOperand

Тут leftOperand — це змінна або вираз, який ви хочете перевірити на null або undefined, а rightOperand — це значення за замовчуванням, яке ви хочете присвоїти, якщо leftOperand дійсно є null або undefined.

Приклад

Розглянемо наступний приклад:

const username = null ?? "Guest";
console.log(username); // Вивід: Guest

const age = undefined ?? 25;
console.log(age); // Вивід: 25

const city = "London" ?? "Unknown";
console.log(city); // Вивід: London

У цьому прикладі змінній username присвоюється значення за замовчуванням "Guest", оскільки початково вона є null. Аналогічно, змінній age присвоюється 25, оскільки вона починається як undefined. Однак змінна city зберігає своє початкове значення "London", оскільки воно не є ані null, ані undefined.

Нульові (Nullish) та хибні (Falsy) значення

Важливо розуміти різницю між нульовими (nullish) та хибними (falsy) значеннями в JavaScript. Нульове значення — це або null, або undefined. Хибне значення — це значення, яке вважається хибним (false) у булевому контексті. До хибних значень належать:

null
undefined
0 (нуль)
NaN (Not a Number — не число)
'' (порожній рядок)
false

Ключова відмінність полягає в тому, що оператор нульового злиття перевіряє лише наявність null або undefined, тоді як оператор OR (||) перевіряє будь-яке хибне значення.

Різниця між `??` та `||`

Оператор OR (||) — це логічний оператор «АБО», який повертає правий операнд, якщо лівий операнд є хибним. Хоча його можна використовувати для присвоєння значень за замовчуванням, це може призвести до неочікуваної поведінки при роботі зі значеннями, такими як 0 або порожній рядок.

Приклад: Недоліки оператора `||`

const quantity = 0 || 10; // Ми маємо намір встановити за замовчуванням 10, якщо кількість відсутня
console.log(quantity); // Вивід: 10 (Неочікувано!) оскільки 0 є хибним

const text = '' || 'Default Text'; //Ми маємо намір встановити текст за замовчуванням, якщо текст відсутній
console.log(text); // Вивід: Default Text (Неочікувано!) оскільки '' є хибним

У першому прикладі ми мали намір присвоїти кількість за замовчуванням 10, лише якщо quantity була відсутня (null або undefined). Однак, оскільки 0 є хибним значенням, оператор OR неправильно присвоїв значення за замовчуванням. Аналогічно, порожній рядок призводить до відображення тексту за замовчуванням, навіть якщо рядок існує (але є порожнім).

Використання `??` для точності

Перепишемо попередній приклад, використовуючи оператор нульового злиття:

const quantity = 0 ?? 10;
console.log(quantity); // Вивід: 0 (Правильно!)

const text = '' ?? 'Default Text';
console.log(text); // Вивід: '' (Правильно!)

Тепер вивід відповідає очікуванням. Оператор нульового злиття перевіряє лише наявність null або undefined, тому 0 та '' розглядаються як дійсні значення, і їхні початкові значення зберігаються.

Сценарії використання нульового злиття

Оператор нульового злиття корисний у різних сценаріях, де потрібно надавати значення за замовчуванням, лише коли змінна є строго null або undefined. Ось деякі поширені випадки використання:

1. Обробка необов'язкових параметрів функції

При визначенні функції з необов'язковими параметрами ви можете використовувати оператор нульового злиття для надання значень за замовчуванням, якщо параметри не були передані.

function greet(name, greeting) {
  const userName = name ?? "User";
  const userGreeting = greeting ?? "Hello";
  console.log(`${userGreeting}, ${userName}!`);
}

greet(); // Вивід: Hello, User!
greet("Alice"); // Вивід: Hello, Alice!
greet("Bob", "Greetings"); // Вивід: Greetings, Bob!

2. Встановлення параметрів конфігурації за замовчуванням

При роботі з об'єктами конфігурації ви можете використовувати оператор нульового злиття, щоб забезпечити використання значень за замовчуванням, якщо певні параметри конфігурації не вказані.

const config = {
  timeout: 5000,
  retries: 3
};

function fetchData(options) {
  const timeout = options.timeout ?? 10000; // Таймаут за замовчуванням 10 секунд
  const retries = options.retries ?? 5; // 5 повторних спроб за замовчуванням
  console.log(`Timeout: ${timeout}, Retries: ${retries}`);
}

fetchData(config); // Вивід: Timeout: 5000, Retries: 3
fetchData({}); // Вивід: Timeout: 10000, Retries: 5
fetchData({timeout:null, retries: undefined}); // Вивід: Timeout: 10000, Retries: 5

3. Доступ до вкладених властивостей об'єкта

При доступі до властивостей вкладених об'єктів оператор нульового злиття можна поєднувати з оператором опціонального ланцюжка (?.), щоб надавати значення за замовчуванням, якщо будь-яка з проміжних властивостей є null або undefined.

const user = {
  profile: {
    address: {
      city: "New York"
    }
  }
};

const cityName = user?.profile?.address?.city ?? "Unknown";
console.log(cityName); // Вивід: New York

const unknownUser = {};
const unknownCityName = unknownUser?.profile?.address?.city ?? "Unknown";
console.log(unknownCityName); // Вивід: Unknown

4. Робота з API та зовнішніми даними

При отриманні даних з API або зовнішніх джерел оператор нульового злиття можна використовувати для надання значень за замовчуванням, якщо певні поля даних відсутні або мають значення null чи undefined. Розглянемо отримання даних користувача з різних регіонів. Припустимо, що деякі регіони можуть не включати поле `country` у дані своїх користувачів.

async function getUserData(userId) {
  try {
    const response = await fetch(`https://api.example.com/users/${userId}`);
    const data = await response.json();
    const country = data.country ?? "Unknown Country";
    const timezone = data.timezone ?? "UTC";
    console.log(`User is from: ${country}, Timezone: ${timezone}`);
  } catch (error) {
    console.error("Помилка отримання даних користувача:", error);
  }
}

// Симуляція різних відповідей API:
const userWithCountry = { name: "John", country: "USA", timezone: "EST" };
const userWithoutCountry = { name: "Jane", timezone: "GMT" };

// Щоб протестувати це, вам знадобиться реальний API або імітація fetch.
// Для демонстраційних цілей, давайте симулюємо відповіді:
global.fetch = async (url) => {
    if (url.includes("123")) {
        return { json: async () => userWithCountry };
    } else if (url.includes("456")) {
        return { json: async () => userWithoutCountry };
    }
    throw new Error("Unexpected URL");
};

getUserData(123); // Вивід: User is from: USA, Timezone: EST
getUserData(456); // Вивід: User is from: Unknown Country, Timezone: GMT

Пріоритет операторів

Оператор нульового злиття має відносно низький пріоритет. Він нижчий, ніж у операторів OR (||) та AND (&&). Тому, поєднуючи оператор нульового злиття з іншими логічними операторами, важливо використовувати дужки для явного визначення порядку операцій. Недотримання цього може призвести до синтаксичних помилок або неочікуваної поведінки.

Приклад: Використання дужок для ясності

// Без дужок (SyntaxError)
// const result = false || null ?? "Default"; // SyntaxError: Неочікуваний токен '??'

// З дужками (Правильно)
const result = false || (null ?? "Default");
console.log(result); // Вивід: Default

const anotherResult = (false || null) ?? "Default";
console.log(anotherResult); // Вивід: null

У першому прикладі відсутність дужок призводить до SyntaxError, оскільки рушій JavaScript не може визначити запланований порядок операцій. Додаючи дужки, ми явно вказуємо рушію спочатку обчислити оператор нульового злиття. Другий приклад є дійсним; однак вивід інший, оскільки спочатку обчислюється вираз з ||.

Сумісність з браузерами

Оператор нульового злиття (??) — це відносно нова функція, тому важливо враховувати сумісність з браузерами, особливо якщо ви орієнтуєтеся на старіші версії. Більшість сучасних браузерів підтримують оператор нульового злиття, зокрема:

Chrome 80+
Firefox 72+
Safari 13.1+
Edge 80+
Node.js 14+

Якщо вам потрібно підтримувати старіші браузери, ви можете використовувати транспайлер, такий як Babel, для перетворення вашого коду у сумісну версію JavaScript. Babel перетворить оператор ?? на еквівалентний код JavaScript, який працює у старих середовищах.

Найкращі практики

Ось кілька найкращих практик для ефективного використання оператора нульового злиття:

Використовуйте ?? для перевірки на nullish: Використовуйте оператор нульового злиття (??), коли ви спеціально хочете надати значення за замовчуванням, лише якщо змінна є null або undefined.
Використовуйте дужки для складних виразів: При поєднанні оператора нульового злиття з іншими логічними операторами використовуйте дужки, щоб чітко визначити порядок операцій.
Враховуйте сумісність з браузерами: Перевіряйте сумісність з браузерами та використовуйте транспайлер, якщо необхідно, для підтримки старих браузерів.
Використовуйте послідовно: Застосовуйте ?? там, де це доречно, для більш передбачуваного стилю кодування у всьому проєкті.
Поєднуйте з опціональним ланцюжком: Використовуйте ?? у поєднанні з опціональним ланцюжком ?. для безпечного доступу та присвоєння значень за замовчуванням вкладеним властивостям об'єктів.

Глобальні аспекти

При розробці для глобальної аудиторії враховуйте наступні моменти, пов'язані з присвоєнням значень за замовчуванням:

Локалізація: Значення за замовчуванням можуть потребувати локалізації залежно від мови або регіону користувача. Наприклад, символ валюти або формат дати за замовчуванням.
Культурні норми: Певні значення за замовчуванням можуть потребувати коригування на основі культурних норм. Наприклад, стандартне привітання може відрізнятися в різних культурах.
Доступність: Переконайтеся, що значення за замовчуванням доступні та зрозумілі для користувачів з обмеженими можливостями. Надавайте чіткі та описові мітки для значень за замовчуванням в інтерфейсах користувача.
Часові пояси та дати: При роботі з датами та часом використовуйте відповідні часові пояси та формати дат, щоб забезпечити правильне відображення значень за замовчуванням для користувачів у різних регіонах.

Приклад: Локалізація з нульовим злиттям

Припустимо, ви хочете відображати стандартне вітальне повідомлення різними мовами залежно від локалі користувача. Ви можете використовувати оператор нульового злиття, щоб надати повідомлення за замовчуванням, якщо локалізоване повідомлення недоступне.

function getWelcomeMessage(locale) {
  const localizedMessages = {
    en: "Welcome!",
    fr: "Bienvenue !",
    de: "Willkommen!"
  };

  const message = localizedMessages[locale] ?? "Welcome!"; // За замовчуванням англійська, якщо локаль не знайдена
  return message;
}

console.log(getWelcomeMessage("fr")); // Вивід: Bienvenue !
console.log(getWelcomeMessage("es")); // Вивід: Welcome! (Використовується англійська за замовчуванням)

Висновок

Оператор нульового злиття (??) є цінним доповненням до мови JavaScript. Він надає точніший та надійніший спосіб присвоєння значень за замовчуванням порівняно з оператором OR (||), особливо при роботі зі значеннями, такими як 0 або порожні рядки. Розуміючи його синтаксис, поведінку та сценарії використання, ви можете писати чистіший, більш підтримуваний код, який точно обробляє присвоєння значень за замовчуванням. Не забувайте враховувати сумісність з браузерами, пріоритет операторів та глобальні аспекти при використанні оператора нульового злиття у своїх проєктах.

Дотримуючись найкращих практик, викладених у цьому посібнику, ви зможете ефективно використовувати оператор нульового злиття для покращення якості та надійності вашого коду JavaScript, роблячи його більш стійким та легким для розуміння. Пам'ятайте, що завжди слід надавати пріоритет ясності та підтримуваності вашого коду, і оператор нульового злиття може бути потужним інструментом для досягнення цих цілей.