Operatore ternario in JavaScript

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}