TypeScript Academy · Oppitunti

Nullish coalescing ??-operaattorilla

Tarjotkaa varavaihtoehtoja vain null- ja undefined-arvoille, ei kaikille epätosiarvoille.

Oppitunti 2/413 vaihetta

Nullish coalescing ??-operaattorilla on ilmainen TypeScript Academy-oppitunti CoddyKitissä. Tämä on oppitunti 2/4. Voit lukea koko oppitunnin alta ilmaiseksi ja harjoitella sen jälkeen käytännössä selaimessa sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla. Oppitunti kuuluu TypeScript Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. TypeScript Academy-kurssilla on yhteensä 4 oppituntia.

Nullish-yhdistämisoperaattori

??-operaattori palauttaa oikean puolen arvon vain, kun vasemman puolen arvo on null tai undefined. Muussa tapauksessa se palauttaa vasemman puolen arvon. Se on täsmällinen tapa antaa oletusarvoja.

const name: string | null = null;
const display = name ?? 'Guest';
console.log(display); // 'Guest'

Vain nullish käynnistää varaarvon

Avainsana on nullish: vain null ja undefined saavat oikean puolen arvon käyttöön. Kaikki muut arvot — myös falsy-arvot — välitetään muuttamattomina.

console.log(0 ?? 99);       // 0
console.log('' ?? 'x');     // ''
console.log(false ?? true); // false
console.log(null ?? 'def'); // 'def'

||-operaattorin ongelma

Looginen OR-operaattori || käyttää varaarvoa minkä tahansa falsy-arvon kohdalla: arvot 0, '', false ja NaN sekä nullish-arvot käynnistävät sen. Tämä aiheuttaa usein virheitä, kun 0 tai tyhjä merkkijono ovat kelvollisia syötteitä.

const count = 0;
console.log(count || 10); // 10 — wrong! 0 is a valid count
console.log(count ?? 10); // 0  — correct

Oletusarvot oikein

Käyttäkää ??-operaattoria, kun nolla, tyhjä merkkijono tai false ovat kelvollisia arvoja, jotka haluatte säilyttää. Käyttäkää ||-operaattoria vain silloin, kun minkä tahansa falsy-arvon todella kuuluukin johtaa varaarvoon.

function volume(v: number | undefined): number {
  return v ?? 50; // 0 stays 0, undefined becomes 50
}
console.log(volume(0), volume(undefined));

?? funktioiden parametrien kanssa

Yleinen käyttötapa on antaa oletusarvo valinnaiselle parametrille, kun sille välitetään undefined, ja säilyttää samalla merkitykselliset falsy-syötteet.

function greet(name?: string): string {
  return 'Hello, ' + (name ?? 'friend');
}
console.log(greet('Ada'), greet());

??-operaattorin tulostyyppi

Lausekkeen a ?? b tyyppi poistaa null | undefined -arvot arvon a tyypistä ja yhdistää siihen arvon b tyypin. Jos a on string | null ja b on string, tulos on string.

const maybe: string | null = null;
const sure: string = maybe ?? 'default';
console.log(sure.toUpperCase());

Oletusarvojen ketjuttaminen

Voitte ketjuttaa ??-operaattoreita kokeillaksenne useita lähteitä järjestyksessä ja siirtyäksenne seuraavaan, kun arvo on nullish. Ensimmäinen arvo, joka ei ole null eikä undefined, voittaa.

const fromEnv: string | undefined = undefined;
const fromConfig: string | null = null;
const value = fromEnv ?? fromConfig ?? 'hardcoded';
console.log(value);

?? ja operaattorien etusijajärjestys

Ette voi yhdistää ??-operaattoria ||- tai &&-operaattoriin ilman sulkeita — TypeScript edellyttää niitä epäselvyyksien välttämiseksi. Ryhmitelkää lausekkeet aina eksplisiittisesti.

