Full Stack

Operatore ternario in JavaScript

Autore

Manuel Ricci

Nell'articolo precedente relativo alle istruzioni ed espressioni in JavaScript ho anticipato l'operatore di cui parlerò in questo articolo. Sto parlando dell'operatore ternario o, nome ufficiale, operatore condizionale.

La struttura generale dell'operatore ternario è la seguente:

1condizione ? espressione da eseguire se condizione vera : espressione da eseguire se condizione falsa;

L'operatore condizionale è l'unico operatore in JavaScript che deve ricevere tre operandi:

  • La condizione: un espressione usata come condizione (restituirà un valore booleano)
  • Espressione da eseguire se condizione vera: un espressione che verrà eseguita solo e soltanto se la condizione verrà considerata vera.
  • Espressione da eseguire se condizione falsa: un espressione che verrà eseguita solo e soltanto se la condizione verrà valutata come falsa.

I valori falsi che possono essere: null, NaN (Not a Number), 0, stringa vuota "" e undefined.

Quando usare l'operatore ternario

L'operatore ternario è perfetto per semplificare quelle istruzioni if/else che prevedono una sola espressione all'interno del proprio blocco. Come ad esempio:

1function salutaUtente(nomeUtente) {
2  if (nomeUtente) {
3    return `Ciao, ${nomeUtente}`;
4  } else {
5    return "Ciao, utente";
6  }
7}
8console.log(salutaUtente("Manuel")); // Ciao, Manuel
9console.log(salutaUtente(0)); // Ciao, utente

Lo snippet di codice qui sopra può essere tranquillamente "tradotto" in:

1function salutaUtente(nomeUtente) {
2  return nomeUtente ? `Ciao, ${nomeUtente}` : "Ciao, utente";
3}
4
5console.log(salutaUtente("Manuel")); // Ciao, Manuel
6console.log(salutaUtente(0)); // Ciao, utente

Il risultato non cambia. Usando nomi di variabili e costanti chiari l'operatore ternario permette di guadagnare parecchi punti in termini di leggibilità e rapidità di scansione del codice scritto.

Altri Casi di Utilizzo

L'operatore condizionale non è limitato alla sola semplificazione di istruzioni if/else, ma si possono concatenare più istruzioni, in questo modo:

1function esempioConcatenazioneCondizioni() {
2  if (condizione1) {
3    return valore1;
4  } else if (condizione2) {
5    return valore2;
6  } else if (condizione3) {
7    return valore3;
8  } else {
9    return valore3;
10  }
11}

Possiamo riscriverla come segue:

1function esempioConcatenazioneCondizioni() {
2  return condizione1 ? valore1
3        : condizione2 ? valore2
4        : condizione3 ? valore3
5        : valore4;
6}

Caricamento...

Diventiamo amici di penna? ✒️

Iscriviti alla newsletter per ricevere una mail ogni paio di settimane con le ultime novità, gli ultimi approfondimenti e gli ultimi corsi gratuiti puubblicati. Ogni tanto potrei scrivere qualcosa di commerciale, ma solo se mi autorizzi, altrimenti non ti disturberò oltre.

Se non ti piace la newsletter ti ricordo la community su Discord, dove puoi chiedere aiuto, fare domande e condividere le tue esperienze (ma soprattutto scambiare due meme con me). Ti aspetto!

Ho in previsione di mandarti una newsletter ogni due settimane e una commerciale quando capita.