JavaScript Nullish Coalescing: Komplexní průvodce přiřazováním výchozích hodnot

V JavaScriptu je přiřazování výchozích hodnot běžným úkolem. Tradičně vývojáři pro tento účel používali operátor OR (||). Operátor nullish coalescing (??), představený v ECMAScript 2020, však poskytuje přesnější a spolehlivější způsob, jak zpracovávat přiřazování výchozích hodnot, zejména při práci s hodnotami null nebo undefined. Tento průvodce se podrobně zabývá operátorem nullish coalescing, zkoumá jeho syntaxi, chování, rozdíly oproti operátoru OR a praktické případy použití.

Co je Nullish Coalescing?

Operátor nullish coalescing (??) je logický operátor, který vrací svůj pravý operand, pokud je jeho levý operand null nebo undefined. V opačném případě vrací svůj levý operand. Jednodušeji řečeno, poskytuje výchozí hodnotu pouze tehdy, když je proměnná striktně null nebo undefined.

Syntaxe

Syntaxe operátoru nullish coalescing je jednoduchá:

leftOperand ?? rightOperand

Zde je leftOperand proměnná nebo výraz, u kterého chcete zkontrolovat, zda není null nebo undefined, a rightOperand je výchozí hodnota, kterou chcete přiřadit, pokud je leftOperand skutečně null nebo undefined.

Příklad

Zvažte následující příklad:

const username = null ?? "Guest";
console.log(username); // Výstup: Guest

const age = undefined ?? 25;
console.log(age); // Výstup: 25

const city = "London" ?? "Unknown";
console.log(city); // Výstup: London

V tomto příkladu je proměnné username přiřazena výchozí hodnota "Guest", protože je původně null. Podobně je proměnné age přiřazeno 25, protože začíná jako undefined. Proměnná city si však zachovává svou původní hodnotu, "London", protože není ani null, ani undefined.

Hodnoty nullish vs. falsy

Je klíčové porozumět rozdílu mezi hodnotami nullish a falsy v JavaScriptu. Hodnota nullish je buď null, nebo undefined. Hodnota falsy je hodnota, která je v booleovském kontextu považována za nepravdivou. Mezi falsy hodnoty patří:

null
undefined
0 (nula)
NaN (Not a Number)
'' (prázdný řetězec)
false

Klíčový rozdíl spočívá v tom, že operátor nullish coalescing kontroluje pouze null nebo undefined, zatímco operátor OR (||) kontroluje jakoukoli falsy hodnotu.

Rozdíl mezi `??` a `||`

Operátor OR (||) je logický operátor OR, který vrací pravý operand, pokud je levý operand falsy. Ačkoli jej lze použít pro přiřazování výchozích hodnot, může vést k neočekávanému chování při práci s hodnotami jako 0 nebo prázdný řetězec.

Příklad: Úskalí operátoru `||`

const quantity = 0 || 10; // Chceme výchozí hodnotu 10, pokud množství chybí
console.log(quantity); // Výstup: 10 (Neočekávané!), protože 0 je falsy

const text = '' || 'Default Text'; //Chceme výchozí text, pokud text chybí
console.log(text); // Výstup: Default Text (Neočekávané!), protože '' je falsy

V prvním příkladu jsme chtěli přiřadit výchozí množství 10 pouze v případě, že quantity chybělo (bylo null nebo undefined). Protože je však 0 falsy hodnota, operátor OR nesprávně přiřadil výchozí hodnotu. Podobně prázdný řetězec způsobí zobrazení výchozího textu, i když řetězec existuje (ale je prázdný).

Použití `??` pro přesnost

Přepišme předchozí příklad s použitím operátoru nullish coalescing:

const quantity = 0 ?? 10;
console.log(quantity); // Výstup: 0 (Správně!)

const text = '' ?? 'Default Text';
console.log(text); // Výstup: '' (Správně!)

Nyní je výstup podle očekávání. Operátor nullish coalescing kontroluje pouze null nebo undefined, takže 0 a '' jsou považovány za platné hodnoty a jejich původní hodnoty jsou zachovány.

