Javascript Conditional Statements(if-else, else-if, switch)

5 min readMay 11, 2021

In this, we will go through all the javascript’s conditional statements in detail with examples.

What are conditional Statements?

Javascript conditional statement tells our interpreter what decision to make according to the defined conditions.
So basically an expression that if it is satisfied will give true else will give false.
The most popular conditional statement is the if-else condition.

In the if-else conditional statement, the condition is checked like this “if” the condition is true then the block of code inside the if will be executed, or “else” the condition is false then the block of code inside else will be executed.
The syntax for if-else statement:

Example: Let’s check a number is greater than zero or not which will tell us if the number is positive or negative:

In the above example, you see the value of x is 5 which is greater than 0 and is a positive number as well, So when x is checked at the “if” condition it satisfies the condition and we get a green signal to execute the if statement block of code.

For the above example, the value of x is -2 which is less than 0 and is obviously a negative number, however when x is checked at the if the condition it is unsatisfied and we get a red signal to execute the else statement block of code.

Now what if we want to check multiple conditions using if-else, we can simply nest the if-else using the else-if statement.
Multiple conditions can be checked using this nesting statement.
So, 1st condition will be checked in the “if” statement, if it is unsatisfied 2nd condition will be checked in the “else-if” statement if even that is unsatisfied 3rd condition will be checked in a brand new “else-if” statement if satisfies the 3rd check statement block of code will be executed and if unsatisfied the else statement block of code will be executed.
The syntax for else-if or you can call if-else nesting:

Note: we can have as many else-if nested in if-else as per requirements of conditions.

Now we take an example where we check the number is positive or negative or a Zero (Zero is not positive nor negative)

In the above example, x is 0, then the 1st condition is checked if the value of x is greater than zero, whereas the 1st condition is unsatisfied so we check the next condition where x is strictly equal to zero once the condition is satisfied the block of code inside else-if gets executed.

Look you can practice this code and play with it by changing the value of x or the conditional checks.
Take your time!

So previously we were able to do multiple condition checks with nested if-else-if, which is good for 2 or 3 conditional checks But more than that it isn’t efficient to use if-else-if.
To solve this problem we have switch conditional statement which takes an expression and checks the cases where the expression is satisfied.
the syntax for switch case statement:

Let’s talk about syntax first before moving to the example
So in the above syntax, an expression is passed in the switch statement, then the expression is evaluated among the case statements where the condition is checked for the expression.
if satisfied then execute the block of code inside the case else move on to the next case statement till the expression is satisfied, And even if the expression is not satisfied to execute the block of code present in the default case.
The break is used to tell the interpreter when to stop executing the code inside the case and to further stop executing the switch statement.
Now check out the example where we have a certain amount of money and see what we can buy from that amount.

You see the expression in the above example is money which is predefined value as 30.
This expression is passed to the switch statement where the expression is checked within each case statement, in our case it’s case 30 got satisfied and the console log of ice cream was printed.

Now try this on your own by manipulating the values in the code to get the hang of this topic.

This conditional operator is the same as if-else but the representation is in a more subtle way.
Same it evaluated the condition and execute the code as per the satisfied condition.
the syntax for ternary condition operator

So here if the condition is satisfied the code_1 will be executed and for the unsatisfied condition, code_2 will be executed.
It’s an operator after all so it takes 3 operands and is called a ternary operator (Lame one I known).
An example where we will check the marks for passing and failing.

let marks = 25;let result = marks >= 35 ? console.log("You passed the test") : console.log("Failed! Try again");

We can also do nesting in this for example let’s say we want to promote the students who scored 25 marks (remember Covid-19 situation we all got ^_^ promoted somehow ):

let marks = 15;let result = marks >= 25? (marks < 35 ? console.log("Promoted") : console.log("Passed")): console.log("Failed");

In the above example, we 1st check the marks are greater than or equal to 25, in our case it's 15 so failed, if the value is actually greater than or equal to 25 then we do 2nd check if the marks are less than 35 if marks are less than 35 Promoted else marks higher than 35 will be passed.

Tip: try to avoid nesting of ternary operators as it makes our code very complicated and hard for other developers to read.