JavaScriptin Nullish Coalescing: Kattava opas oletusarvojen määrittelyyn

JavaScriptissa oletusarvojen määrittäminen on yleinen tehtävä. Perinteisesti kehittäjät ovat käyttäneet tähän tarkoitukseen TAI-operaattoria (||). Kuitenkin ECMAScript 2020:ssa esitelty nullish coalescing -operaattori (??) tarjoaa tarkemman ja luotettavamman tavan käsitellä oletusarvojen määrittelyä, erityisesti kun kyseessä ovat null- tai undefined-arvot. Tämä opas syventyy nullish coalescing -operaattoriin, tutkien sen syntaksia, toimintaa, eroja TAI-operaattoriin sekä käytännön käyttötapauksia.

Mitä on Nullish Coalescing?

Nullish coalescing -operaattori (??) on looginen operaattori, joka palauttaa oikeanpuoleisen operandinsa, kun vasemmanpuoleinen operandi on null tai undefined. Muussa tapauksessa se palauttaa vasemmanpuoleisen operandinsa. Yksinkertaisemmin sanottuna se antaa oletusarvon vain, kun muuttuja on nimenomaisesti null tai undefined.

Syntaksi

Nullish coalescing -operaattorin syntaksi on suoraviivainen:

vasenOperandi ?? oikeaOperandi

Tässä vasenOperandi on muuttuja tai lauseke, jonka haluat tarkistaa null- tai undefined-arvon varalta, ja oikeaOperandi on oletusarvo, jonka haluat antaa, jos vasenOperandi on todellakin null tai undefined.

Esimerkki

Tarkastellaan seuraavaa esimerkkiä:

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

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

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

Tässä esimerkissä username saa oletusarvon "Guest", koska se on alun perin null. Samoin age saa arvon 25, koska se on aluksi undefined. Kuitenkin city säilyttää alkuperäisen arvonsa "London", koska se ei ole null eikä undefined.

Nullish- vs. Falsy-arvot

On tärkeää ymmärtää ero nullish- ja falsy-arvojen välillä JavaScriptissa. Nullish-arvo on joko null tai undefined. Falsy-arvo on arvo, jota pidetään epätotena (false) boolean-kontekstissa. Falsy-arvoja ovat:

• null
• undefined
• 0 (nolla)
• NaN (Not a Number)
• '' (tyhjä merkkijono)
• false

Keskeinen ero on, että nullish coalescing -operaattori tarkistaa vain null- tai undefined-arvot, kun taas TAI-operaattori (||) tarkistaa minkä tahansa falsy-arvon.

Ero ??- ja ||-operaattoreiden välillä

TAI-operaattori (||) on looginen TAI-operaattori, joka palauttaa oikeanpuoleisen operandin, jos vasemmanpuoleinen operandi on falsy. Vaikka sitä voidaan käyttää oletusarvojen määrittämiseen, se voi johtaa odottamattomaan käytökseen käsiteltäessä arvoja kuten 0 tai tyhjä merkkijono.

Esimerkki: ||-operaattorin sudenkuopat

const quantity = 0 || 10; // Tarkoitus on antaa oletusarvo 10, jos quantity puuttuu
console.log(quantity); // Tuloste: 10 (Odottamaton!), koska 0 on falsy

const text = '' || 'Default Text'; // Tarkoitus on antaa oletusteksti, jos text puuttuu
console.log(text); // Tuloste: Default Text (Odottamaton!), koska '' on falsy

Ensimmäisessä esimerkissä tarkoituksemme oli antaa oletusmäärä 10 vain, jos quantity puuttui (oli null tai undefined). Koska 0 on kuitenkin falsy-arvo, TAI-operaattori antoi virheellisesti oletusarvon. Samoin tyhjä merkkijono saa oletustekstin näkymään, vaikka merkkijono olisi olemassa (mutta tyhjä).

??-operaattorin käyttö tarkkuuden saavuttamiseksi

Kirjoitetaan edellinen esimerkki uudelleen käyttämällä nullish coalescing -operaattoria:

const quantity = 0 ?? 10;
console.log(quantity); // Tuloste: 0 (Oikein!)

const text = '' ?? 'Default Text';
console.log(text); // Tuloste: '' (Oikein!)

Nyt tuloste on odotusten mukainen. Nullish coalescing -operaattori tarkistaa vain null- tai undefined-arvot, joten 0 ja '' käsitellään kelvollisina arvoina, ja niiden alkuperäiset arvot säilytetään.

