Логічне присвоєння з нульовим об’єднанням JavaScript: покращення умовного присвоєння

JavaScript постійно розвивається, пропонуючи розробникам нові та покращені способи написання більш чистого, ефективного та зрозумілого коду. Одним з таких покращень, представлених у ES2020, є оператор логічного присвоєння з нульовим об’єднанням (??=). Цей оператор надає стислий і потужний спосіб присвоєння значення змінній лише в тому випадку, якщо ця змінна наразі має значення null або undefined.

Розуміння нульового об’єднання та логічного присвоєння

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

Оператор нульового об’єднання (??)

Оператор нульового об’єднання (??) повертає правий операнд, якщо його лівий операнд має значення null або undefined. В іншому випадку він повертає свій лівий операнд. Це забезпечує спосіб надання значень за замовчуванням у ситуаціях, коли null або undefined представляють відсутність значущого значення. Важливо відзначити різницю між ?? та логічним оператором АБО ||. || перевіряє хибні значення (0, '', false, null, undefined, NaN), тоді як ?? перевіряє *тільки* null або undefined.

Приклад:

            const userName = user.name ?? 'Guest';
console.log(userName); // Output: 'Guest' if user.name is null or undefined, otherwise the value of user.name

            

              
                Copy
              
            
          

У цьому прикладі, якщо user.name має значення null або undefined, змінній userName буде присвоєно значення 'Guest'. В іншому випадку їй буде присвоєно значення user.name.

Оператори логічного присвоєння

Оператори логічного присвоєння поєднують логічну операцію з присвоєнням. Наприклад, оператор логічного присвоєння АБО (||=) присвоює правий операнд лівому операнду лише в тому випадку, якщо лівий операнд є хибним.

Приклад:

            let userRole = '';
userRole ||= 'subscriber';
console.log(userRole); // Output: 'subscriber' because '' is falsy

userRole ||= 'admin';
console.log(userRole); // Output: 'subscriber' because 'subscriber' is truthy

            

              
                Copy
              
            
          

Оператор логічного присвоєння з нульовим об’єднанням (??=)

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

Синтаксис:

            variable ??= value;

            

              
                Copy
              
            
          

Це еквівалентно:

            variable = variable ?? value;

            

              
                Copy
              
            
          

Або, більш явно:

            if (variable === null || variable === undefined) {
  variable = value;
}

            

              
                Copy
              
            
          

Практичні випадки використання та приклади

Оператор ??= може бути неймовірно корисним у різноманітних сценаріях. Давайте розглянемо деякі практичні випадки використання.

Ініціалізація змінних значеннями за замовчуванням

Поширеним випадком використання є ініціалізація змінних значеннями за замовчуванням лише тоді, коли вони спочатку мають значення null або undefined. Це особливо корисно під час роботи з необов’язковими параметрами конфігурації або даними, отриманими із зовнішнього джерела.

Приклад:

            let userSettings = {
  theme: null,
  notificationsEnabled: undefined,
  language: 'en'
};

userSettings.theme ??= 'dark';
userSettings.notificationsEnabled ??= true;
userSettings.language ??= 'fr'; //Does not change because it has a valid value

console.log(userSettings); 
// Output: { theme: 'dark', notificationsEnabled: true, language: 'en' }

            

              
                Copy
              
            
          

У цьому прикладі userSettings.theme та userSettings.notificationsEnabled ініціалізуються значеннями за замовчуванням, оскільки вони спочатку мали значення null та undefined відповідно. userSettings.language залишається без змін, оскільки вона вже містить дійсне строкове значення.

Встановлення значень за замовчуванням для властивостей об’єкта

Оператор ??= також корисний для встановлення значень за замовчуванням для властивостей об’єкта, особливо під час роботи з глибоко вкладеними об’єктами або структурами даних.

Приклад:

            const config = {
  api: {
    endpoint: null
  }
};

config.api.endpoint ??= 'https://api.example.com';

console.log(config.api.endpoint); // Output: 'https://api.example.com'

            

              
                Copy
              
            
          

