JavaScript Nullish Coalescing: Kompleksowy przewodnik po przypisywaniu wartości domyślnych

W JavaScript przypisywanie wartości domyślnych jest częstym zadaniem. Tradycyjnie deweloperzy używali do tego celu operatora OR (||). Jednak operator nullish coalescing (??), wprowadzony w ECMAScript 2020, zapewnia bardziej precyzyjny i niezawodny sposób obsługi przypisywania wartości domyślnych, zwłaszcza w przypadku wartości null lub undefined. Ten przewodnik dogłębnie omawia operator nullish coalescing, badając jego składnię, zachowanie, różnice w stosunku do operatora OR oraz praktyczne przypadki użycia.

Czym jest Nullish Coalescing?

Operator nullish coalescing (??) to operator logiczny, który zwraca swój prawostronny operand, gdy jego lewostronny operand ma wartość null lub undefined. W przeciwnym razie zwraca swój lewostronny operand. Mówiąc prościej, dostarcza wartość domyślną tylko wtedy, gdy zmienna jest ściśle null lub undefined.

Składnia

Składnia operatora nullish coalescing jest prosta:

leftOperand ?? rightOperand

Tutaj leftOperand to zmienna lub wyrażenie, które chcesz sprawdzić pod kątem wartości null lub undefined, a rightOperand to domyślna wartość, którą chcesz przypisać, jeśli leftOperand rzeczywiście jest null lub undefined.

Przykład

Rozważ następujący przykład:

const username = null ?? "Guest";
console.log(username); // Wynik: Guest

const age = undefined ?? 25;
console.log(age); // Wynik: 25

const city = "London" ?? "Unknown";
console.log(city); // Wynik: London

W tym przykładzie zmiennej username przypisano domyślną wartość "Guest", ponieważ początkowo była null. Podobnie, zmiennej age przypisano 25, ponieważ na początku była undefined. Jednak city zachowuje swoją pierwotną wartość, "London", ponieważ nie jest ani null, ani undefined.

Wartości Nullish a Falsy

Kluczowe jest zrozumienie różnicy między wartościami nullish a falsy w JavaScript. Wartość nullish to albo null, albo undefined. Wartość falsy to wartość, która jest uważana za fałszywą w kontekście logicznym (Boolean). Do wartości falsy należą:

• null
• undefined
• 0 (zero)
• NaN (Not a Number)
• '' (pusty ciąg znaków)
• false

Kluczowa różnica polega na tym, że operator nullish coalescing sprawdza tylko null lub undefined, podczas gdy operator OR (||) sprawdza dowolną wartość falsy.

Różnica między ?? a ||

Operator OR (||) to logiczny operator OR, który zwraca prawostronny operand, jeśli lewostronny operand jest fałszywy. Chociaż może być używany do przypisywania wartości domyślnych, może prowadzić do nieoczekiwanego zachowania w przypadku wartości takich jak 0 lub pusty ciąg znaków.

Przykład: Pułapki operatora ||

const quantity = 0 || 10; // Chcemy domyślnie ustawić 10, jeśli brakuje quantity
console.log(quantity); // Wynik: 10 (Niespodziewany!) ponieważ 0 jest wartością fałszywą

const text = '' || 'Default Text'; // Chcemy domyślny tekst, jeśli brakuje text
console.log(text); // Wynik: Default Text (Niespodziewany!) ponieważ '' jest wartością fałszywą

W pierwszym przykładzie zamierzaliśmy przypisać domyślną ilość 10 tylko wtedy, gdy brakowało quantity (była null lub undefined). Jednakże, ponieważ 0 jest wartością fałszywą, operator OR niepoprawnie przypisał wartość domyślną. Podobnie, pusty ciąg znaków powoduje wyświetlenie domyślnego tekstu, nawet jeśli ciąg istnieje (ale jest pusty).

Używanie ?? dla precyzji

Przepiszmy poprzedni przykład, używając operatora nullish coalescing:

const quantity = 0 ?? 10;
console.log(quantity); // Wynik: 0 (Prawidłowo!)

const text = '' ?? 'Default Text';
console.log(text); // Wynik: '' (Prawidłowo!)

Teraz wynik jest zgodny z oczekiwaniami. Operator nullish coalescing sprawdza tylko null lub undefined, więc 0 i '' są traktowane jako prawidłowe wartości, a ich pierwotne wartości są zachowywane.

