Javascript if else if vs switch case

In previous posts, we have seen two conditional statements if and switch statements. Both are used to match javascript statements based on the specified value. But in some cases both conditional statements are vary from each other.

Before discussing the difference between both conditional statements below is the syntax of the if else if statement and switch case statement.

if else if  vs. switch case 

Syntax of if else if 

if(condition1)
{
//Block of javascript statement to be executed.(when condition1 is true)
}
else if(condition 2)
{
//Block of javascript statement to be executed.(when condition2 is true)
}
else if(condition 3)
{
//Block of javascript statement to be executed.(when condition3 is true)
}
....
else
{
//javascript statement to be executed when above all conditions are false.
}

Syntax of switch

switch(expression)
{
case value1:
//Javascript statement
break;
case value2:
//Javascript statement
break;
………..
………..
case valueN:
//Javascript statement
break;
default:
//Javascript statement
break;
}

if else if vs. switch statement 

1. Working of statements

• if statement

The logical expression is evaluated and when it is true, the statement under if statement is executed. If the condition evaluated false the else part’s statement is executed. when the else if statement is defined condition of the else if statement is evaluated after the if statement, when it is true, then the statement of else if is executed. When all the if and else if conditional parts are evaluated as false then the statement of else part is executed.

In the if statement once a condition is satisfied the execution will stop. 

• switch case

In a switch case statement variable value or expression finds a match from specified cases. When the case matches with value the statement of that case will be executed. If no match is found the default statement will be executed. 

But if you omit the break keyword, the execution of the code will be continued even after the case matches the value.

2. Value evaluation

• if else

The if else statement evaluates integer, string, float, and Boolean values in a conditional expression.

• switch case

The switch case statement evaluates only integer and string values.

3. What do both check for?

• if else

The if else checks for logical expression, if true then the javascript statement under the if statement is executed otherwise statement of the else part executes.

It checks for both logical expression and equality of variable value.

In the following example, logical expression is defined as an ‘if’ condition and also checks equality in a logical expression.

var a=19;
if(a/2==0)
{
document.write(“even no”);
}
else
{
document.write(“odd no”);
} //output:: odd no

Both examples specify that the value of variable a is even or odd.

• switch case

The switch statement checks for variable value instead of logical expression. 

It checks whether the value of the variable exactly matches with a case or not.

For example, logical expression define into b variable later value of variable ‘b’ is evaluated and finding a match in specified cases.

4. Length of code

The if else if ladder requires maximum lines of code in comparison to the switch case.

For example, suppose you have to decide student results based on their grades. Grades A and B specify ‘Distinction’ and ‘First’ respectively, grades ‘C’, ’D’ and ‘E’ specify ‘pass’, ‘F’ grade specify ‘fail’, and ‘Absent’ specify of a null value.

if else if

function result(grade)
{
if(grade==’A’)
{
document.write(“Distinction”);
}
else if(grade==’B’)
{
document.write(“First”);
}
else if(grade==’C’)
{
document.write(“Pass”);
}
else if(grade==’D’)
{
document.write(“Pass”);
}
else if(grade==’E’)
{
document.write(“Pass”);
}
else if(grade==’F’)
{
document.write(“Fail”);
}
else
{
document.write(“Absent”);
}
result(‘D’); //output:: Pass

switch

function result(grade)
{
switch(grade)
{
case ‘A’:
alert(“Distinction”);
break;
case ‘B’:
alert(“First”);
break;
case ‘C’:
case ‘D’:
case ‘E’:
alert(“Pass”);
break;
case ‘F’:
alert(“Fail”);
break;
default:
alert(“Absent”);
}
}
grade(‘D’); //output:: Pass

You can combine the else if statement into one using the logical operator ‘OR’ (||). The conclusion is if statement requires a logical expression to do this.

On the other hand in Switch, you have to just combined cases.

The above example is okay using both statements but when there are maximum data you have to choose between two.

5. Execution speed

The switch statement is faster than the if else ladder because during execution instead of checking each logical expression, the compiler generates a jump table for a switch to a jump case whose value match with the switch expression.

6. Readability

The program written in the switch case is easy to read than the if else if statement.

Summary

It is your choice either use if else ladder or switch case. Use the one you are comfortable with either if else if or switch case statement.

Comparison table of if else if and switch statement

	if else if	switch
How works?	Evaluate conditions one by one	Decide which case to be executed
Value evaluation	Evaluates integer, string, float, or boolean	Evaluates only integer or string
What checks?	Checks for logical expression, as well as equality	Check only for equality
Length of code	Lengthy compared to switch case	Shorter line of code compare to if else if
Speed	Slower than switch case	Faster than if else if
Readability	Complicated to reading because of multiple logical statements	Easy to read
When to use	Used for complex codding in case of logical expression required	Used for simple codding when no need for complex logic
Editing in statement	Difficult	Simple