Кешування результатів дорогих операцій

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

            let cachedResult = null;

function expensiveOperation() {
  console.log('Performing expensive operation...');
  // Simulate an expensive operation
  return Math.random() * 100;
}

cachedResult ??= expensiveOperation();
console.log(cachedResult);

cachedResult ??= expensiveOperation(); // expensiveOperation() will not be called this time
console.log(cachedResult);

            

              
                Copy
              
            
          

У цьому прикладі функція expensiveOperation викликається лише один раз, при першому доступі до cachedResult. Наступні звернення використовуватимуть кешований результат.

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

Під час розробки функцій з необов’язковими параметрами оператор ??= надає чистий спосіб присвоєння значень за замовчуванням, якщо параметри не надано або вони явно встановлені на null або undefined.

Приклад:

            function greet(name, greeting) {
  name ??= 'Guest';
  greeting ??= 'Hello';
  console.log(`${greeting}, ${name}!`);
}

greet(); // Output: Hello, Guest!
greet('Alice'); // Output: Hello, Alice!
greet(null, 'Bonjour'); // Output: Bonjour, Guest!

            

              
                Copy
              
            
          

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

Параметри конфігурації часто завантажуються із зовнішніх джерел (наприклад, файл JSON, змінні середовища). ??= ідеально підходить для встановлення значень за замовчуванням, якщо ці параметри відсутні.

Приклад:

            const defaultConfiguration = {
  port: 3000,
  databaseUrl: 'localhost:5432'
};

// Simulate loading configuration from environment variables
const environmentConfiguration = {
  port: process.env.PORT, // Could be null or undefined
  //databaseUrl intentionally omitted
};

let finalConfiguration = { ...defaultConfiguration }; // Copy defaults

for (const key in environmentConfiguration) {
  finalConfiguration[key] ??= defaultConfiguration[key]; //Merge, overwriting only if null/undefined
}

console.log(finalConfiguration); // port will be 3000 if process.env.PORT is null/undefined, otherwise it will be the env var value. databaseUrl will always be 'localhost:5432'

            

              
                Copy
              
            
          

Переваги використання ??=

• Стислість: Оператор ??= забезпечує більш стислий синтаксис порівняно з традиційними умовними присвоєннями, що призводить до більш чистого та зрозумілого коду.
• Ефективність: Оператор виконує присвоєння лише в тому випадку, якщо лівий операнд має значення null або undefined, уникаючи непотрібних обчислень або побічних ефектів.
• Читабельність: Намір коду є більш чітким, оскільки оператор явно вказує, що присвоєння є умовним на основі нульових значень.
• Незмінність: У поєднанні з іншими методами (наприклад, поширенням об’єкта) ??= може допомогти підтримувати незмінність у програмах JavaScript, створюючи нові об’єкти з оновленими властивостями замість безпосереднього зміни наявних.

Рекомендації та найкращі практики

• Сумісність з браузером: Оператор ??= є відносно новим, тому переконайтеся, що ваші цільові браузери його підтримують. Використовуйте транспілятор, наприклад Babel, щоб забезпечити сумісність зі старими браузерами, якщо це необхідно. Зверніться до документації MDN для отримання актуальної інформації про сумісність.
• Розуміння нульових значень: Чітко розумійте різницю між null та undefined та іншими хибними значеннями (наприклад, 0, '', false). Оператор ??= перевіряє лише null та undefined.
• Послідовність стилю коду: Підтримуйте послідовний стиль коду в усьому проєкті, дотримуючись встановлених угод та рекомендацій щодо кодування. Використовуйте лінтери та форматери (наприклад, ESLint, Prettier), щоб автоматично застосовувати правила стилю коду.
• Тестування: Ретельно тестуйте свій код, щоб переконатися, що оператор ??= працює належним чином у різних сценаріях. Напишіть модульні тести, щоб охопити різні вхідні значення та граничні випадки.
• Альтернативи: Хоча ??= часто є найбільш відповідним вибором, розгляньте інші варіанти, як-от оператор логічного присвоєння АБО (||=) або традиційні оператори if, коли вони забезпечують кращу чіткість або функціональність для вашого конкретного випадку використання. Наприклад, якщо вам потрібно перевірити *будь-яке* хибне значення (не лише null та undefined), ||= може бути кращим вибором.