const a: number | null = null;
const b = true;
// const x = a ?? 5 || 10; // Error without parens
const x = (a ?? 5) || 10;
console.log(x);

Nollan erottaminen puuttuvasta arvosta

Yleinen käytännön tarve on erottaa toisistaan kelvollinen lämpötila, pistemäärä tai saldo 0 ja arvo undefined, joka tarkoittaa ”ei annettu”. ?? säilyttää tämän eron, kun taas || sekoittaa arvot keskenään.

function format(temp: number | undefined): string {
  return (temp ?? 'N/A') + ' degrees';
}
console.log(format(0), format(undefined));

?? olioiden ominaisuuksien kanssa

Valinnaisen ominaisuuden lukeminen ja oletusarvon antaminen on ??-operaattorin jokapäiväinen käyttötapa. Se sopii luontevasti yhteen valinnaisen ketjutuksen kanssa, jonka yhdistätte seuraavalla oppitunnilla.

type Opts = { retries?: number };
function run(o: Opts): number {
  return o.retries ?? 3;
}
console.log(run({ retries: 0 }), run({}));

Milloin kumpaakin valitaan

Päätössääntö: jos 0, '' tai false ovat kelvollisia arvoja, jotka on säilytettävä, käyttäkää ??-operaattoria. Jos todella haluatte korvata minkä tahansa falsy-arvon, käyttäkää ||-operaattoria. Oletusarvoihin liittyvät virheet johtuvat lähes aina siitä, että ||-operaattoria käytetään tottumuksesta.

const username = '';
console.log(username || 'anon'); // 'anon' — empty replaced
console.log(username ?? 'anon'); // '' — empty kept

Pikatarkistus

Testatkaa, kuinka hyvin hallitsette nullish-yhdistämisen.

Vastaa interaktiivisessa oppitunnissa

Kertaus: nullish-yhdistäminen

Opitte, että ??:

Palauttaa oletusarvon vain, kun vasen puoli on null tai undefined.
Säilyttää kelvolliset falsy-arvot, kuten 0, '' ja false — toisin kuin ||.
Poistaa null | undefined tulostyypistä.
Vaatii sulkeet, kun sitä käytetään yhdessä operaattorin || tai && kanssa.

Seuraavaksi yhdistämme ?.- ja ??-operaattorit.

function port(v: number | undefined): number {
  return v ?? 8080;
}
console.log(port(0), port(undefined));

Aloita maksutta

Opi TypeScript tekoälytuutorin avulla — ilmaiseksi

Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.

Kurssit: 101
Oppitunnit: 352

Aloita opiskelu maksutta Näytä koko kurssi

Usein kysytyt kysymykset

Onko oppitunti ”Nullish coalescing ??-operaattorilla” ilmainen?

Kyllä – oppitunnin ”Nullish coalescing ??-operaattorilla” koko tekstin voi lukea täällä verkossa ilmaiseksi. Jos haluat harjoitella interaktiivisesti sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla sekä avata koko TypeScript Academy-kurssin, päivitä CoddyKit PROhon. TypeScript Academy-kurssilla on yhteensä 4 oppituntia.

Mitä opin oppitunnilla ”Nullish coalescing ??-operaattorilla”?

Tarjotkaa varavaihtoehtoja vain null- ja undefined-arvoille, ei kaikille epätosiarvoille. Harjoittelet TypeScript Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.

Tarvitsenko kokemusta aloittaakseni TypeScript Academy-opiskelun?

Aiempi kokemus ei ole tarpeen. CoddyKitin TypeScript Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 2/4.

Kuinka kauan ”Nullish coalescing ??-operaattorilla”-oppitunnin suorittaminen kestää?

Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.

Voinko kirjoittaa ja suorittaa koodia tällä TypeScript Academy-oppitunnilla?

Kyllä. Jokainen TypeScript Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.

Kaikki tämän kurssin oppitunnit

← Takaisin: TypeScript Academy