Případy použití operátoru Nullish Coalescing

Operátor nullish coalescing je užitečný v různých scénářích, kdy potřebujete poskytnout výchozí hodnoty pouze tehdy, když je proměnná striktně null nebo undefined. Zde jsou některé běžné případy použití:

1. Zpracování volitelných parametrů funkcí

Při definování funkce s volitelnými parametry můžete použít operátor nullish coalescing k poskytnutí výchozích hodnot, pokud parametry nejsou zadány.

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

greet(); // Výstup: Hello, User!
greet("Alice"); // Výstup: Hello, Alice!
greet("Bob", "Greetings"); // Výstup: Greetings, Bob!

2. Nastavení výchozích konfiguračních voleb

Při práci s konfiguračními objekty můžete použít operátor nullish coalescing k zajištění, že budou použity výchozí hodnoty, pokud některé konfigurační volby nejsou specifikovány.

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

function fetchData(options) {
  const timeout = options.timeout ?? 10000; // Výchozí časový limit 10 sekund
  const retries = options.retries ?? 5; // Výchozích 5 pokusů
  console.log(`Timeout: ${timeout}, Retries: ${retries}`);
}

fetchData(config); // Výstup: Timeout: 5000, Retries: 3
fetchData({}); // Výstup: Timeout: 10000, Retries: 5
fetchData({timeout:null, retries: undefined}); // Výstup: Timeout: 10000, Retries: 5

3. Přístup k vnořeným vlastnostem objektů

Při přístupu k vlastnostem vnořených objektů lze operátor nullish coalescing kombinovat s operátorem volitelného řetězení (?.) pro poskytnutí výchozích hodnot, pokud je některá zprostředkující vlastnost null nebo undefined.

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

const cityName = user?.profile?.address?.city ?? "Unknown";
console.log(cityName); // Výstup: New York

const unknownUser = {};
const unknownCityName = unknownUser?.profile?.address?.city ?? "Unknown";
console.log(unknownCityName); // Výstup: Unknown

4. Práce s API a externími daty

