Nullish Coalescing в JavaScript: Изчерпателно ръководство за присвояване на стойности по подразбиране

В JavaScript присвояването на стойности по подразбиране е често срещана задача. Традиционно разработчиците са използвали оператора OR (||) за тази цел. Въпреки това, операторът за nullish coalescing (??), въведен в ECMAScript 2020, предоставя по-точен и надежден начин за обработка на присвоявания на стойности по подразбиране, особено когато се работи със стойности null или undefined. Това ръководство предлага задълбочен поглед върху оператора за nullish coalescing, като изследва неговия синтаксис, поведение, разлики от оператора OR и практически случаи на употреба.

Какво е Nullish Coalescing?

Операторът за nullish coalescing (??) е логически оператор, който връща своя десен операнд, когато левият му операнд е null или undefined. В противен случай той връща своя ляв операнд. С по-прости думи, той предоставя стойност по подразбиране само когато променливата е строго null или undefined.

Синтаксис

Синтаксисът на оператора за nullish coalescing е прост:

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. Nullish стойност е или null, или undefined. Falsy стойност е стойност, която се счита за невярна (false), когато се срещне в булев контекст. Falsy стойностите включват:

• null
• undefined
• 0 (нула)
• NaN (Not a Number)
• '' (празен низ)
• false

Ключовата разлика е, че операторът за nullish coalescing проверява само за null или undefined, докато операторът OR (||) проверява за всяка falsy стойност.

Разликата между ?? и ||

Операторът OR (||) е логически оператор „ИЛИ“, който връща десния операнд, ако левият операнд е falsy. Въпреки че може да се използва за присвояване на стойности по подразбиране, той може да доведе до неочаквано поведение при работа със стойности като 0 или празен низ.

Пример: Капаните на ||

const quantity = 0 || 10; // Възнамеряваме стойност по подразбиране 10, ако quantity липсва
console.log(quantity); // Резултат: 10 (Неочаквано!), защото 0 е falsy

const text = '' || 'Default Text'; //Възнамеряваме текст по подразбиране, ако text липсва
console.log(text); // Резултат: Default Text (Неочаквано!), защото '' е falsy

В първия пример възнамерявахме да присвоим количество по подразбиране 10 само ако quantity липсваше (null или undefined). Въпреки това, тъй като 0 е falsy стойност, операторът OR неправилно присвои стойността по подразбиране. По същия начин, празният низ кара текста по подразбиране да се показва, дори ако низът съществува (но е празен).

Използване на ?? за прецизност

Нека пренапишем предишния пример, като използваме оператора за nullish coalescing:

const quantity = 0 ?? 10;
console.log(quantity); // Резултат: 0 (Правилно!)

const text = '' ?? 'Default Text';
console.log(text); // Резултат: '' (Правилно!)

Сега резултатът е очакваният. Операторът за nullish coalescing проверява само за null или undefined, така че 0 и '' се третират като валидни стойности и техните оригинални стойности се запазват.

Случаи на употреба за Nullish Coalescing

Операторът за nullish coalescing е полезен в различни сценарии, при които трябва да предоставите стойности по подразбиране само когато дадена променлива е строго null или undefined. Ето някои често срещани случаи на употреба:

1. Обработка на незадължителни параметри на функция

Когато дефинирате функция с незадължителни параметри, можете да използвате оператора за nullish coalescing, за да предоставите стойности по подразбиране, ако параметрите не са зададени.

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. Задаване на опции за конфигурация по подразбиране

Когато работите с конфигурационни обекти, можете да използвате оператора за nullish coalescing, за да гарантирате, че се използват стойности по подразбиране, ако определени опции за конфигурация не са посочени.

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. Достъп до вложени свойства на обекти

При достъп до свойства на вложени обекти, операторът за nullish coalescing може да се комбинира с optional chaining (?.), за да се предоставят стойности по подразбиране, ако някое от междинните свойства е 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 или външни източници, операторът за nullish coalescing може да се използва за предоставяне на стойности по подразбиране, ако определени полета с данни липсват или имат стойности 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 fetching user data:", error);
  }
}

// Симулиране на различни отговори от API:
const userWithCountry = { name: "John", country: "USA", timezone: "EST" };
const userWithoutCountry = { name: "Jane", timezone: "GMT" };

// За да тествате това, ще ви е необходим реален API или mock 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

Приоритет на операторите

