JavaScriptin Nullish Coalescing: Oletusarvojen asetus vs. Falsy-arvojen käsittely

JavaScript-kehittäjien täytyy usein asettaa oletusarvoja muuttujille, kun alkuperäinen arvo puuttuu tai on virheellinen. Perinteisesti tähän tarkoitukseen käytettiin loogista TAI-operaattoria (||). Kuitenkin ECMAScript 2020:ssa esitelty nullish coalescing -operaattori (??) tarjoaa tarkemman ja luotettavamman ratkaisun, erityisesti käsiteltäessä falsy-arvoja. Tämä kattava opas tutkii nullish coalescing -operaattorin vivahteita, vertaa sitä loogiseen TAI-operaattoriin ja esittelee sen sovelluksia eri skenaarioissa.

Nullish Coalescing (??) -operaattorin ymmärtäminen

Nullish coalescing -operaattori (??) palauttaa oikeanpuoleisen operandinsa, kun sen 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:

vasenOperandi ?? oikeaOperandi

Esimerkki:

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

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

const score = 0 ?? 100;
console.log(score); // Tuloste: 0

            

              
                Copy
              
            
          

Nullish Coalescing (??) ja Loogisen TAI-operaattorin (||) erot

Myös looginen TAI-operaattori (||) tarjoaa tavan asettaa oletusarvoja. Se kuitenkin käsittelee minkä tahansa falsy-arvon (false, 0, '', NaN, null, undefined) vastaavana kuin null tai undefined, mikä voi johtaa odottamattomaan toimintaan.

Loogisen TAI-operaattorin esimerkki:

            const quantity = 0 || 10;
console.log(quantity); // Tuloste: 10 (odottamatonta, koska 0 on falsy)

const message = '' || "No message";
console.log(message); // Tuloste: "No message" (odottamatonta, koska '' on falsy)

            

              
                Copy
              
            
          

Nullish Coalescing -esimerkki:

            const quantity = 0 ?? 10;
console.log(quantity); // Tuloste: 0 (oikein, koska 0 ei ole null tai undefined)

const message = '' ?? "No message";
console.log(message); // Tuloste: "" (oikein, koska '' ei ole null tai undefined)

            

              
                Copy
              
            
          

Kuten huomaat, nullish coalescing -operaattori aktivoituu vain, kun vasemmanpuoleinen operandi on nimenomaisesti null tai undefined, säilyttäen falsy-arvot kuten 0 ja ''.

Nullish Coalescing -operaattorin käyttötapaukset

Nullish coalescing on erityisen hyödyllinen tilanteissa, joissa on tarpeen erottaa puuttuva arvo (null tai undefined) ja validi falsy-arvo.

1. Konfiguraatioasetusten käsittely

Käsiteltäessä konfiguraatioasetuksia saatat haluta antaa oletusarvoja asetuksille, joita ei ole erikseen määritelty. Operaattorin ?? käyttö varmistaa, että validit falsy-arvot (esim. 0 aikakatkaisuarvona) eivät vahingossa korvaudu oletusarvolla.

            const config = {
  timeout: 0,
  maxRetries: null,
  apiEndpoint: undefined
};

const timeout = config.timeout ?? 5000; // Käytä 0, jos timeout on erikseen asetettu, muuten oletus on 5000
const maxRetries = config.maxRetries ?? 3; // Käytä 3, jos maxRetries on null tai undefined
const apiEndpoint = config.apiEndpoint ?? "https://example.com/api"; // Käytä oletus-endpointia, jos apiEndpoint on null tai undefined

console.log(`Timeout: ${timeout}, Max Retries: ${maxRetries}, API Endpoint: ${apiEndpoint}`);
// Tuloste: Timeout: 0, Max Retries: 3, API Endpoint: https://example.com/api

            

              
                Copy
              
            
          

2. API-vastausten käsittely

API-vastaukset sisältävät usein kenttiä, jotka saattavat puuttua tai joilla on nimenomaisesti asetettu falsy-arvoja. Nullish coalescing antaa sinun käsitellä näitä tilanteita sulavasti, varmistaen, että annat oletusarvoja vain, kun kenttä todella puuttuu.

