Optional chaining (?.) e Nullish coalescing (??)

Lo stesso problema visto per il nullsafe operator di PHP esiste anche in JavaScript: navigare un oggetto che potrebbe essere null o undefined senza dover scrivere una catena di controlli if. Due operatori, introdotti insieme in ES2020, risolvono metà del problema ciascuno: ?. per l'accesso sicuro, ?? per il valore di riserva.

1. Optional chaining: fermarsi senza errore

?. funziona come . normale, con una differenza: se il valore a sinistra è null o undefined, l'espressione si ferma e restituisce undefined, invece di lanciare un errore.

const cliente = { nome: "Ada" };

cliente?.indirizzo?.citta;  // undefined, nessun errore, si ferma subito
cliente.indirizzo.citta;    // TypeError: Cannot read properties of undefined

Funziona anche con array e con le chiamate di funzione, cambiando leggermente sintassi:

const dati = { lista: [1, 2, 3] };
dati?.lista?.[0];             // 1, notazione a parentesi quadre per gli indici
dati?.metodoInesistente?.();  // undefined, non prova a chiamarlo se non esiste

Fonte: MDN Web Docs, «Optional chaining (?.)»: restituisce undefined invece di lanciare un errore se il riferimento è nullish; supporta anche la notazione a parentesi quadre e le chiamate di funzione.

2. ?? contro ||: la differenza che conta davvero

Sembrano intercambiabili, ma ?? e || rispondono a due domande diverse. || restituisce il valore di destra se quello di sinistra è un qualunque valore falsy (0, "", false, null, undefined). ?? scatta solo per null o undefined.

const punteggio = 0;

punteggio || 10;  // 10, 0 e' falsy, quindi lo sostituisce (probabilmente un bug!)
punteggio ?? 10;  // 0,  0 e' un valore legittimo, non e' null/undefined

Regola pratica: usa ?? ogni volta che 0, stringa vuota o false sono valori legittimi che non vuoi sostituire per errore: praticamente sempre, quando gestisci numeri o testo che potrebbero legittimamente essere «vuoti».

Fonte: MDN Web Docs, «Nullish coalescing operator (??)»: a differenza di ||, non restituisce l'operando destro per altri valori falsy come 0 e stringa vuota, solo per null e undefined.

3. ??=: assegna solo se manca

??= assegna un valore solo se quello attuale è null o undefined: utile per impostare default senza sovrascrivere un valore già presente, incluso 0 o stringa vuota.

function configura(opzioni) {
    opzioni.velocita ??= 25;  // solo se velocita e' null/undefined
    return opzioni;
}

configura({ velocita: 0 });   // { velocita: 0 },  0 resta 0, non sovrascritto
configura({});                // { velocita: 25 }, mancava, assegnato il default

MDN segnala che l'operatore è a short circuit: se il valore a sinistra non è nullish, l'espressione a destra non viene nemmeno valutata: utile se generare quel valore ha un costo.

Fonte: MDN Web Docs, «Nullish coalescing assignment (??=)»: assegna solo se l'operando sinistro è nullish; l'espressione destra non viene valutata se non necessario (short circuit).

4. Combinarli: la coppia più usata in assoluto

?. e ?? insieme risolvono il caso più comune: «prendi questo valore annidato, e se non esiste usa un default».

function descriviCliente(cliente) {
    return cliente?.citta ?? "Citta' sconosciuta";
}

Nota tecnica da ricordare: ?? non può essere mescolato direttamente con && o || senza parentesi esplicite: è un errore di sintassi, non solo una cattiva pratica.

// 0 || undefined ?? "testo";  SyntaxError!
(0 || undefined) ?? "testo";   // OK, con le parentesi

Fonte: MDN Web Docs, «Nullish coalescing operator»: ?? non può contenere né essere contenuto direttamente in un'operazione && o ||, senza l'uso esplicito di parentesi.

In sintesi

Il filo conduttore è sempre lo stesso: distinguere «non c'è ancora» da «c'è, ed è zero/vuoto/falso». Prima di questi operatori, quella distinzione richiedeva controlli espliciti; oggi è incorporata nella sintassi stessa.