Javascript if else Statements

In this tutorial, you will learn about the javascript if else statements with the help of multiple examples.

In a programming language if else conditional statements are used to make decisions inside the program.

Let’s understand this with an example, suppose we have a number and we want to check whether it is positive, negative, or zero.

So in this case, we’ll use JavaScript if…else statement to create a program that will make the decision for us.

In javascript, we have the following three forms of if..else statement.

1. If statement

2. If…else statement

3. If…else if…else statement

If statement in javascript specifies a single block of code to be executed if a condition is true.

The syntax of if statement is : 

if (condition) {
    // Code
}

1. if the condition inside the parenthesis () evaluates to true, the code inside the if block is executed.

2. if the condition inside the parenthesis () evaluates to false, the code inside the if block is skipped from execution.

Note: braces { // Your Code } are used to make code blocks.

// input number
const number = prompt(“Enter a number: “);
// check if the number is positive
if (number > 0) {
    console.log(“Number is positive”);
}

Output

Enter a number: 5
Number is positive

If a user entered 5 which is a positive number. So in this case the condition number > 0 evaluates to true. And, the if block is executed which prints “Number is positive” on the console.

Different comparison and logical operators are used in conditions. Visit JavaScript Comparison and Logical Operators to learn more.

The If statement can have an optional else clause that adds another code block to run when the if condition evaluates to false.

The syntax of if…else statement is :

if (condition) {
    // block of code to be executed if the condition is true
} else {
    // block of code to be executed if the condition is true
}

1. if the condition inside the parenthesis () evaluates to true, the code inside the if block is executed.

2. if the condition inside the parenthesis () evaluates to false, the code inside the else block is executed.

// input number
const number = prompt(“Enter a number: “);
// check if the number is positive
if (number > 0) {
    console.log(“Number is positive”);
}
// if the number is not positive
else {
    console.log(“Number is not positive”);
}

Output

Enter a number: 5
Number is positive

If a user entered 5 which is a positive number. So in this case the condition number > 0 evaluates to true. And, the if block is executed which prints “Number is positive” on the console.

Output 2

Enter a number: -2
Number is not positive

If a user entered -2 which is a negative number. So in this case the condition number > 0 evaluates to false. And, the else block is executed which prints “Number is not positive” on the console.

If you want to have multiple conditions with multiple code blocks, then in this situation you can use if…else if statement.

The syntax of if…else if…else is:

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

1. If condition1 evaluates to true, code block 1 is executed.

2. If condition1 evaluates to false, then condition2 is evaluated.

3. If condition2 evaluates to true, code block 2 is executed.

4. If condition2 evaluates to false, code block 3 is executed.

// input number
const number = prompt(“Enter a number: “);
// check if the number is positive
if (number > 0) {
    console.log(“Number is positive”);
}
// check if the number is 0
else if (number == 0) {
    console.log(“Number is 0”);
}
// if number is negative
else {
    console.log(“Number is negative”)
}

Output

Enter a number: 0
Number is 0

If a user entered 0. So in this case the condition number > 0 evaluates to false. Then, the second condition number == 0 evaluates to true and its corresponding code block is executed which prints “Number is 0” on the console.

We can also add an if…else statement inside another if…else statement. These types of statements are called nested if…else statements.

// input number
const number = prompt('Enter a number: ');
if (number >= 0) {
    // check if the number is 0
    if (number == 0) {
        console.log("Number is 0");
    }
    // if the number is positive
    else {
        console.log("Number is positive");
    }

}
// if number is negative
else {
    console.log("Number is negative");
}

Output

Enter a number: 2
Number is positive

If a user entered 2 which is a positive number. So in this case the condition number >= 0 evaluates to true. And, the control of the program moves to the inner if…else statement.

Then, the condition, number == 0 of the inner if…else statement is evaluated. As it is false, the else block of the inner if statement is executed which prints “Number is positive” on the console.

Note: Nested if...else statement increases the complexity of your program so you should try to avoid using nested if...else statements whenever possible.

If…else Statements Without Braces

If the blocks of if…else statement have only one statement, then you can omit braces () in your program. For example,

You can write

const number = 5;
if (number > 0) {
    console.log("Number is positive.");
} else {
   console.log("Number is not positive");
}

as

const number = 5;
if (number > 0)
    console.log("Number is positive.");
else
    console.log("Number is not positive");