Esimerkki: Yksinkertaistettu API-vastaus, joka edustaa käyttäjää:

            const user = {
  name: "Alice",
  age: 30,
  countryCode: null,
  acceptedTerms: false,
  profilePictureURL: undefined
};

const displayName = user.name ?? "Unknown User";
const userAge = user.age ?? "Age not available";
const country = user.countryCode ?? "US"; // Oletusarvo on US, jos null/undefined
const hasAcceptedTerms = user.acceptedTerms ?? true; // Oletusarvo on true, jos null/undefined
const profilePic = user.profilePictureURL ?? "/default-profile.png"; // Oletuskuva, jos null/undefined

console.log(`Name: ${displayName}`); // Tuloste: Name: Alice
console.log(`Age: ${userAge}`); // Tuloste: Age: 30
console.log(`Country: ${country}`); // Tuloste: Country: US
console.log(`Accepted Terms: ${hasAcceptedTerms}`); // Tuloste: Accepted Terms: false
console.log(`Profile Picture: ${profilePic}`); //Tuloste: Profile Picture: /default-profile.png

            

              
                Copy
              
            
          

Tässä esimerkissä oletusarvoksi asetetaan "US" vain, jos `countryCode` on nimenomaisesti null tai undefined. Jos API palauttaisi `countryCode: ""`, tyhjä merkkijono säilytettäisiin, mikä kuvastaisi käyttäjän todellista (vaikkakin mahdollisesti puuttuvaa) maakoodia.

3. Vara-arvojen tarjoaminen funktioissa

Kirjoitettaessa funktioita, jotka hyväksyvät valinnaisia parametreja, nullish coalescing -operaattoria voidaan käyttää oletusarvojen antamiseen puuttuville argumenteille.

            function greet(name, greeting) {
  const displayName = name ?? "Guest";
  const salutation = greeting ?? "Hello";
  return `${salutation}, ${displayName}!`;
}

console.log(greet("Bob", "Good morning")); // Tuloste: Good morning, Bob!
console.log(greet(null, undefined)); // Tuloste: Hello, Guest!
console.log(greet("", "")); // Tuloste: , !
console.log(greet("", null)); // Tuloste: Hello, !

            

              
                Copy
              
            
          

Tämä lähestymistapa varmistaa, että funktiolla on aina arvo, jonka kanssa työskennellä, vaikka kutsuja ei antaisi kaikkia argumentteja.

4. Kansainvälistäminen ja lokalisointi (i18n/l10n)

Työskenneltäessä kansainvälistettyjen sovellusten kanssa on usein eri käännöksiä eri merkkijonoille. Nullish coalescing -operaattoria voidaan käyttää oletuskäännöksen tarjoamiseen, jos tietty käännös puuttuu tietylle kielelle.

            const translations = {
  en: {
    greeting: "Hello",
    farewell: "Goodbye"
  },
  fr: {
    greeting: "Bonjour"
  }
};

function translate(key, language) {
  return translations[language]?.[key] ?? translations.en[key] ?? `Translation missing for key: ${key}`;
}

console.log(translate("greeting", "fr")); // Tuloste: Bonjour
console.log(translate("farewell", "fr")); // Tuloste: Translation missing for key: farewell
console.log(translate("greeting", "de")); // Tuloste: Hello (palaa englanninkieliseen)

            

              
                Copy
              
            
          

Tässä esimerkissä yritämme ensin löytää käännöksen määritetylle kielelle ja avaimelle. Jos se puuttuu, palaamme englanninkieliseen käännökseen. Jos jopa englanninkielinen käännös puuttuu, palautamme viestin, joka ilmoittaa käännöksen puuttumisesta.

5. Lomakkeiden käyttäjäsyötteiden käsittely

Käsiteltäessä lomakkeiden käyttäjäsyötteitä saatat kohdata tapauksia, joissa tietyt kentät on jätetty tyhjiksi tai ne sisältävät tyhjiä merkkijonoja. Nullish coalescing -operaattorin käyttö yhdessä valinnaisen ketjutuksen (optional chaining) operaattorin (?.) kanssa voi olla erittäin tehokasta käsiteltäessä syvälle sisäkkäistä käyttäjäsyötettä.

            const formData = {
  user: {
    name: "",
    address: {
      city: null,
      country: undefined
    }
  }
};

