The Else If in JavaScript is instrumental when we have to check several conditions. We can also use Nested If to achieve the same. Still, as the number of conditions increases, code complexity will also increase.
JavaScript else if syntax
The syntax of the Else If statement is as follows
if (condition1)
statements 1
else if (condition2)
statements 2
else if (condition3)
statements 3
...........
else if (conditionn)
statements n
else
default statements
The JavaScript Else If statement handles multiple expressions effectively by executing them sequentially. It will check for the first condition. If the expression is evaluated to TRUE, it will execute the lines of code present in that block. If the expression is evaluated as FALSE, it will check the Next one (Else If condition) and so on.
There will be some situations in the Else If statement where condition1, condition2 is TRUE, for example: x = 20, y = 10
Condition1: x > y //TRUE
Condition2: x != y //TRUE
In these situations, code under Condition1 will execute. Because ELSE IF conditions will only execute if its previous IF statement fails.
Else If in JavaScript Example
In this program, we will calculate whether he is eligible for a scholarship or not using the Else if statement.
<!DOCTYPE html>
<html>
<head>
<title>ElseIfinJavaScript</title>
</head>
<h1>ElseIfinJavaScript</h1>
<body>
<script>
let Totalmarks = 380;
if (Totalmarks >= 540)
{
document.write("<b> Congratulations </b>");
document.write("<br\> You are eligible for Full Scholarship " );
}
else if(Totalmarks >= 480)
{
document.write("<b> Congratulations </b>");
document.write("<br\> You are eligible for 50 Percent Scholarship " );
}
else if (Totalmarks >= 400)
{
document.write("<b> Congratulations </b>");
document.write("<br\> You are eligible for 10 Percent Scholarship " );
}
else
{
document.write("<b> You are Not eligible for Scholarship </b>");
document.write("<br\> We are really Sorry for You" );
}
</script>
</body>
</html>
OUTPUT 1: In this JS example, the Totalmarks= 550. First, If condition is TRUE; that’s why the code inside the If Statement displayed as Browser output
OUTPUT 2: To demonstrate the JavaScript Else if statement, we will change the Totalmarks to 500 means the first IF condition is FALSE. It will check the (Totalmarks>= 480), which is TRUE, to display the lines inside this block. Although the (Total marks>= 400) condition is TRUE, it won’t check that expression.
Congratulations
You are eligible for 50 Percent Scholarshipoutput 3: We will change Totalmarks to 440 means the first IF condition (Total marks= 480) is FALSE. So, It will check the (Totalmarks>= 400), which is TRUE, to print the code inside this block.
Congratulations
You are eligible for 10 Percent ScholarshipOUTPUT 4: We will change Totalmarks to 380 means all the IF expressions Fail. So, It will print the code inside the else block.
You are Not eligible for Scholarship
We are really Sorry for YouJavaScript else if multiple conditions
We can use multiple conditions in the else if statement to check multiple expressions at each level. To do so, we must use the logical operators in an else if statement to separate multiple conditions.
In the example below, the first else if condition with multiple conditions checks whether the student’s marks are between 80 and 90. The next else if expression checks the marks between 65 and 80. Based on the user-given result, it prints the student’s grades.
let marks = 89;
if (marks > 90) {
console.log("Grade A");
} else if (marks > 80 && marks <= 90) {
console.log("Grade B");
} else if (marks >= 65 && marks <= 80) {
console.log("Grade C");
} else {
console.log("Grade D");
}
Grade BWhy JavaScript else if never executing?
When working with the else if statement, we must be careful with the order of the expressions. If the first if condition meets all conditions, what’s the point of writing else if conditions?
If you observe the code below, when the score is above 85, it should return “Excellent”, but the result is “Pass”. Here, the compiler checks the first condition, and 90 >= 40 is True. It returns the message inside the first if condition and stops looking at the other statements. Refer to the if else.
let score = 90;
if (score >= 40) {
console.log("Pass");
}
else if (score > 85) {
console.log("Excellent");
}
else {
console.log("Fail!")
}
PassIf we change the order of the else if condition expressions, it will change the output. Let me change the order by placing the else if (score > 85) condition at the beginning, followed by (score >= 40).
let score = 90;
if (score > 85) {
console.log("Excellent");
}
else if (score >= 40) {
console.log("Pass");
}
else {
console.log("Fail!")
}
ExcellentJavaScript else if vs switch
Both the else if statement and the switch case are useful decision-making statements. However, we use them for different purposes.
- else if: Use when working with complex expressions or evaluating multiple conditions separated by the logical operators.
- switch: Use when we are comparing the same variable or value against many case labels (possibilities).
Although multiple examples differentiate between them, we use the same example with the else if statement and the switch case. The example below helps to understand the syntactical difference. Imagine you want to check multiple conditions at each (refer to the multiple conditions example section). It is not possible with a switch case.
else if Statement example
let day = "Friday";
if (day === "Monday") {
console.log("Week Start!!!");
} else if (day === "Friday") {
console.log("Hurray!!! Weekend");
} else {
console.log("Regular day");
}
Hurray!!! WeekendSwitch case example
let day = "Friday";
switch (day) {
case "Monday":
console.log("Week Start!!!");
break;
case "Friday":
console.log("Hurray!!! Weekend");
break;
default:
console.log("Middle of the Week");
}
Hurray!!! Weekend