Při načítání dat z API nebo externích zdrojů lze operátor nullish coalescing použít k poskytnutí výchozích hodnot, pokud některá datová pole chybí nebo mají hodnoty null či undefined. Zvažte načítání uživatelských dat z různých regionů. Předpokládejme, že některé regiony nemusí do svých uživatelských dat zahrnovat pole `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);
  }
}

// Simulace různých odpovědí API:
const userWithCountry = { name: "John", country: "USA", timezone: "EST" };
const userWithoutCountry = { name: "Jane", timezone: "GMT" };

// K otestování byste potřebovali skutečné API nebo mock fetch.
// Pro demonstrační účely si nasimulujme odpovědi:
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); // Výstup: User is from: USA, Timezone: EST
getUserData(456); // Výstup: User is from: Unknown Country, Timezone: GMT

Priorita operátorů

Operátor nullish coalescing má relativně nízkou prioritu. Je nižší než operátory OR (||) a AND (&&). Proto je při kombinování operátoru nullish coalescing s jinými logickými operátory nezbytné používat závorky k explicitnímu definování pořadí operací. Pokud tak neučiníte, může to vést k syntaktickým chybám nebo neočekávanému chování.

Příklad: Použití závorek pro přehlednost

// Bez závorek (SyntaxError)
// const result = false || null ?? "Default"; // SyntaxError: Neočekávaný token '??'

// Se závorkami (Správně)
const result = false || (null ?? "Default");
console.log(result); // Výstup: Default

const anotherResult = (false || null) ?? "Default";
console.log(anotherResult); // Výstup: null

V prvním příkladu absence závorek vede k SyntaxError, protože JavaScriptový engine nemůže určit zamýšlené pořadí operací. Přidáním závorek explicitně říkáme enginu, aby nejprve vyhodnotil operátor nullish coalescing. Druhý příklad je platný; výstup je však odlišný, protože je nejprve vyhodnocen výraz s ||.

Kompatibilita s prohlížeči

Operátor nullish coalescing (??) je relativně nová funkce, takže je klíčové zvážit kompatibilitu s prohlížeči, zejména pokud cílíte na starší prohlížeče. Většina moderních prohlížečů operátor nullish coalescing podporuje, včetně:

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

Pokud potřebujete podporovat starší prohlížeče, můžete použít transpilátor jako Babel k převedení vašeho kódu na kompatibilní verzi JavaScriptu. Babel transformuje operátor ?? na ekvivalentní JavaScriptový kód, který funguje ve starších prostředích.

Osvědčené postupy

Zde jsou některé osvědčené postupy pro efektivní používání operátoru nullish coalescing:

Používejte ?? pro kontrolu nullish hodnot: Používejte operátor nullish coalescing (??), když chcete specificky poskytnout výchozí hodnotu pouze tehdy, když je proměnná null nebo undefined.
Používejte závorky pro složité výrazy: Při kombinování operátoru nullish coalescing s jinými logickými operátory používejte závorky k jasnému definování pořadí operací.
Zvažte kompatibilitu s prohlížeči: Zkontrolujte kompatibilitu s prohlížeči a v případě potřeby použijte transpilátor pro podporu starších prohlížečů.
Používejte konzistentně: Osvojte si používání ?? tam, kde je to vhodné, pro předvídatelnější styl kódování v celém projektu.
Kombinujte s volitelným řetězením: Používejte ?? ve spojení s volitelným řetězením ?. pro bezpečný přístup a přiřazování výchozích hodnot vnořeným vlastnostem objektů.

Globální aspekty

Při vývoji pro globální publikum zvažte následující body týkající se přiřazování výchozích hodnot:

Lokalizace: Výchozí hodnoty může být nutné lokalizovat na základě jazyka nebo regionu uživatele. Například výchozí symbol měny nebo formát data.
Kulturní zvyklosti: Některé výchozí hodnoty může být nutné upravit na základě kulturních zvyklostí. Například výchozí uvítací zpráva se může v různých kulturách lišit.
Přístupnost: Zajistěte, aby výchozí hodnoty byly přístupné a srozumitelné pro uživatele s postižením. Poskytněte jasné a popisné štítky pro výchozí hodnoty v uživatelském rozhraní.
Časová pásma a data: Při práci s daty a časy používejte vhodná časová pásma a formáty data, abyste zajistili, že se výchozí hodnoty budou uživatelům v různých regionech zobrazovat správně.

Příklad: Lokalizace s operátorem Nullish Coalescing

Řekněme, že chcete zobrazit výchozí uvítací zprávu v různých jazycích na základě lokalizace uživatele. Můžete použít operátor nullish coalescing k poskytnutí výchozí zprávy, pokud lokalizovaná zpráva není k dispozici.

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

  const message = localizedMessages[locale] ?? "Welcome!"; // Výchozí je angličtina, pokud lokalizace není nalezena
  return message;
}

console.log(getWelcomeMessage("fr")); // Výstup: Bienvenue !
console.log(getWelcomeMessage("es")); // Výstup: Welcome! (Výchozí je angličtina)

Závěr

Operátor nullish coalescing (??) je cenným doplňkem jazyka JavaScript. Poskytuje přesnější a spolehlivější způsob přiřazování výchozích hodnot ve srovnání s operátorem OR (||), zejména při práci s hodnotami jako 0 nebo prázdné řetězce. Porozuměním jeho syntaxi, chování a případům použití můžete psát čistší a udržovatelnější kód, který přesně zpracovává přiřazování výchozích hodnot. Při používání operátoru nullish coalescing ve vašich projektech nezapomeňte zvážit kompatibilitu s prohlížeči, prioritu operátorů a globální aspekty.

Dodržováním osvědčených postupů uvedených v tomto průvodci můžete efektivně využít operátor nullish coalescing ke zlepšení kvality a spolehlivosti vašeho JavaScriptového kódu, čímž se stane robustnějším a srozumitelnějším. Nezapomeňte ve svém kódu vždy upřednostňovat přehlednost a udržovatelnost a operátor nullish coalescing může být mocným nástrojem k dosažení těchto cílů.