Przypadki użycia Nullish Coalescing

Operator nullish coalescing jest przydatny w różnych scenariuszach, w których trzeba podać wartości domyślne tylko wtedy, gdy zmienna jest ściśle null lub undefined. Oto kilka typowych przypadków użycia:

1. Obsługa opcjonalnych parametrów funkcji

Podczas definiowania funkcji z opcjonalnymi parametrami można użyć operatora nullish coalescing, aby zapewnić wartości domyślne, jeśli parametry nie zostaną podane.

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

greet(); // Wynik: Hello, User!
greet("Alice"); // Wynik: Hello, Alice!
greet("Bob", "Greetings"); // Wynik: Greetings, Bob!

2. Ustawianie domyślnych opcji konfiguracyjnych

Pracując z obiektami konfiguracyjnymi, można użyć operatora nullish coalescing, aby upewnić się, że wartości domyślne są używane, jeśli określone opcje konfiguracyjne nie zostaną podane.

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

function fetchData(options) {
  const timeout = options.timeout ?? 10000; // Domyślny limit czasu 10 sekund
  const retries = options.retries ?? 5; // Domyślnie 5 prób
  console.log(`Timeout: ${timeout}, Retries: ${retries}`);
}

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

3. Dostęp do zagnieżdżonych właściwości obiektu

Podczas uzyskiwania dostępu do właściwości zagnieżdżonych obiektów, operator nullish coalescing można połączyć z opcjonalnym łańcuchowaniem (?.), aby zapewnić wartości domyślne, jeśli którakolwiek z pośrednich właściwości ma wartość null lub undefined.

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

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

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

4. Praca z API i danymi zewnętrznymi

Podczas pobierania danych z API lub źródeł zewnętrznych, operator nullish coalescing może być użyty do dostarczenia wartości domyślnych, jeśli brakuje pewnych pól danych lub mają one wartości null lub undefined. Rozważmy pobieranie danych użytkownika z różnych regionów. Załóżmy, że niektóre regiony mogą nie zawierać pola `country` w danych użytkownika.

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);
  }
}

// Symulowanie różnych odpowiedzi API:
const userWithCountry = { name: "John", country: "USA", timezone: "EST" };
const userWithoutCountry = { name: "Jane", timezone: "GMT" };

// Aby to przetestować, potrzebujesz prawdziwego API lub mock fetch.
// W celach demonstracyjnych zasymulujmy odpowiedzi:
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); // Wynik: User is from: USA, Timezone: EST
getUserData(456); // Wynik: User is from: Unknown Country, Timezone: GMT

Pierwszeństwo operatorów

Operator nullish coalescing ma stosunkowo niskie pierwszeństwo. Jest ono niższe niż operatorów OR (||) i AND (&&). Dlatego przy łączeniu operatora nullish coalescing z innymi operatorami logicznymi, kluczowe jest użycie nawiasów, aby jawnie zdefiniować kolejność operacji. Niezastosowanie się do tego może skutkować błędami składni lub nieoczekiwanym zachowaniem.

Przykład: Użycie nawiasów dla przejrzystości

// Bez nawiasów (SyntaxError)
// const result = false || null ?? "Default"; // SyntaxError: Unexpected token '??'

// Z nawiasami (Prawidłowo)
const result = false || (null ?? "Default");
console.log(result); // Wynik: Default

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

W pierwszym przykładzie brak nawiasów skutkuje błędem SyntaxError, ponieważ silnik JavaScript nie może określić zamierzonej kolejności operacji. Dodając nawiasy, jawnie informujemy silnik, aby najpierw ocenił operator nullish coalescing. Drugi przykład jest prawidłowy; jednak wynik jest inny, ponieważ najpierw oceniane jest wyrażenie ||.

Kompatybilność z przeglądarkami

Operator nullish coalescing (??) jest stosunkowo nową funkcją, dlatego kluczowe jest uwzględnienie kompatybilności z przeglądarkami, zwłaszcza jeśli celujesz w starsze przeglądarki. Większość nowoczesnych przeglądarek obsługuje operator nullish coalescing, w tym:

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

