JavaScript if, else and else if Statements

In JavaScript, to control the flow of your program or script based on conditions, we can use the if...else conditional statements. The if and else conditional statement works just like they are used in real worl while communicating. For example, see the following statement, if you score more than 40% marks you will pass the exam else you will fail in the exam, here the condition is score more than 40%, if it's true then you pass, if it is false then you fail.

In JavaScript, if is a conditional statement that is used to control the program flow just like in C, C++, etc programming languages. It is one of the most basic and simplest way to control the flow of program based on conditions. You can use the if statement when we want to execute code statements only when a particular condition is true.

The condition for the if statement is enclosed within the parenthesis immediately after the if keyword.

JavaScript if: Syntax and Use

Below we have the basic syntax for using the if statement in the JavaScript code.

if(<EXPRESSION>)
{
    // block of statements
}

The condition passed with the if statement is mostly an expression that can have comparison of two values, any expression returning boolean output true/false, or any other expression. Also, the condition will be satisfied when the expression returns true or any positive numeric value, and in that case, the block of code statements enclosed within the curly braces below the if statement will be executed.

JavaScript if Example

In this example, we are using if statement and the if block will be executed only if the expression is true.

Now let's see how does the combination of if...else block works in JavaScript.

JavaScript if...else: Syntax and Use

JavaScript if statement lets you to create a code block with a condition and if the specified condition is true then code statements written inside the if block will get executed. The else statement also creates a code block that is only executed when the specified condition in the if statement is false.

if(<EXPRESSION>)
{
    // if block
}
else
{
    // else block
}

The else statement is always used along with the if statement right after the if block. We cannot provide a condition/expression with the else statement like we do with the if statement.

JavaScript if...else Example

In this example, we will be using an else block along with and if statement and block.

Now that we have learned how to use if...else statements, we can make our script execute different code statements based on different conditions. But wait, what if we have more than one condition in our logic, then? Should we use multiple if blocks? The answer to this is covered in the next section.

JavaScript if…else if: Syntax and Use

JavaScript else if statement is used along with the if statement to define multiple different conditions and code blocks. When we have to implement multiple conditions in our script then we can use the if, else if and else statements in our code. The else if statement is used between the if and else statement, where else is not mandatory.

Below we have the basic syntax of using else if along with if and else statements.

if(EXPRESSION1)
{
    // if block
}
else if(EXPRESSION2)
{
    // else if block
}
else if(EXPRESSION3)
{
    // another else if block
}
else
{
    // else block
}

We can have as many else if block as we want after the if statement. Also, having an else block at the end is optional.

JavaScript if...else if Example

In this example, we will be using if and else if statement to test multiple conditions.

And with this, we have finished the JavaScript flow control basics and now we know how we can implement condition-based code execution in our JavaScript code. For example, if you want to write a simple script where you have an HTML form and you ask the user to provide their details like name and gender. Then based on what they enter, you can show a custom message for different gender or similarly based on any other set of conditions you can perform different operations in your user interface using JavaScript.