Міркування щодо інтернаціоналізації та локалізації

Під час роботи з міжнародною аудиторією враховуйте, як оператор ??= взаємодіє з практиками локалізації та інтернаціоналізації (i18n).

• Параметри мови за замовчуванням: Під час ініціалізації параметрів мови переконайтеся, що мова за замовчуванням відповідає місцезнаходженню або налаштуванням користувача. Наприклад, якщо браузер користувача вказує на перевагу іспанської мови (es), ініціалізуйте параметр мови на 'es', якщо спочатку він має значення null або undefined.
• Форматування валюти та чисел: Під час роботи з валютою або форматуванням чисел враховуйте регіональні відмінності. Використовуйте оператор ??= для ініціалізації параметрів форматування валюти або чисел за замовчуванням на основі мови користувача.
• Форматування дати та часу: Аналогічно використовуйте оператор ??= для ініціалізації параметрів форматування дати та часу за замовчуванням на основі мови користувача. Розгляньте можливість використання таких бібліотек, як API Intl або Moment.js (хоча пам’ятайте про його застарілий статус і розгляньте альтернативи, як-от Luxon) для обробки форматування дати та часу з урахуванням мови.
• Напрямок тексту (RTL/LTR): Для мов, які використовують напрямок тексту справа наліво (RTL) (наприклад, арабська, іврит), переконайтеся, що ваша програма правильно обробляє напрямок тексту. Сам оператор ??= безпосередньо не впливає на напрямок тексту, але важливо враховувати напрямок тексту під час ініціалізації параметрів макета або властивостей компонентів.

Приклад (Вибір мови):

            let userLanguage = localStorage.getItem('language'); // Attempt to retrieve from local storage
userLanguage ??= navigator.language || navigator.userLanguage; // Fallback to browser settings
userLanguage ??= 'en'; // Default to English if all else fails

console.log(`Selected language: ${userLanguage}`);

            

              
                Copy
              
            
          

Альтернативи ??=

Хоча ??= забезпечує стислий розв’язок, розуміння альтернатив має вирішальне значення для прийняття обґрунтованих рішень.

• Традиційний оператор if: Найпростіша альтернатива. Хоча це багатослівно, він пропонує максимальний контроль та читабельність для складних умов.
• Тернарний оператор: Корисний для простих умовних присвоєнь, але може стати менш читабельним з вкладеними умовами.
• Логічне присвоєння АБО (||=): Підходить при перевірці *будь-якого* хибного значення, а не лише null або undefined. Пам’ятайте про різницю між хибними та нульовими значеннями!

Загальні пастки, яких слід уникати

• Плутанина з ||=: Найпоширенішою помилкою є використання ??=, коли потрібне ||=, або навпаки. Розумійте різницю між нульовими та хибними значеннями.
• Надмірне використання: Хоча це стисло, надмірне використання іноді може зменшити читабельність, особливо у складних сценаріях. Прагніть до балансу.
• Ігнорування сумісності з браузером: Завжди перевіряйте сумісність з браузером і транслюйте свій код, коли це необхідно.

Висновок

Оператор логічного присвоєння з нульовим об’єднанням (??=) є цінним доповненням до мови JavaScript, забезпечуючи стислий і ефективний спосіб виконання умовних присвоєнь на основі нульових значень. Розуміючи його функціональність, випадки використання та найкращі практики, розробники можуть писати більш чистий, читабельний і зручний для супроводу код. Як і з будь-якою новою функцією, важливо враховувати сумісність з браузером, послідовність стилю коду та тестування, щоб забезпечити ефективне та відповідне використання оператора у ваших проєктах. Використовуйте це покращення, щоб писати більш елегантний та ефективний код JavaScript!

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