We use conditionals a lot in our day-to-day life.

For example: when our mother asks us to get some groceries, she often says "bring cauliflower from the market and if all is finished bring cabbage".

The same thing is in programming languages as well, we often use some conditions for which we want to run different blocks of code.

For achieving this we use conditional statements in the language.

Conditional statements in JavaScript

In JavaScript we have the following conditional statements:

if

else

else if

switch

if

Use the if statement when you want to run a block of code when a particular condition is true.

Syntax

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

Example

You want to display "above 18" when the age entered is above 18.

const age=19;
if(age>18){
    console.log("above 18");
}
// this code will diplay "above 18" in console as the age entered is 19 and we are checking for age above 18.

else

Use the else statement to specify a block of code to be executed if the condition is false.

This is always written along with if

Syntax

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
}

Example

Following the above example, you want to display "above 18" when the age entered is above 18 and when the age entered is below 18 you want to display "below 18".

const age=19;
if(age>18){
    console.log("above 18");
}
else{
console.log("below 18")
}
//this will show "above 18" as the age is above 19.

const age=16;
if(age>18){
    console.log("above 18");
}
else{
console.log("below 18")
}
//this will now show "below 18" as the age is 16

JavaScript first checks if condition and if the if condition is false, then will execute the else condition.

else if

Use else if statement to add other conditions when the if condition is false.

This conditional also is used along the side of if and is present between if and else conditional in code.

There can be many else if condition in between.

Syntax

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
}

Example

Following the above example, you want to display "above 18" when the age entered is above 18 and when the age entered is between 15 and 18 you want to display "between 15 and 18" and when the age entered is below or equal to 15 you want to display "below 15".

const age=16;
if (age>18) {
    console.log("above 18");
} 
else if (age>15 && age<18 ) {
 console.log("between 15 and 18");
//this will be executed 
} 
else {
    console.log("below 15");
}

Switch

Now what a switch statement can do, the same can be done via else if statements as well, but we use switch statement because the code looks a lot prettier and clean.

Syntax

switch(expression) {
  case x:
    // code block
    break;
  case y:
    // code block
    break;
  default:
    // code block
}

How it works:

• 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 block of code is executed.

• If there is no match, the default code block is executed.

Example

First via else if statements, just to show what switch can do, the same can be done by else if statements as well.

Let's say you want to check what number is entered in the range of 1-5, both inclusive.

const num= 1;

if (num === 1) {
  console.log("The number was 1");
} else if (num === 2) {
  console.log("The number was 2");
} else if (num === 3) {
  console.log("The number was 3");
} else if (num === 4) {
  console.log("The number was 4");
} else if (num === 5) {
  console.log("The number was 5");
} else {
  console.log("The number is out of range of 1-5");
}
//THE OUTPUT WILL BE "The number was 1"

This is a way of doing it using else if, the code looks a lot complicated and can be hard to read at times.

Now using the switch statement.

 const num= 1;

switch (num) {
  case 1:
    console.log("The number was 1");
    break;
  case 2:
    console.log("The number was 2");
    break;
  case 3:
    console.log("The number was 3");
    break;
  case 4:
    console.log("The number was 4");
    break;
  case 5:
    console.log("The number was 5");
    break;
  default:
    console.log("The number is out of range of 1-5");
    break;
}
//THE OUTPUT WILL BE "The number was 1"

Things to remember:

1. We do break after each case because if it is absent then the rest of the code will also execute even if the evaluation does not match the case.

2. When JavaScript reaches a break keyword, it breaks out of the switch block.

   It is not necessary to break the last case in a switch block. The block breaks (ends) there anyway.The default the case does not have to be the last in a switch block. If last, add a break there.

3. The default keyword specifies the code to run if there is no case match.

4. If no default label is found, the program continues to the statement(s) after the switch.

5. Switch cases use strict comparison (===).

Thank you for reading, have a nice day ahead.