Operatore Nullish Coalescing in JavaScript

Nullish Coalescing: ??

L'operatore Nullish Coalescing ?? valuta il suo primo operando definito: se il suo operando sinistro non è null e non è undefined, restituisce quel valore. Altrimenti, restituisce il valore dell'operando destro. Come gli operatori && e ||, ?? è valutato in corto circuito: valuta il suo secondo operando solo se il primo operando valuta null o undefined. Se l'espressione a non ha effetti collaterali, allora l'espressione a ?? b è equivalente a:

(a !== null && a !== undefined) ? a : b

?? è un'alternativa utile a || quando vogliamo selezionare il primo operando definito piuttosto che il primo operando truthy. Sebbene || sia nominalmente un operatore OR logico, è anche usato idiomaticamente per selezionare il primo operando non-falsy con codice come questo:

// Se larghezzaMassima è truthy, usa quello. Altrimenti, cerca un valore nell'
// oggetto preferenze. Se quello non è truthy, usa una costante hardcoded.
let max = larghezzaMassima || preferenze.larghezzaMassima || 500;

Il problema con questo uso idiomatico è che zero, la stringa vuota, e false sono tutti valori falsy che possono essere perfettamente validi in alcune circostanze. In questo esempio di codice, se larghezzaMassima è zero, quel valore sarà ignorato. Ma se cambiamo l'operatore || con ??, finiamo con un'espressione dove zero è un valore valido:

// Se larghezzaMassima è definito, usa quello. Altrimenti, cerca un valore nell'
// oggetto preferenze. Se quello non è definito, usa una costante hardcoded.
let max = larghezzaMassima ?? preferenze.larghezzaMassima ?? 500;

Ecco altri esempi che mostrano come ?? funziona quando il primo operando è falsy. Se quell'operando è falsy ma definito, allora ?? lo restituisce. È solo quando il primo operando è "nullish" (cioè, null o undefined) che questo operatore valuta e restituisce il secondo operando:

let opzioni = { timeout: 0, titolo: "", verboso: false, n: null };
opzioni.timeout ?? 1000     // => 0: come definito nell'oggetto
opzioni.titolo ?? "Senza titolo" // => "": come definito nell'oggetto
opzioni.verboso ?? true     // => false: come definito nell'oggetto
opzioni.silenzioso ?? false      // => false: la proprietà non è definita
opzioni.n ?? 10             // => 10: la proprietà è null

Si noti che le espressioni timeout, titolo, e verboso qui avrebbero valori diversi se usassimo || invece di ??.

L'operatore ?? è simile agli operatori && e || ma non ha precedenza più alta o più bassa di loro. Se lo si usa in un'espressione con uno di quegli operatori, è necessario usare parentesi esplicite per specificare quale operazione si desidera eseguire per prima:

(a ?? b) || c   // ?? prima, poi ||
a ?? (b || c)   // || prima, poi ??
a ?? b || c     // SyntaxError: le parentesi sono richieste