Операторът за nullish coalescing има относително нисък приоритет. Той е по-нисък от операторите OR (||) и AND (&&). Поради това, когато комбинирате оператора за nullish coalescing с други логически оператори, е от съществено значение да използвате скоби, за да дефинирате изрично реда на операциите. Ако не го направите, това може да доведе до синтактични грешки или неочаквано поведение.

Пример: Използване на скоби за яснота

// Без скоби (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 енджинът не може да определи предвидения ред на операциите. Чрез добавяне на скоби ние изрично казваме на енджина първо да оцени оператора за nullish coalescing. Вторият пример е валиден; въпреки това, резултатът е различен, защото изразът `||` се оценява първи.

Съвместимост с браузъри

Операторът за nullish coalescing (??) е сравнително нова функция, така че е изключително важно да се вземе предвид съвместимостта с браузъри, особено ако се насочвате към по-стари браузъри. Повечето съвременни браузъри поддържат оператора за nullish coalescing, включително:

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

Ако трябва да поддържате по-стари браузъри, можете да използвате транспайлър като Babel, за да преобразувате кода си в съвместима версия на JavaScript. Babel ще трансформира оператора ?? в еквивалентен JavaScript код, който работи в по-стари среди.

Добри практики

Ето някои добри практики за ефективно използване на оператора за nullish coalescing:

• Използвайте ?? за nullish проверки: Използвайте оператора за nullish coalescing (??), когато искате да предоставите стойност по подразбиране само когато променливата е null или undefined.
• Използвайте скоби за сложни изрази: Когато комбинирате оператора за nullish coalescing с други логически оператори, използвайте скоби, за да дефинирате ясно реда на операциите.
• Вземете предвид съвместимостта с браузъри: Проверете съвместимостта с браузъри и използвайте транспайлър, ако е необходимо, за да поддържате по-стари браузъри.
• Използвайте последователно: Прилагайте ??, където е подходящо, за по-предсказуем стил на кодиране в целия проект.
• Комбинирайте с optional chaining: Използвайте ?? заедно с optional chaining ?. за безопасно достъпване и присвояване на стойности по подразбиране на вложени свойства на обекти.

Глобални съображения

Когато разработвате за глобална аудитория, вземете предвид следните точки, свързани с присвояването на стойности по подразбиране:

• Локализация: Стойностите по подразбиране може да се наложи да бъдат локализирани в зависимост от езика или региона на потребителя. Например, символ за валута по подразбиране или формат на дата.
• Културни норми: Някои стойности по подразбиране може да се наложи да бъдат коригирани въз основа на културните норми. Например, поздравително съобщение по подразбиране може да се наложи да бъде различно в различните култури.
• Достъпност: Уверете се, че стойностите по подразбиране са достъпни и разбираеми за потребители с увреждания. Предоставяйте ясни и описателни етикети за стойностите по подразбиране в потребителските интерфейси.
• Часови зони и дати: Когато работите с дати и часове, използвайте подходящи часови зони и формати на дати, за да сте сигурни, че стойностите по подразбиране се показват правилно на потребители в различни региони.

Пример: Локализация с Nullish Coalescing

Да кажем, че искате да покажете поздравително съобщение по подразбиране на различни езици въз основа на локала на потребителя. Можете да използвате оператора за nullish coalescing, за да предоставите съобщение по подразбиране, ако локализирано съобщение не е налично.

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! (Използва се английски по подразбиране)

Заключение

Операторът за nullish coalescing (??) е ценно допълнение към езика JavaScript. Той предоставя по-точен и надежден начин за присвояване на стойности по подразбиране в сравнение с оператора OR (||), особено когато се работи със стойности като 0 или празни низове. Като разбирате неговия синтаксис, поведение и случаи на употреба, можете да пишете по-чист, по-лесен за поддръжка код, който точно обработва присвояването на стойности по подразбиране. Не забравяйте да вземете предвид съвместимостта с браузъри, приоритета на операторите и глобалните съображения, когато използвате оператора за nullish coalescing във вашите проекти.

Като следвате добрите практики, очертани в това ръководство, можете ефективно да използвате оператора за nullish coalescing, за да подобрите качеството и надеждността на вашия JavaScript код, правейки го по-здрав и по-лесен за разбиране. Не забравяйте винаги да давате приоритет на яснотата и поддръжката на вашия код, а операторът за nullish coalescing може да бъде мощен инструмент за постигане на тези цели.