const userName = formData.user.name || "No Name Provided";
const safeUserName = formData?.user?.name ?? "No Name Provided";
const userCity = formData?.user?.address?.city ?? "City Unknown";
const userCountry = formData?.user?.address?.country ?? "Country Unknown";

console.log(userName); // No Name Provided (koska tyhjä merkkijono on falsy)
console.log(safeUserName); // "" (koska safeUserName tarkistaa nimenomaisesti null- tai undefined-arvon)
console.log(userCity); // City Unknown
console.log(userCountry); // Country Unknown

            

              
                Copy
              
            
          

Operaattorien suoritusjärjestys ja yhdistäminen muihin operaattoreihin

Nullish coalescing -operaattorilla on suhteellisen alhainen suoritusjärjestys. Tämä tarkoittaa, että sinun on usein käytettävä sulkeita varmistaaksesi, että se arvioidaan oikein, erityisesti kun sitä yhdistetään muihin operaattoreihin, kuten loogiseen JA- (&&) tai loogiseen TAI-operaattoriin (||).

Tärkeä huomautus: Et voi suoraan yhdistää ??-operaattoria &&- tai ||-operaattoreiden kanssa käyttämättä sulkeita. Tämä on tehty operaatioiden järjestyksen epäselvyyden välttämiseksi.

Oikea käyttö:

            const value = (someValue ?? 10) && true;
console.log(value); //Tuloste: true, jos someValue ei ole null tai undefined, muuten false

const result = (null ?? 5) + 10; // Tuloste: 15

            

              
                Copy
              
            
          

Virheellinen käyttö (aiheuttaa SyntaxError-virheen):

            // const value = someValue ?? 10 && true; // SyntaxError: Unexpected token '&&'

// const result = null ?? 5 + 10; // SyntaxError: Unexpected number

            

              
                Copy
              
            
          

Selainyhteensopivuus

Nullish coalescing -operaattori (??) on suhteellisen uusi lisäys JavaScriptiin. Varmista, että kohdeselaimesi tukevat sitä. Useimmat modernit selaimet tukevat sitä, mutta vanhemmat selaimet saattavat vaatia transpilaatiota käyttämällä työkaluja, kuten Babelia.

Voit tarkistaa selainyhteensopivuuden lähteistä, kuten MDN Web Docs.

Parhaat käytännöt Nullish Coalescing -operaattorin käyttöön

• Käytä sitä, kun sinun on erotettava puuttuvat arvot (null tai undefined) ja validit falsy-arvot.
• Käytä aina sulkeita, kun yhdistät ??-operaattorin &&- tai ||-operaattoreiden kanssa välttääksesi syntaksivirheet ja varmistaaksesi oikean arvioinnin.
• Ota huomioon selainyhteensopivuus ja harkitse transpilaatiota tarvittaessa.
• Dokumentoi ??-operaattorin käyttö selkeästi koodin luettavuuden parantamiseksi.
• Testaa koodisi perusteellisesti varmistaaksesi, että oletusarvot asetetaan oikein kaikissa tilanteissa.

Yhteenveto

Nullish coalescing -operaattori (??) on tehokas ja arvokas lisä JavaScript-kieleen. Se tarjoaa tarkemman ja luotettavamman tavan asettaa oletusarvoja verrattuna perinteiseen loogiseen TAI-operaattoriin (||), erityisesti käsiteltäessä falsy-arvoja. Ymmärtämällä sen vivahteet ja parhaat käytännöt voit kirjoittaa siistimpää, vankempaa ja helpommin ylläpidettävää JavaScript-koodia. Harkitse ??-operaattorin käyttöönottoa projekteissasi parantaaksesi oletusarvojen asettamisen selkeyttä ja tarkkuutta. Muista testata koodisi perusteellisesti eri selaimilla ja harkitse transpilaatiota vanhempia ympäristöjä varten.

Tämä opas tarjosi kattavan yleiskatsauksen. Kokeile ??-operaattoria eri yhteyksissä ymmärtääksesi täysin sen kyvyt ja rajoitukset, ja hienosäädä jatkuvasti ymmärrystäsi käytännön sovellusten kautta.