JavaScript if else Statement

Summary: in this tutorial, you will learn how to use the JavaScript if else statement to execute a statement based on a specified condition.

Introduction to the JavaScript if else statement

The if statement is probably one of the most frequently used statements in JavaScript. The if statement executes a statement or block of code if a condition is satisfied. The following is the simple form of the if statement:

if( condition )
   statement;

The condition can be any valid expression. In general, the condition evaluates to a Boolean value, either true or false.

In case the condition evaluates to a non-Boolean value, JavaScript implicitly converts its result into a Boolean value by calling the Boolean() function.

If the condition evaluates to true, the statement is executed. Otherwise, the control is passed to the next statement that follows the if statement.

The following flowchart illustrates the if statement. The following example illustrates how to use the if statement:

let x = 25;
if( x > 10 )
    console.log('x is greater than 10');
Code language: JavaScript (javascript)

This example first initializes the variable x to 25.  The x > 10 expression evaluates to true, therefore the script shows a message in the console window.

In case you have more than one statement to execute, you need to use curly braces as follows:

if( condition ) {
   // statements
}
Code language: JavaScript (javascript)

It is a good programming practice to always use the curly braces even if there is only one statement to be executed. This helps the code easier to read and avoid many confusions.

See the following example:

if( condition )
   statement_1
   statement_2;

If you don’t use the curly braces, it will be difficult to see that the statement_2 does not belong to the if block.

In case you want to execute another statement when the condition evaluates to false, you use the else as follows:

if( condition ) {
  // statement
} else { 
  // statement (when condition evaluates to false)
}
Code language: JavaScript (javascript)

The following flowchart illustrates the if else statement. See the following example:

let x = 5;
if (x > 10) {
    console.log('x is greater than 10');
} else {
    console.log('x is less than or equal 10');
}
Code language: JavaScript (javascript)

You can chain the if else statements:

if (condition_1) {
   // statments
} else if (condition_2) {
  // statments
} else {
   // statments
}
Code language: JavaScript (javascript)

For example, the following script compares two numbers a and b, shows the corresponding message if a is greater than, less than, or equal to b.

let a = 10, 
    b = 20;
if (a > b) {
    console.log('a is greater than b');
} else if (a < b) {
    console.log('a is less than b');
} else {
    console.log('a is equal to b');
}
Code language: JavaScript (javascript)

If you chain many if else statements, the code will become hard to read and difficult to maintain. In such situations, you should use the switch statement.

JavaScript if else shortcut: conditional operator

JavaScript provides a conditional operator or ternary operator that can be used as a shorthand of the if else statement.

The following illustrates the syntax of the conditional operator.

condition ? expression_1 : expression_2

Like the if statement, the condition is an expression that evaluates to true or false.

If the condition evaluates to true, the operator returns the value of the expression_1; otherwise, it returns the value of the expression_2.

The following express uses the conditinal operator to return different labels for the login button based on the value of the isLoggedIn variable:

isLoggedIn ? "Logout" : "Login";
Code language: JavaScript (javascript)

Typically, you assign a variable the result of the ternary operator, like this:

// only register if the age is greater than 18
var allowRegister = age > 18 ? true : false;
Code language: JavaScript (javascript)

If you want to do more than a single operation per case, you need to separate operation using a comma (,) as the following example:

age > 18 ? (
    alert("OK, you can register."),
    redirectTo("register.html");
) : (
    stop = true,
    alert("Sorry, you are too young!")
);
Code language: JavaScript (javascript)

In this tutorial, you have learned how to use the JavaScript if else statement to execute a statement when a condition evaluates to true and execute another statement when the condition evaluates to false.