Nullish Coalescing -operaattorin käyttötapauksia

Nullish coalescing -operaattori on hyödyllinen monissa tilanteissa, joissa sinun on annettava oletusarvoja vain, kun muuttuja on nimenomaisesti null tai undefined. Tässä on joitakin yleisiä käyttötapauksia:

1. Valinnaisten funktiomuuttujien käsittely

Kun määrität funktion, jolla on valinnaisia parametreja, voit käyttää nullish coalescing -operaattoria antaaksesi oletusarvoja, jos parametreja ei ole annettu.

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

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

2. Oletusasetusten asettaminen

Kun työskentelet konfiguraatio-olioiden kanssa, voit käyttää nullish coalescing -operaattoria varmistaaksesi, että oletusarvoja käytetään, jos tiettyjä konfiguraatioasetuksia ei ole määritetty.

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

function fetchData(options) {
  const timeout = options.timeout ?? 10000; // Oletusaikakatkaisu 10 sekuntia
  const retries = options.retries ?? 5; // Oletuksena 5 uudelleenyritystä
  console.log(`Timeout: ${timeout}, Retries: ${retries}`);
}

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

3. Sisäkkäisten olion ominaisuuksien käyttäminen

Kun käytetään sisäkkäisten olioiden ominaisuuksia, nullish coalescing -operaattori voidaan yhdistää valinnaiseen ketjutukseen (?.) oletusarvojen antamiseksi, jos jokin väliominaisuuksista on null tai undefined.

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

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

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

4. API:en ja ulkoisen datan kanssa työskentely

Kun haetaan dataa API:sta tai ulkoisista lähteistä, nullish coalescing -operaattoria voidaan käyttää oletusarvojen antamiseen, jos tietyt datakentät puuttuvat tai niiden arvot ovat null tai undefined. Oletetaan, että haetaan käyttäjätietoja eri alueilta. Oletetaan, että jotkut alueet eivät välttämättä sisällytä `country`-kenttää käyttäjätietoihinsa.

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

// Simuloidaan erilaisia API-vastauksia:
const userWithCountry = { name: "John", country: "USA", timezone: "EST" };
const userWithoutCountry = { name: "Jane", timezone: "GMT" };

// Tämän testaamiseksi tarvitsisit oikean API:n tai mock-fetchin.
// Demonstraatiotarkoituksessa simuloimme vastaukset:
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); // Tuloste: User is from: USA, Timezone: EST
getUserData(456); // Tuloste: User is from: Unknown Country, Timezone: GMT

Operaattorien suoritusjärjestys

Nullish coalescing -operaattorilla on suhteellisen alhainen suoritusjärjestys. Se on alhaisempi kuin TAI- (||) ja JA- (&&) operaattoreilla. Siksi, kun nullish coalescing -operaattoria yhdistetään muihin loogisiin operaattoreihin, on olennaista käyttää sulkeita operaatioiden järjestyksen nimenomaiseen määrittämiseen. Tämän laiminlyönti voi johtaa syntaksivirheisiin tai odottamattomaan käytökseen.

Esimerkki: Sulkeiden käyttö selkeyden vuoksi

// Ilman sulkeita (SyntaxError)
// const result = false || null ?? "Default"; // SyntaxError: Unexpected token '??'

// Sulkeiden kanssa (Oikein)
const result = false || (null ?? "Default");
console.log(result); // Tuloste: Default

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

Ensimmäisessä esimerkissä sulkeiden puute johtaa SyntaxError-virheeseen, koska JavaScript-moottori ei pysty määrittämään tarkoitettua operaatioiden järjestystä. Lisäämällä sulkeet kerromme moottorille nimenomaisesti, että nullish coalescing -operaattori arvioidaan ensin. Toinen esimerkki on kelvollinen; tuloste on kuitenkin erilainen, koska ||-lauseke arvioidaan ensin.

Selainyhteensopivuus

Nullish coalescing -operaattori (??) on suhteellisen uusi ominaisuus, joten on tärkeää ottaa huomioon selainyhteensopivuus, erityisesti jos kohdistat vanhempiin selaimiin. Useimmat modernit selaimet tukevat nullish coalescing -operaattoria, mukaan lukien:

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

Jos sinun on tuettava vanhempia selaimia, voit käyttää transpilaattoria, kuten Babelia, muuntaaksesi koodisi yhteensopivaan JavaScript-versioon. Babel muuntaa ??-operaattorin vastaavaksi JavaScript-koodiksi, joka toimii vanhemmissa ympäristöissä.

