CONDITIONAL STRUCTURES IN JAVASCRIPT

CONDITIONAL STRUCTURES

Javascript like other languages provides conditional structures. The conditional is always present in everyday life, let us analyze the following sentence that can be true or false as shown in the image below.

The “conditional structures in javascript” are statements that are used to perform different actions for different conditions. Very often, when writing code, you want to execute different actions for different decisions. You can use conditional statements in the code to perform this operation. In JavaScript we have the following conditional statements:

Use if to specify a block of code to execute, if a specified condition is true
Use else to specify a block of code to execute, if the same condition is false
Use else if to specify one or n new conditions to be checked, if the first condition is false
Use switch to specify many alternative code blocks to execute

THE IF STATEMENT

Use the if statement to specify a block of JavaScript code to execute if a condition is true.

if (condition) {
// block of code to be executed if the condition is true

}

Note that if is in lower case letters. Capital letters(If or IF) will generate a JavaScript error.

let greeting;

if (new Date().getHours() < 18) {
greeting = “Good day”;
}

THE ELSE STATEMENT

Use the else to specify a block of code to execute if the condition is false.

if (condition) {
// block of code to be executed if the condition is true

} else {
// block of code to be executed if the condition is false

}

let greeting;

if (new Date().getHours() < 18) {
greeting = “Good day”;
}

else{

greeting = “Good evening.”

}

THE ELSE IF STATEMENT

Use the statement else if to specify a new condition if the first condition is false.

if (condition1) {
// block of code to be executed if condition1 is true

} else if (condition2) {
// block of code to be executed if the condition1 is false and condition2 is true
} else {
// block of code to be executed if the condition1 is false and condition2 is false

}

const time = new Date().getHours();

let greeting;

if (time < 10) {

greeting = “Good morning”;

} else if (time < 20) {

greeting = “Good day”;

} else {

greeting = “Good evening.”

}

One can specify n else if statements as needed however having many else if statements worsens the readability of the code. It is preferable in these situations to use the statement switch.

SWITCH STATEMENT

The switch instruction is used to perform different actions based on different conditions. Use the switch instruction to select one of the code blocks to execute.

switch(expression) {
case x:
// code block

break;
case y:
// code block

break;
default:
// code block
}

The switch expression is evaluated once.

The value of the expression is compared with the values of each case.
If there is a match, the associated code block is executed.
If there is no match, the default code block is executed.

The method getDay() returns the day of the week as a number between 0 and 6.

(Sunday=0, Monday=1, Tuesday=2 …)

This example uses the number of the day of the week to calculate the name of the day of the week:

let day;

switch (new Date().getDay()) {
case 0 :
day = “Sunday”;
break;
case 1:
day = “Monday”;
break;
case 2 :
day = “Tuesday”;
break;
case 3 :
day = “Wednesday”;
break;
case 4 :
day = “Thursday”;
break;
case 5:
day = “Friday”;
break;
case 6:
day = “Saturday”;
}

THE KEYWORD BREAK

When JavaScript reaches a break keyword, which means it has found a match, it exits the switch block. This will stop execution within it. It is not necessary to interrupt the last case. However, the blockade ends there.

Note: If you omit the break statement, the next case will be executed even if the evaluation does not match the case.

The default keyword specifies the code to execute if there is no match in the cases:

let text;

switch (new Date().getDay()) {
case 6 :
text = “Today is Saturday”;
break;
case 0 :
text = “Today is Sunday”;
break;
default:
text = “Looking forward to the Weekend.”
}

Sometimes you will want different switch cases to use the same code. In this example case 4 and 5 share the same code block and 0 and 6 share another code block:

let text;

switch (new Date().getDay()) {
case 4 :
case 5 :
text = “Soon it is Weekend;
break;
case 0 :
case 6 :
text = “It is Weekend;
break;
default:
text = “Looking forward to the Weekend.”
}

If multiple cases match a case value, the first case is selected. If no matching houses are found, the program continues with the default label. If no default label is found, the program continues with the instructions after the switch. Switch cases use strict comparison (===). The values must be of the same type to match. A strict comparison can only be true if the operands are of the same type. In this example, there will be no match for x:

let x = “0”;

let text;

switch (x) {
case 0 :
text = “Off”;
break;
case 1:
text = “On”;
break;
default:
text = “No value found”;
}

Copy to Clipboard

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Strutture condizionali</title>
    
</head>
<body>
    <script type="rocketlazyloadscript">
        let azione;
        let votoEsame = 18;
        if(votoEsame < 18){
            azione = "Restare a casa a studiare";
        }
        else if( votoEsame < 23){
           azione = "Passeggiata poi torno a studiare";
        }
        else{
           azione = "Fare un weekeend";
        }
        console.log(azione);
        /*Quando ci sono molte condizioni, quindi parecchi else if
        la leggebilità del nostro codice non è buona. A tal proposito
        è meglio utlizzare l'istruzione switch. Facciamo un esempio.
        il break serve per uscire dallo switch, perche se abbiamo
        ottenuto corrispondenza è inutile continuare al suo interno
        .default è un pò come l'else generale. In caso
        di voto 4 oppure 5 la valutazione sarà molto buona.*/
        let votoRicevuto = 2;
        let valutazione;
        switch(votoRicevuto){
          case 1:valutazione="Pessima";break;
          case 2:valutazione="Scarsa";break;
          case 3:valutazione="Media";break;
          default:valutazione="Molto buona"; 
        }
        console.log(valutazione);
        /*--Operatore ternario. Si chiama così perchè viene applicato a 
        tre espressioni e migliora la leggibilità del codice.*/
        var esameSuperato, voto = 22;
        esameSuperato = (voto >=18 ? true : false);
        console.log(esameSuperato);
    </script>
</body>
</html>

Copy to Clipboard

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Strutture condizionali</title>
    <script type="rocketlazyloadscript">
        function eta()
        {
           const eta = prompt('Inserisci per favore la tua età: ');
           let anni = parseInt(eta);
           let text;
           if(anni < 18)
              text = `Hai ${anni} anni, nello stato Italiano non puoi guidare`;
           if(anni >= 18 && anni < 80)
              text = `Hai ${anni} anni, nello stato Italiano puoi guidare`;
            else
              text = `Hai ${anni} anni, nello stato Italiano non puoi guidare`;  
            alert(text); 
            switch (new Date().getDay()) {
                case 6:
                  text = "Today is Saturday";
                  break;
                case 0:
                  text = "Today is Sunday";
                  break;
                default:
                  text = "Looking forward to the Weekend";
              }
              alert(text); 
              /*USANDO L'OPERATORE TERNARIO*/
              anni >= 18 && anni < 80 ? text=`Hai ${anni} anni, nello stato Italiano puoi guidare`:
                                        text=`Hai ${anni} anni, nello stato Italiano non puoi guidare`; 
              console.log('Operatore ternario: ' + text);
        }
    </script>
</head>
<body onload="eta()">
    
</body>
</html>

LINKS TO PREVIOUS POSTS

THE JAVASCRIPT LANGUAGE

LINK TO CODE ON GITHUB

GITHUB