Come funziona l'operatore Punto interrogativo (?) in JavaScript

Articolo originale: https://www.freecodecamp.org/news/how-the-question-mark-works-in-javascript/

L'operatore condizionale o punto interrogativo, rappresentato da un ?, è una delle funzionalità più potenti di JavaScript. L'operatore ? viene utilizzato nelle istruzioni condizionali e, se associato a un :, può fungere da alternativa compatta alle istruzioni if...else.

Ma c'è di più di quel che appare a prima vista. Ci sono tre usi principali per l'operatore ?, due dei quali potresti non averli mai usati o di cui potresti non aver mai sentito parlare. Scopriamole tutte nel dettaglio.

Tre usi principali del punto interrogativo (?) in JavaScript:

1. Operatore ternario
2. Concatenamento opzionale
3. Coalescenza dei nulli

Analizzeremo ciascuno di questi in dettaglio, a partire dal modo più comune in cui vedrai utilizzato l'operatore  ?: come operatore ternario.

1. Operatore ternario

Il termine ternario significa composto da tre elementi o parti. L'operatore ? è anche chiamato operatore ternario perché, a differenza di altri operatori come strettamente uguale ( ===) o resto ( %), è l'unico che accetta tre operandi.

A partire da ?, aggiungiamo una condizione sul lato sinistro e un valore sul lato destro da restituire quando la condizione è vera. Quindi aggiungiamo due punti (:) seguiti da un valore da restituire se la condizione è falsa.

L'operatore ternario è fondamentalmente una scorciatoia alle tradizionali istruzioni if...else.

Confrontiamo un operatore ternario con le lunghe istruzioni  if...else:

Qui, l'operatore ternario occupa solo una riga di codice, mentre if...else prende sette righe.

Usare un operatore ternario è molto più efficace, giusto?

2. Concatenamento opzionale

Nel 2020 è stata introdotta una nuova fantastica funzionalità nota come Concatenamento Opzionale.

Per capire come funziona, immagina questo scenario.

Diciamo che hai un codice che chiama una proprietà inesistente di un oggetto, che attiva un errore in fase di esecuzione. Ciò potrebbe essere dovuto a un valore mancante o non definito nel database o da un'API:

Grazie al Concatenamento Opzionale, puoi semplicemente inserire un ? tra il nome della proprietà e il punto posto prima della proprietà successiva.

Con ciò, tornerà semplicemente undefined invece di generare un brutto errore.

Il concatenamento opzionale è davvero una funzionalità che cambia la vita per gli sviluppatori JavaScript.

3. Coalescenza dei nulli

In alcuni casi, è necessario impostare un valore predefinito per un nome o un valore di proprietà mancanti.

Ad esempio, supponiamo che stiamo creando un'app meteo in cui stiamo recuperando la temperatura, l'umidità, la velocità del vento, la pressione, l'ora dell'alba e del tramonto e l'immagine della città. Abbiamo inserito un luogo, diciamo Bangalore, ma per qualche motivo la sua immagine non è presente nel database.

Quando l'app recupera e visualizza i dati, l'immagine sarà vuota, il che può sembrare brutto. Quello che possiamo fare, in tal caso, è impostare un'immagine predefinita per quelle città che non hanno un'immagine, Bangalore nel nostro caso.

In questo modo, quando l'app visualizza i dati, l'immagine predefinita sarà presente per le città senza immagini.

Puoi farlo usando l'operatore ||, noto come operatore logico OPPURE:

Ma se si utilizza || per fornire un valore predefinito, è possibile che si verifichino comportamenti imprevisti se si considerano utilizzabili alcuni valori (ad esempio '' o 0).

Considera il caso in cui una variabile ha il valore 0 o una stringa vuota. Se utilizziamo ( ||), verrà considerato come non definito o NULL e restituirà un valore predefinito che abbiamo scelto.

Invece dell'operatore logico OPPURE ( ||), è possibile utilizzare doppi punti interrogativi ( ??), detti anche operatore di coalescenza dei nulli.

Impariamo con un esempio.

const value1 = 0 || 'default string';
console.log(value1);


const value2 = '' || 1000;
console.log(value2);

Qui abbiamo '0' e 'default string' nella variabile value1. Se visualizziamo il suo valore nella console, otterremo "default string", il che è strano. Invece della stringa, dovremmo ottenere 0, poiché zero non è non-definito o nullo. Quindi qui, '||' non riesce a fare il lavoro.

La stessa cosa si ha con value2.

const value1 = 0 ?? 'default string';
console.log(value1);


const value2 = '' ?? 1000;
console.log(value2);

Ma se sostituiamo '||' con '??', otterremo 0 e una stringa vuota, che è ciò che lo rende così interessante.

L'operatore di coalescenza dei nulli funziona esattamente come l'operatore logico OPPURE, tranne per il fatto che otterrai il valore del lato destro quando il valore del lato sinistro è undefined o null.

In altre parole, ?? consente solo valori  undefined e null , non stringhe vuote ( '') o 0.

Conclusione

Spero che tu abbia capito come funziona l'operatore ? in JavaScript. Sembra semplice, ma è uno degli elementi più potenti della lingua. Fornisce semplificazione sintattica in tre modi fantastici  ma diversi.

Provali e fammi sapere come va.

Buon apprendimento!