JS If Else

In this tutorial topic, you will understand how to write the decision-making code in JavaScript using the ‘if...else’ and ‘...else if’ conditional statements.

JavaScript Conditional Statements

JavaScript is just like many other programming languages that allow you to write code that performs different actions based on the results of logical or comparative test conditions at run time. This implies test conditions can be created in the form of expressions that evaluates either true or false and based on these results you can perform certain actions.

In JavaScript, several conditional statements can be used to make decisions. They are:

• The if statement
• The if...else statement
• The if...else if....else statement
• The switch...case statement
   

The if Statement

The ‘if’ statement which is one of the simplest JavaScript conditional statements is used to execute a block of code only if the specified condition evaluates to true. This statement can be written like this:

if(condition) { 
    // Code to be executed 
}

The following instance, "Have a nice weekend!" will be the returned output, if the current day was Friday.

var now = new Date();
var dayOfWeek = now.getDay(); // Sunday - Saturday : 0 - 6

if(dayOfWeek == 5) {
    alert("Have a nice weekend!");
}

Try with example

The if...else Statement

To enhance the decision-making capabilities of your JavaScript program you can provide a choice by adding an else statement to the if statement.

The ‘if...else’ statement permits the execution of one block of code if the specified condition evaluates to true and another block of code if it evaluates to false. It can be written, like this:

if(condition) { 
    // Code to be executed if condition is true 
} else { 
    // Code to be executed if condition is false 
}

In the following instance, the JavaScript code will output "Have a nice weekend!" if the current day is Friday, otherwise, the output will be "Have a nice day!".

var now = new Date();
var dayOfWeek = now.getDay(); // Sunday - Saturday : 0 - 6

if(dayOfWeek == 5) {
    alert("Have a nice weekend!");
} else {
    alert("Have a nice day!");
}

Try with example

The if...else if...else Statement

The ‘if...else if...else’ is a special statement that is used to combine multiple if...else statements.

if(condition1) {

     // Code to be executed if condition1 is true 

} else if(condition2) {

     // Code to be executed if the condition1 is false and condition2 is true 

} else {

     // Code to be executed if both condition1 and condition2 are false 

}

The JavaScript code in the following instance will output "Have a nice weekend!" if the current day is Friday, and "Have a nice Sunday!" if the current day is Sunday, the return output will be "Have a nice day!"

var now = new Date();
var dayOfWeek = now.getDay(); // Sunday - Saturday : 0 - 6

if(dayOfWeek == 5) {
    alert("Have a nice weekend!");
} else if(dayOfWeek == 0) {
    alert("Have a nice Sunday!");
} else {
    alert("Have a nice day!");
}

Try with example

In the next chapter, you will learn about the JavaScript switch-case statement. 

The Ternary Operator

The ternary operator uses a shorthand way of writing the ‘if...else’ statements and it is represented by the question mark ‘?’ symbol, and It takes three operands:

• A condition to check
• A result of true
• A result of false

Syntax:

var result = (condition) ? value1 : value2

If the condition evaluates to true the value1 will be returned, if not value2 will be returned. To understand how this operator works, consider the following examples:

var userType;
var age = 21;
if(age < 18) {
    userType = 'Child';
} else {
    userType = 'Adult';
}
alert(userType); // Displays Adult

Try with example

The same code could be written in a more compact way using the ternary operator:

Example:

var age = 21;
var userType = age < 18 ? 'Child' : 'Adult';
alert(userType); // Displays Adult

Try with example
 

From the example above, the specified condition evaluates to false then the value on the right side of the colon (:) is returned, which is the string 'Adult'.

Tip: Code written using the ternary operator can be hard to read sometimes. Moreover, it provides a great way to write compact if-else statements.