Learn to use JavaScript if .. else and else if With 3 Demos

Learn to use JavaScript if .. else and else if With 3 Demos

The if statement of JavaScript

The if statement comes when you have to decide to execute the specific block of code based on certain condition(s). Or you can say, where there are multiple options and only one can be executed based on a condition, the JS if statement plays its role.

See an if else example

If the given condition is true in the if statement, the block of code will execute within the curly braces. How to use the if statement and where to place the block of code is explained below.

How to use the if statement?

Following is the general syntax of using JavaScript if statement:

If (condition_here) {

//Code to be executed if the condition is true

}

You can see, the if keyword is followed by the condition in brackets. If the condition is true, the statements within the curly braces will execute.

What if the condition is false? This is where the JavaScript if…else part will come, as explained in the following section.

Syntax of if…else

The else statement is used to execute a block of code if the condition in the if part is false. If the condition is false the code inside the else statement (within curly braces) will execute. See the syntax below for if else JavaScript:

If (condition_here) {

//Code to be executed if condition is true

}

else {

//if condition is false this block of code will be executed

}

As we learned the general syntax of simple JavaScript’s if and if..else, it is time to see some examples online.

The if statement example

Following is a basic example of the if statement. We are simply using a numeric variable and assigned it a value, 20.

In the if statement, we will simply check if the number is less than or equal to 20. After that, it will show an alert if the condition is true. Click the following link or image to see it online with code.

JavaScript if statement

Experience this example online

Note that, for simplification, we used JavaScript if statement during document loading.

An if else example

Following is an if else example. We are using the same code as in above example along with adding the JS else section. If numeric variable’s value is less than or equal to 20 then the condition in the if part will be true and it will execute the statement in the if block. Otherwise, if the variable value is greater than 20 the condition will be false and JavaScript else part will be executed (which is an alert in this example).

Otherwise, if the variable value is greater than 20 the condition will be false and else part will be executed (which is an alert in this example).

Experience this example online

You can see, the else part is executed in the if else statement as variable’s value is 25, which is greater than given in the if condition.

The else if statement

In the above section, we learned how to use the if statement for only two options. Either it will be true or false. If true, the if part will execute the code, otherwise, the else part will execute.

What if you have more than two options. For example, if the color is green then do this, if black then do this and if the color is white then this and so on.  This is where the else if statement plays its role, where you have more conditions and the different block of code to execute for each condition.

In the following section, you can see an example of using the else if JavaScript but let us first look at its syntax.

The else if syntax

Following is the general syntax of using JavaScript else if statement:

If (condition_here) {

//Code to be executed if the condition is true

}

else if {

//Code to be executed if the second condition is true

}

else if {

//Code to be executed if the third condition is true

}

else {

//if none of the condition is true then this part will be executed

}

JavasSript else if example

Following is an example of using JavaScript else if statement. You can see in the example, a dropdown with color options and a button. As you choose a color and press the button, the JavaScript function will show an alert with chosen color and also it will change the color of the paragraph.

All this is handled by if…else if and else statements, in the “colorfunc” function.

JavaScript if else

Experience this example online

You can see, after choosing the color as you press the button, the JavaScript function is called. The function contains the if statement. Three colors are handled in else if statements that will show an alert and also change the color of text. Lastly, we used Javascript else that will show an alert and change the text color to green.

Lastly, we used the else statement that will show an alert and change the text color to green.

Until now you should have a good idea of how if statement works. To make the decision and performing some action for multiple options you can also use the Javascript switch statement. Go to its own chapter to learn, how to use the switch statement.