JavaScript if…else Statement

JavaScript if else: In this tutorial, you will learn about the if…else statement to make decision making programs with the help of examples.

In computer programming, there may emerge a circumstance where you need to run a square of code among more than one other option. For instance, assigning grades A, B, or C based on marks obtained by a student.

In such circumstances, you can use the JavaScript if…else proclamation to make a program that can decide.

---

In JavaScript, there are three forms of the if…else statement.

1. if statement

2. if…else statement

3. if…else if…else statement

---

JavaScript if Statement

The syntax of the if the statement is:

if (condition) {
    // the body of if
}

The if statement evaluates the condition inside the parenthesis ().

1. If the condition is evaluated to true, the code inside the body of if is executed.
2. If the condition is evaluated to false, the code inside the body of if is skipped.

Note: The code inside { } is the body of the if statement.

• 

---

Example 1: if Statement

// check if the number is positive

const number = prompt("Enter a number: ");

// check if number is greater than 0
if (number > 0) {
 // the body of the if statement
  console.log("The number is positive");
}

console.log("The if statement is easy");

Output 1

Enter a number: 2
The number is positive
The if statement is easy

Assume the user entered 2. For this situation, the condition number > 0 evaluates to true. Also, the body of the if the statement is executed.

Output 2

Enter a number: -1
The if statement is easy

Assume the user entered – 1. For this situation, the condition number > 0 evaluates to false. Consequently, the body of the if the statement is skipped.

Since console.log(“The if statement is easy”); is outside the body of the if statement, it is constantly executed.

Comparison and logical operators are used in conditions. So to learn more about comparison and logical operators, you can visit JavaScript Comparison and Logical Operators.

---

JavaScript if…else statement

An if statement can have a discretionary else clouse. The syntax of the if…else proclamation is:

if (condition) {
    // block of code if condition is true
} else {
   // block of code if condition is false
}

The if..else statement evaluates the condition inside the parenthesis.

If the condition is evaluated to true,

1. the code inside the body of if is executed

2. the code inside the body of else is skipped from execution

If the condition is evaluated to false,

1. the code inside the body of else is executed

2. the code inside the body of if is skipped from execution

• 

---

Example 2 : if…else Statement

// check is the number is positive or negative/zero

const number = prompt("Enter a number: ");

// check if number is greater than 0
if (number > 0) {
  console.log("The number is positive");
}
// if number is not greater than 0
else {
  console.log("The number is either a negative number or 0");
}

console.log("The if...else statement is easy");

Output 1

Enter a number: 2
The number is positive
The if...else statement is easy

Assume the user entered 2. For this situation, the condition number > 0 evaluates to true. Thus, the body of the if statement is executed and the body of the else statement is skipped.

Output 2

Enter a number: -1
The number is either a negative number or 0
The if...else statement is easy

Assume the user entered – 1. For this situation, the condition number > 0 evaluates to false. Subsequently, the body of the else statement is executed and the body of the if statement is skipped.

---

JavaScript if…else if statement

The if…else statement is used to execute a block of code among two alternatives. However, if you need to make a choice between more than two alternatives, if…else if…else can be used.

The syntax of the if…else if…else statement is:

if (condition1) {
    // code block 1
} else if (condition2){
    // code block 2
} else {
    // code block 3
}

• If condition1 evaluates to true, the code block 1 is executed.
• If condition1 evaluates to false, then condition2 is evaluated.
• If the condition2 is true, the code block 2 is executed.
• If the condition2 is false, the code block 3 is executed.

• 

---

Example 3: if…else if Statement

// check if the number if positive, negative or zero
const number = prompt("Enter a number: ");


// check if number is greater than 0
if (number > 0) {
    console.log("The number is positive");
}
// check if number is 0
else if (number == 0) {
  console.log("The number is 0");
}
// if number is neither greater than 0, nor zero
else {
    console.log("The number is negative");
}

console.log("The if...else if...else statement is easy");

Output

Enter a number: 0
The number is 0
The if...else if...else statement is easy

Assume the user entered 0, at that point the primary test condition number > 0 evaluates to false. At that point, the subsequent test condition number == 0 evaluates to true and its relating block is executed.

---

Nested if…else Statement

You can also use an if…else statement inside of an if…else statement. This is known as nested if…else statement.

Example 4: Nested if…else Statement

// check if the number is positive, negative or zero
const number = prompt("Enter a number: ");

if (number >= 0) {
    if (number == 0) {
        console.log("You entered number 0");
    } else {
        console.log("You entered a positive number");
    }
} else {
    console.log("You entered a negative number");
}

Output

Enter a number: 0
You entered number 0

Assume the user entered 5. For this situation, the condition number >= 0 assesses to valid, and the control of the program goes inside the external if proclamation.

At that point, the test condition, number == 0, of the internal if the proclamation is evaluated. Since it’s false, the else proviso of the internal if statement is executed.

Note: As you can see, nested if…else makes your logic complicated. If conceivable, you ought to consistently attempt to evade nested if…else.

---

Body of if…else With Only One Statement

If the body of if…else has only one statement, you can omit { } in the program. For example, you can replace

const number = 2;
if (number > 0) {
    console.log("The number is positive.");
} else {
   console.log("The number is negative or zero.");
}

With

const number = 2;
if (number > 0)
    console.log("The number is positive.");
 else 
   console.log("The number is negative or zero.");

The output of both programs will be the same.

Output

The number is positive.

Note: Although it’s not necessary to use { } if the body of if…else has only one statement, using { } makes your code more readable.

---

More on Decision Making

In specific circumstances, a ternary operator can supplant an if…else statement.

If you need to settle on a decision between more than one choices dependent on a given test condition, the switch statement can be used.

---

Thanks for reading! We hope you found this tutorial helpful and we would love to hear your feedback in the Comments section below. And show us what you’ve learned by sharing your photos and creative projects with us.

JS Control Flow