Operatori condizionali: if, '?'

Qualche volta abbiamo bisogno di eseguire certe azioni solo nel caso valgano determinate condizioni.

Per questo c listruzione if e loperatore condizionale di valutazione a cui ci riferiremo, per semplicit, con loperatore punto di domanda ?.

Listruzione if

Listruzione if(...) valuta una condizione (racchiusa nelle parentesi); se il risultato true, esegue il codice che segue if.

Ad esempio:

let year = prompt('In which year was ECMAScript-2015 specification published?', '');

if (year == 2015) alert( 'You are right!' );

Nellesempio sopra, la condizione un semplice controllo di uguaglianza: year == 2015, ma potrebbe essere qualcosa di molto pi complesso.

Se dobbiamo eseguire pi di unistruzione, queste vanno raggruppate tramite parentesi graffe:

if (year == 2015) {
  alert( "That's correct!" );
  alert( "You're so smart!" );
}

E consigliabile raggruppare sempre il codice allinterno delle parentesi graffe {}, quando si usa un if, anche se contiene una sola istruzione. La leggibilit ne guadagna.

Conversione booleana

Listruzione if () valuta la condizione tra le parentesi e converte il risultato al tipo booleano.

Ricordiamo le regole di conversione viste nel capitolo Conversione di tipi:

• Il numero 0, una stringa vuota "", null, undefined e NaN diventano false. Per questo vengono chiamati valori falsi.
• Gli altri valori diventano true, quindi vengono chiamati veri.

Quindi, il codice nellesempio sotto, non verr mai eseguito:

if (0) { // 0  falso
  ...
}

Nel seguente esempio, invece, verr sempre eseguito:

if (1) { // 1  vero
  ...
}

Possiamo anche passare un valore gi valutato in precedenza, come qui:

let cond = (year == 2015); // l'uguaglianza diventa vera o falsa

if (cond) {
  ...
}

La clausola else

Listruzione if pu essere seguita da un blocco opzionale else. Questo viene eseguito quando la condizione falsa.

Ad esempio:

let year = prompt('In which year was the ECMAScript-2015 specification published?', '');

if (year == 2015) {
  alert( 'You guessed it right!' );
} else {
  alert( 'How can you be so wrong?' ); // qualsiasi valore tranne 2015
}

Condizione multiple: else if

Qualche volta vorremmo testare diverse varianti di una condizione. Per questo esiste la clausola else if.

Ad esempio:

let year = prompt('In which year was the ECMAScript-2015 specification published?', '');

if (year < 2015) {
  alert( 'Too early...' );
} else if (year > 2015) {
  alert( 'Too late' );
} else {
  alert( 'Exactly!' );
}

Nel codice sopra JavaScript controlla anzitutto la prima condizione, year < 2015. Se risulta falsa va alla successiva condizione year > 2015 ed esegue il codice dentro le parentesi graffe, altrimenti esegue il codice dentro al blocco else.

Ci possono essere molti blocchi else if. Lelse finale opzionale.

Operatore condizionale ?

Qualche volta abbiamo bisogno di assegnare un valore ad una variabile in base ad una certa condizione.

Ad esempio:

let accessAllowed;
let age = prompt('How old are you?', '');

if (age > 18) {
  accessAllowed = true;
} else {
  accessAllowed = false;
}

alert(accessAllowed);

Esiste un operatore condizionale, o punto interrogativo, che ci consente di farlo in maniera pi breve e semplice.

Loperatore viene rappresentato dal punto interrogativo ?. Il termine formale ternario, perch richiede tre operatori. E lunico operatore in JavaScript che ne accetta cos tanti.

La sintassi :

let result = condition ? value1 : value2;

La condition viene valutata; se risulta vera, viene ritornato value1, altrimenti viene ritornato value2.

Ad esempio:

let accessAllowed = (age > 18) ? true : false;

Tecnicamente, potremmo omettere le parentesi attorno ad age > 18. Loperatore condizionale ha una precedenza molto bassa, viene eseguito dopo gli operatori di confronto >.

Il risultato dellesempio sotto uguale a quello precedente:

// l'operatore di confronto "age > 18" viene eseguito per primo
// (non c' bisogno di racchiuderlo tra parentesi)
let accessAllowed = age > 18 ? true : false;

Ma le parentesi rendono il codice pi leggibile, quindi consigliabile utilizzarle.

// stesso risultato (risulter in `true` o `false`, a seconda del valore di `age`)
let accessAllowed = age > 18;

Multipli operatori ?

Una sequenza di operatori ? consente di ritornare un valore che dipende da pi condizioni.

Ad esempio:

let age = prompt('age?', 18);

let message = (age < 3) ? 'Hi, baby!' :
  (age < 18) ? 'Hello!' :
  (age < 100) ? 'Greetings!' :
  'What an unusual age!';

alert( message );

Potrebbe essere difficile, inizialmente, capirne la logica. Ma dopo averlo guardato da pi vicino ci accorgeremo che una semplice sequenza di condizioni.

1. Il primo operatore ? controlla age < 3.
2. Se vero ritorna 'Hi, baby!', altrimenti segue la colonna ":", controlla age < 18.
3. Se questo vero ritorna 'Hello!', altrimenti segue la colonna ":", controlla age < 100.
4. Se questo vero ritorna 'Greetings!', altrimenti segue la colonna ":", ritorna 'What an unusual age!'.

La stessa logica riscritta utilizzando if..else:

if (age < 3) {
  message = 'Hi, baby!';
} else if (age < 18) {
  message = 'Hello!';
} else if (age < 100) {
  message = 'Greetings!';
} else {
  message = 'What an unusual age!';
}

Uso non tradizionale delloperatore ?

Qualche volta loperatore ? si utilizza per rimpiazzare listruzione if:

let company = prompt('Which company created JavaScript?', '');

(company == 'Netscape') ?
   alert('Right!') : alert('Wrong.');

In base alla valutazione della condizione company == 'Netscape', viene eseguita la prima o la seconda parte (e il rispettivo alert).

Qui non assegniamo il risultato ad una variabile. Lidea di eseguire un codice differente a seconda della condizione.

Non consigliabile utilizzare loperatore ternario in questo modo.

La notazione risulta essere molto pi breve rispetto allistruzione if; questo viene sfruttato da molti programmatori, ma risulta meno leggibile.

Compariamo il codice sopra con una versione che utilizza if invece delloperatore ternario ?:

let company = prompt('Which company created JavaScript?', '');

if (company == 'Netscape') {
  alert('Right!');
} else {
  alert('Wrong.');
}

I nostri occhi esaminano il codice verticalmente. I costrutti che si estendono per qualche riga risultano pi semplici da capire piuttosto di ununica istruzione che si estende orrizontalmente.

Lidea delloperatore ternario ? di ritornare, in base a una condizione, un valore piuttosto di un altro. Va quindi utilizzato solo in questo tipo di situazioni. Per eseguire diversi codici consigliabile utilizzare il costrutto if.