If Else in JavaScript

By Mukul Latiyan

Updated on : 14 Oct 2022

14 mins read

Published on : 14 Oct 2022

If Else in JavaScript is a conditional statement where if the condition is true, the code inside if is executed. Otherwise, the code inside else is executed.

Introduction

In JavaScript, we can use conditional statements to execute code based on a particular condition.

JavaScript has two types of conditional statements:

If Else Statement - It executes the if block if the condition is true and the else block if it is false.
Switch Statement - It executes one of the cases among multiple alternatives.

This article will fully focus on the if else statement. We will get back to the switch statement in the upcoming articles.

Different variations of If Else

Below are some of the variations of if else that is present in javascript.

If Statement
If Else Statement
Else if Statement
Nested if Statement

Let's learn about each of these variations with the help of examples.

If Statement

The if statement is used when we want to run a block of code when the condition is evaluated to be true.

Consider the syntax of the if statement that is shown below.

Syntax

if ( condition ) {
    …
}

When a condition is true, the code present inside the curly braces will run.

Let's explore an example. Suppose we want to print a particular output to the console only if a string matches a particular string literal.

index.html

<!DOCTYPE html>
<html lang="en">
<head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>if-else statement examples</title>
</head>
<body>
        <h2>If Statement Example</h2>

        <script>
                // simple if statement example

                let name = "Masai School";

                if (name === "Masai School") {
                        console.log("You are allowed to enter!");
                }

                console.log("Done!");
        </script>
</body>
</html>

Explanation - In the above code, we have used the if statement with the condition, name == "Masai School". Here, the value of the name is "Masai School", so the condition becomes true, and the code inside the curly braces will be executed.

We should get the following output after running this code.

Output

If Else Statement

In the if-else statement, we add an else clause which is to execute once the condition in the if block is evaluated to false.

Consider the syntax of the if else statement that is shown below.

Syntax

if ( condition ) {
    …
} else {
    …
}

When the condition inside the if block evaluates to false, the code block of the else statement will get executed.

Consider the code shown below.

index.html

<html lang="en">

<head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>if-else statement examples</title>
</head>

<body>
        <h2>If else statement example</h2>

        <script>
                let name = "Masai School";

                if (name === "Masai School 1") {
                        console.log("You are allowed to enter");
                } else {
                        console.log("You are not allowed to enter");
                }

                console.log("Done!");
        </script>
</body>

</html>

Explanation - In the above code, we have used an if-else statement with the condition name == "Masai School 1". Here, the value of the name is "Masai School", so the condition becomes false.

Hence, the code inside the curly braces of the else statement will be executed, and we will get the message "You are not allowed to enter".

Output

If Else with multiple conditions

Now let's explore an example where we will learn how to have multiple conditions in an if-else statement.

Consider the code shown below.

index.html

<html lang="en">

<head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>if-else statement examples</title>
</head>

<body>
        <h2>If else statement example</h2>

        <script>
                let name = "Masai School";
                let age = 25;

                if (name === "Masai School" && age === 25) {
                        console.log("You are allowed to enter");
                } else {
                        console.log("You are not allowed to enter");
                }

                console.log("Done!");
        </script>
</body>

</html>

Explanation - In the above code, we have an if else statement with the condition, name == "Masai School" && age == 25. Here, two conditions are joined using the && operator, so for this condition to be true, both conditions need to be true.

The value of the name is "Masai School", so name == "Masai School" is true, and the value of age is 25, so age == 25 is also true. Hence, the condition is true, and the code inside the if block is executed, and we will get the output "You are allowed to enter".

Output

Else If Statement

We can also add extra conditions with if-else using else if statements in between if and else.

Consider the syntax shown below.

Syntax:

    …
} else if ( condition-2){
    …
} else {
    …
}

Let's see an example.

index.html

<html lang="en">

<head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>if-else statement examples</title>
</head>

<body>
        <h2>If else statement example</h2>

        <script>
                let name = "Masai School - 1";

                if (name == "Masai School") {
                        console.log(`Name is: ${name}`);
                } else if (name == "Masai School - 1") {
                        console.log(`Name is: ${name}`);
                } else {
                        console.log("Name is not Masai School");
                }

                console.log("Done!");
        </script>
</body>

</html>

Explanation - In the above code, we have two conditions: one with if block, name == "Masai School", and another with else if block, name == "Masai School - 1".

In this case, the first condition is executed first, and since the value of the name is not "Masai School", it becomes false. Then, the else if the condition is executed and since the value of the name is "Masai School - 1", it becomes true.

Hence, the code inside the curly braces of the else if block is executed, and we get "Name is: Masai School - 1" as output.

Output

In this way, we can add as many else if blocks as needed and form a ladder-like structure, known as if else if ladder in JavaScript. It looks something like this.

Syntax

    …
} else if ( condition-2){
    …
} else if ( condition-3) {
   …
} else if ( condition-4) {
    …
} else {
    …
}

Nested if Statement

A nested if statement includes other if statements inside it. For example,

index.html

<html lang="en">

<head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>if-else statement examples</title>
</head>

<body>
        <h2>If else statement example</h2>

        <script>
                let name = "Masai School";
                let age = 25;
                let isMarried = false;

                if (name == "Masai School") {
                        if (age == 25) {
                                if (isMarried === false) {
                                        console.log("You are allowed to enter!");
                                }
                        }
                }

                console.log("Done!");
        </script>
</body>

</html>

Explanation - In the above code, you can see that the if (isMarried === false) statement is nested inside the if (age == 25) statement, which is further nested inside the if (name == "Masai School") statement.

This is an example of nested if, where one if statement is nested inside another.

In this case, the outermost if statement is executed first. If it is true, then only the inner if statement is executed, and if it is also true, then the innermost if statement is executed.

In our example, the outer if statement is true because the value of the name is "Masai School". Similarly, both the nested if statements are also true because the value of age is 25 and isMarried is false.

Hence, we get the following output in the browser.

Output:

Nested If Else Statement

Similar to the nested if statements, we can also have nested if-else statements in JavaScript as well.

Consider the example below.

index.html

<html lang="en">

<head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>if-else statement examples</title>
</head>

<body>
        <h2>Nested If else statement example</h2>

        <script>
                let name = "Masai School";
                let age = 26;
                let isMarried = false;

                if (name == "Masai School") {

                        if (age == 26) {
                                console.log("You are eligible to enter.")
                        } else {
                                console.log("You are not eligible to enter.")
                        }
                } else {

                        if (isMarried == false) {
                                console.log("You are eligible to enter.")
                        } else {
                                console.log("You are not eligible to enter.")
                        }
                }

                console.log("Done!");
        </script>
</body>

</html>

Explanation - In the above code, we have used an if-else statement with the condition, name == "Masai School". Inside the if block, we have nested another if else statement with the condition, age == 25.

Similarly, the else block also has a nested if else statement with the condition, isMarried == false.

Here, initially, the condition of the outer if is checked, and it is true because the value of the name is "Masai School". Now, the code inside the if block is executed.

The inner if else of the if block is executed now. In this case, the value of age is 25, so the condition becomes true again. Hence we get the output "You are eligible to enter.".

In this example, the else block is ignored; however, if the condition was false, then the nested if else statement of the else block will have been executed.

Output

Conclusion

In this article, we learned about the conditional if-else statement in JavaScript. We also explored examples of various variations of if-else statements in JavaScript: if, if else, else if, and nested if else.

Modules

Module 1

Module 2

Module 3

Module 4