Operatore ?? in JavaScript: valori predefiniti fatti bene

Un valore predefinito più intelligente

JavaScript ha sempre avuto una scorciatoia per i valori predefiniti: value || fallback. Funziona quasi sempre, ma ha un difetto di fabbrica: considera "mancante" qualsiasi valore falsy. 0, '' e false fanno scattare tutti il ripiego, anche quando sono la risposta giusta.

L'operatore di nullish coalescing ?? risolve proprio questo. Ricorre al ripiego solo con null o undefined:

const a = 0 ?? 10;
const b = '' ?? 'empty';
const c = null ?? 'default';
const d = undefined ?? 'default';

console.log(a, b, c, d);

0 e '' sopravvivono. null e undefined no. Ecco tutto l'operatore.

Perché || non basta

Ecco il bug classico che ?? è nato per evitare:

function createUser(options) {
  const volume = options.volume || 100;
  const nickname = options.nickname || 'Anonymous';
  return { volume, nickname };
}

console.log(createUser({ volume: 0, nickname: '' }));

L'utente ha chiesto volume 0 (silenzio) e un nickname vuoto. Entrambi i valori sono stati sovrascritti senza avviso, perché || non distingue tra "mancante" e "falsy".

Passa a ??:

function createUser(options) {
  const volume = options.volume ?? 100;
  const nickname = options.nickname ?? 'Anonymous';
  return { volume, nickname };
}

console.log(createUser({ volume: 0, nickname: '' }));
console.log(createUser({}));

Ora 0 e '' passano intatti, e solo i campi che mancano davvero ricevono il valore predefinito. È quasi sempre quello che vuoi.

Il modello mentale

?? si pone una sola domanda: il lato sinistro è null o undefined? Nient'altro conta.

Scegli ?? quando i tuoi dati contengono valori falsy con un significato. Scegli || quando vuoi davvero scartare tutto ciò che è falsy (stringhe vuote, contatori a zero e così via): quel caso esiste, ma è più raro di quanto si pensi.

Valutazione in cortocircuito

Come || e &&, anche ?? valuta in cortocircuito. Se il lato sinistro non è nullish, il lato destro non viene nemmeno eseguito:

function expensiveDefault() {
  console.log('computing default...');
  return 'fallback';
}

const a = 'real value' ?? expensiveDefault();
const b = null ?? expensiveDefault();

console.log(a);
console.log(b);

expensiveDefault() viene eseguita una sola volta, per b. È utile quando il ripiego è una chiamata di funzione, una richiesta di rete o qualsiasi altra cosa che preferisci saltare quando non serve.

In coppia con l'optional chaining

?? e ?. sono stati introdotti insieme in ES2020 e sono pensati per lavorare in squadra. L'optional chaining percorre un cammino che potrebbe mancare e restituisce undefined se un passaggio non c'è; il nullish coalescing poi inserisce un valore predefinito sensato:

const response = {
  user: {
    profile: null,
  },
};

const theme = response?.user?.profile?.theme ?? 'light';
const tags = response?.user?.posts?.[0]?.tags ?? [];

console.log(theme);
console.log(tags);

Senza questa coppia, lo stesso codice diventa una brutta catena di controlli && o un try/catch. Con loro, accesso sicuro e valori predefiniti sensati stanno in una riga.

Assegnazione nullish: ??=

a ??= b assegna b ad a solo quando a è null o undefined. È l'operatore di assegnazione logica nullish e valuta in cortocircuito: se a ha già un valore, il lato destro non viene valutato.

function withDefaults(options) {
  options.retries ??= 3;
  options.timeout ??= 5000;
  options.verbose ??= false;
  return options;
}

console.log(withDefaults({ timeout: 10000 }));
console.log(withDefaults({ verbose: false, retries: 0 }));

Nota che verbose: false e retries: 0 vengono conservati: ??= riempie solo ciò che manca davvero. Confrontalo con ||=, che li sovrascriverebbe entrambi.

Precedenza e la regola delle parentesi

?? si rifiuta di proposito di mescolarsi con || o && senza parentesi. Questo lancia un SyntaxError:

const x = a || b ?? c;   // SyntaxError

Chi ha progettato il linguaggio ha ritenuto la precedenza abbastanza ambigua da obbligarti a chiarirla. Aggiungi le parentesi e tutto funziona:

const a = null;
const b = 0;
const c = 'fallback';

const x = (a || b) ?? c;
const y = a || (b ?? c);

console.log(x);
console.log(y);

Raggruppamenti diversi, risultati diversi. Le parentesi non sono decorative: dicono a chi leggerà il codice in futuro (e al parser) cosa intendevi.

Non è come un parametro predefinito

I parametri predefiniti nella firma di una funzione hanno una regola tutta loro: scattano solo quando l'argomento è undefined, non null. È una differenza sottile rispetto a ??, che tratta i due casi allo stesso modo.

function greet(name = 'friend') {
  return `Hello, ${name}`;
}

console.log(greet());          // uses default
console.log(greet(undefined)); // uses default
console.log(greet(null));      // does NOT use default

Se vuoi che anche null faccia scattare il ripiego, usa ?? nel corpo della funzione:

function greet(name) {
  const who = name ?? 'friend';
  return `Hello, ${who}`;
}

console.log(greet(null));
console.log(greet(undefined));
console.log(greet('Rosa'));

Una piccola differenza, facile da trascurare quando un'API ti restituisce null per dire "nessun valore impostato".

Quando usare l'operatore ??

Usa ?? come operatore predefinito, a meno che tu non abbia un motivo preciso per non farlo. È quello che rispecchia meglio il comportamento reale dei dati: 0, '' e false di solito sono valori veri da conservare, e solo i dati davvero mancanti meritano un ripiego. Riserva || ai casi in cui vuoi davvero sostituire qualsiasi valore falsy.

Prossimo passo: le classi

Con questo chiudiamo il blocco su oggetti e array: hai gli strumenti per costruire e percorrere strutture di dati in sicurezza. Il prossimo capitolo passa all'organizzazione del comportamento: classi, ereditarietà e il sistema dei prototipi che c'è sotto.