Hoppa till huvudinnehåll

|| vs ??

· 2 min att läsa
Filip Tammergård
Filip Tammergård
Programmerare på Frilans Finans

|| och ?? är lika varandra, men det finns en väldigt viktig nyans. Titta på det här exemplet:

const a = "" || "default value"
// > "default value"

const b = "" ?? "default value"
// > ""

Låt mig förklara.

Logiska OR-operatorn​

Låt oss låtsas att du är den logiska OR-operatorn (||). Du ser ett värde till vänster och ett värde till höger. Du börjar med att titta på värdet till vänster. Om det värdet är truthy är det värdet du väljer. Om det vänstra värdet är falsy väljer du det andra värdet.

För att förstå din uppgift behöver du veta vad truthy och falsy värden är.

Truthy och falsy värden​

Här är alla falsy-värden i JavaScript:

  • siffran 0
  • bigint 0n
  • nyckelordet null
  • nyckelordet undefined
  • boolean false
  • siffran NaN
  • tom sträng "", '' eller ``

Alla andra värden är truthy.

Nullish coalescing-operatorn​

Låt oss nu låtsas att du är nullish coalescing-operatorn (??). Igen – du ser ett värde till vänster och ett till höger, och börjar med det vänstra. Den här gången gäller: om det vänstra värdet är nullish väljer du det andra värdet. Om det vänstra värdet inte är nullish är det värdet du väljer.

Det uppdraget kräver kunskap om nullish-värden.

Nullish-värden​

Här är alla nullish-värden i JavaScript:

  • nyckelordet null
  • nyckelordet undefined
anteckning

Som du ser är alla nullish-värden falsy, men inte alla falsy-värden är nullish.

Testa själv!​

Ett bra sätt att förankra kunskapen om skillnaden är att experimentera med den. I koden nedan finns variablerna leftValue och rightValue. Du kan välja vilket värde leftValue ska anta. Sedan ser du vad de två operatorerna ger som resultat.

const leftValue = 0
const rightValue = "This is a default value that could be anything."

leftValue || rightValue
// > This is a default value that could be anything.

leftValue ?? rightValue
// > 0

Nu vet du när du ska använda || och när du ska använda ??! 🎉

Slutsats​

  • Var medveten när du väljer mellan || och ?? – fel operator kan orsaka buggar.
  • Använd ?? när du bara vill ha ett reservvärde för nullish-värden (null och undefined).
  • Använd || när du vill ha ett reservvärde för alla falsy-värden.

Referenser​