Jeśli musisz wspierać starsze przeglądarki, możesz użyć transpilera, takiego jak Babel, aby przekonwertować swój kod na kompatybilną wersję JavaScript. Babel przekształci operator ?? na równoważny kod JavaScript, który działa w starszych środowiskach.

Dobre praktyki

Oto kilka dobrych praktyk efektywnego używania operatora nullish coalescing:

• Używaj ?? do sprawdzania wartości nullish: Używaj operatora nullish coalescing (??), gdy chcesz podać wartość domyślną tylko wtedy, gdy zmienna ma wartość null lub undefined.
• Używaj nawiasów w złożonych wyrażeniach: Łącząc operator nullish coalescing z innymi operatorami logicznymi, używaj nawiasów, aby jasno zdefiniować kolejność operacji.
• Uwzględnij kompatybilność z przeglądarkami: Sprawdź kompatybilność z przeglądarkami i w razie potrzeby użyj transpilera, aby wspierać starsze wersje.
• Stosuj konsekwentnie: Przyjmij użycie ?? tam, gdzie jest to właściwe, dla bardziej przewidywalnego stylu kodowania w całym projekcie.
• Łącz z opcjonalnym łańcuchowaniem: Używaj ?? w połączeniu z opcjonalnym łańcuchowaniem ?., aby bezpiecznie uzyskiwać dostęp i przypisywać wartości domyślne do zagnieżdżonych właściwości obiektów.

Rozważania globalne

Podczas tworzenia oprogramowania dla globalnej publiczności, weź pod uwagę następujące punkty związane z przypisywaniem wartości domyślnych:

• Lokalizacja: Wartości domyślne mogą wymagać lokalizacji w zależności od języka lub regionu użytkownika. Na przykład domyślny symbol waluty lub format daty.
• Normy kulturowe: Niektóre wartości domyślne mogą wymagać dostosowania w oparciu o normy kulturowe. Na przykład domyślny komunikat powitalny może wymagać zmiany w różnych kulturach.
• Dostępność: Upewnij się, że wartości domyślne są dostępne i zrozumiałe dla użytkowników z niepełnosprawnościami. Zapewnij jasne i opisowe etykiety dla wartości domyślnych w interfejsach użytkownika.
• Strefy czasowe i daty: Pracując z datami i godzinami, używaj odpowiednich stref czasowych i formatów dat, aby zapewnić poprawne wyświetlanie wartości domyślnych użytkownikom w różnych regionach.

Przykład: Lokalizacja z Nullish Coalescing

Załóżmy, że chcesz wyświetlić domyślny komunikat powitalny w różnych językach, w zależności od lokalizacji użytkownika. Możesz użyć operatora nullish coalescing, aby podać domyślny komunikat, jeśli zlokalizowany komunikat nie jest dostępny.

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

  const message = localizedMessages[locale] ?? "Welcome!"; // Domyślnie angielski, jeśli lokalizacja nie zostanie znaleziona
  return message;
}

console.log(getWelcomeMessage("fr")); // Wynik: Bienvenue !
console.log(getWelcomeMessage("es")); // Wynik: Welcome! (Domyślnie angielski)

Podsumowanie

Operator nullish coalescing (??) jest cennym dodatkiem do języka JavaScript. Zapewnia bardziej precyzyjny i niezawodny sposób przypisywania wartości domyślnych w porównaniu z operatorem OR (||), zwłaszcza w przypadku wartości takich jak 0 czy puste ciągi znaków. Rozumiejąc jego składnię, zachowanie i przypadki użycia, możesz pisać czystszy, łatwiejszy w utrzymaniu kod, który dokładnie obsługuje przypisywanie wartości domyślnych. Pamiętaj, aby uwzględnić kompatybilność z przeglądarkami, pierwszeństwo operatorów oraz globalne rozważania podczas używania operatora nullish coalescing w swoich projektach.

Postępując zgodnie z dobrymi praktykami przedstawionymi w tym przewodniku, możesz skutecznie wykorzystać operator nullish coalescing, aby poprawić jakość i niezawodność swojego kodu JavaScript, czyniąc go bardziej solidnym i łatwiejszym do zrozumienia. Pamiętaj, aby zawsze priorytetowo traktować przejrzystość i łatwość utrzymania kodu, a operator nullish coalescing może być potężnym narzędziem w osiąganiu tych celów.