Launch your career in tech, no matter your educational background. Pay after placement of 5,00,000/- or more, else learn at no cost.

Prepleaf

Masai 0NE

Starting your journey in tech, or looking to take the next step in your developer journey, if you are a working professional with an ambition, we will invest in your future.

design shift

MasaiX.

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.

Masai Learn - If Else in JavaScript

%s - Masai Learn

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.


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.

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**
![image6.png](https://masai-website-images.s3.ap-south-1.amazonaws.com/image6_58218c10c7.png)


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** 
```<!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 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**
![image2.png](https://masai-website-images.s3.ap-south-1.amazonaws.com/image2_8b6dd6f950.png)


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**
```<!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 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**
![image3.png](https://masai-website-images.s3.ap-south-1.amazonaws.com/image3_2aa54927b2.png)


We can also add extra conditions with if-else using else if statements in between if and else. \
\
Consider the syntax shown below. \
\
**Syntax:**
```if ( condition ) {
    …
} else if ( condition-2){
    …
} else {
    …
}
```
\
Let's see an example. \
\
**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 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**
![image5.png](https://masai-website-images.s3.ap-south-1.amazonaws.com/image5_e896b5a648.png)

\
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** 
```if ( condition-1) {
    …
} else if ( condition-2){
    …
} else if ( condition-3) {
   …
} else if ( condition-4) {
    …
} else {
    …
}
```

A nested if statement includes other if statements inside it. For example,\
\
**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 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:**
![image1.png](https://masai-website-images.s3.ap-south-1.amazonaws.com/image1_ec5d3b4154.png)



Similar to the nested if statements, we can also have nested if-else statements in JavaScript as well. \
\
Consider the example below. \
\
**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>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**
\
![image4.png](https://masai-website-images.s3.ap-south-1.amazonaws.com/image4_bf5db636fe.png)


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.