Parhaat käytännöt

Tässä on joitakin parhaita käytäntöjä nullish coalescing -operaattorin tehokkaaseen käyttöön:

• Käytä ?? nullish-tarkistuksiin: Käytä nullish coalescing -operaattoria (??), kun haluat erityisesti antaa oletusarvon vain, kun muuttuja on null tai undefined.
• Käytä sulkeita monimutkaisissa lausekkeissa: Kun yhdistät nullish coalescing -operaattorin muihin loogisiin operaattoreihin, käytä sulkeita määritelläksesi selkeästi operaatioiden järjestyksen.
• Harkitse selainyhteensopivuutta: Tarkista selainyhteensopivuus ja käytä tarvittaessa transpilaattoria vanhempien selainten tukemiseksi.
• Käytä johdonmukaisesti: Ota ?? käyttöön soveltuvissa kohdissa ennustettavamman koodaustyylin saavuttamiseksi koko projektissa.
• Yhdistä valinnaiseen ketjutukseen: Käytä ?? yhdessä valinnaisen ketjutuksen ?. kanssa turvallisesti päästäksesi käsiksi ja määrittääksesi oletusarvoja sisäkkäisille olion ominaisuuksille.

Globaalit huomioon otettavat seikat

Kun kehität globaalille yleisölle, ota huomioon seuraavat seikat liittyen oletusarvojen määrittelyyn:

• Lokalisaatio: Oletusarvot saattavat vaatia lokalisointia käyttäjän kielen tai alueen perusteella. Esimerkiksi oletusvaluuttasymboli tai päivämäärän muoto.
• Kulttuuriset normit: Tiettyjä oletusarvoja saatetaan joutua mukauttamaan kulttuuristen normien perusteella. Esimerkiksi oletustervehdysviesti voi olla erilainen eri kulttuureissa.
• Saavutettavuus: Varmista, että oletusarvot ovat saavutettavia ja ymmärrettäviä vammaisille käyttäjille. Tarjoa selkeät ja kuvailevat etiketit oletusarvoille käyttöliittymissä.
• Aikavyöhykkeet ja päivämäärät: Kun työskentelet päivämäärien ja aikojen kanssa, käytä asianmukaisia aikavyöhykkeitä ja päivämäärämuotoja varmistaaksesi, että oletusarvot näytetään oikein käyttäjille eri alueilla.

Esimerkki: Lokalisaatio Nullish Coalescing -operaattorilla

Oletetaan, että haluat näyttää oletustervetuloviestin eri kielillä käyttäjän paikallisasetusten perusteella. Voit käyttää nullish coalescing -operaattoria antaaksesi oletusviestin, jos lokalisoitua viestiä ei ole saatavilla.

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

  const message = localizedMessages[locale] ?? "Welcome!"; // Oletuksena englanti, jos kieliversiota ei löydy
  return message;
}

console.log(getWelcomeMessage("fr")); // Tuloste: Bienvenue !
console.log(getWelcomeMessage("es")); // Tuloste: Welcome! (Oletuksena englanti)

Yhteenveto

Nullish coalescing -operaattori (??) on arvokas lisä JavaScript-kieleen. Se tarjoaa tarkemman ja luotettavamman tavan määrittää oletusarvoja verrattuna TAI-operaattoriin (||), erityisesti käsiteltäessä arvoja kuten 0 tai tyhjiä merkkijonoja. Ymmärtämällä sen syntaksin, toiminnan ja käyttötapaukset voit kirjoittaa puhtaampaa, ylläpidettävämpää koodia, joka käsittelee oletusarvojen määrittelyt oikein. Muista ottaa huomioon selainyhteensopivuus, operaattorien suoritusjärjestys ja globaalit seikat käyttäessäsi nullish coalescing -operaattoria projekteissasi.

Noudattamalla tässä oppaassa esitettyjä parhaita käytäntöjä voit tehokkaasti hyödyntää nullish coalescing -operaattoria parantaaksesi JavaScript-koodisi laatua ja luotettavuutta, tehden siitä vankemman ja helpommin ymmärrettävän. Muista aina asettaa selkeys ja ylläpidettävyys etusijalle koodissasi, ja nullish coalescing -operaattori voi olla voimakas työkalu näiden tavoitteiden saavuttamisessa.