JS If…Else

JavaScript Conditional Statements

Similar to many other programming languages, JavaScript lets you write code that performs different actions based on logical or comparative test conditions during runtime. This means you can create test conditions in the form of expressions that evaluate to either true or false, and based on these results, you can carry out specific actions.

In JavaScript, there are several conditional statements you can use to make decisions:

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

We will explore each of these statements in detail in the upcoming sections.

The if Statement

The if statement is used to run a block of code only if the specified condition is true. This is the simplest of JavaScript's conditional statements and can be written like this:

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

The following example will display "Have a nice weekend!" if the current day is Friday:

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

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

The if...else Statement

You can improve the decision-making abilities of your JavaScript program by adding an else statement to the if statement, providing an alternative choice.

The if...else statement lets you execute one block of code if the specified condition is true and another block of code if the condition is 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
}

The JavaScript code in the following example will display "Have a nice weekend!" if the current day is Friday; otherwise, it will display "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!");
}

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

The if...else if...else statement 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 condition1 is false and condition2 is true
} else {
    // Code to be executed if both condition1 and condition2 are false
}

The following example will display "Have a nice weekend!" if the current day is Friday, "Have a nice Sunday!" if the current day is Sunday, otherwise it will display "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!");
}

You will learn about the JavaScript switch-case statement in the next chapter.


The Ternary Operator

The ternary operator offers a shorthand way of writing if...else statements. The ternary operator is denoted by the question mark (?) symbol and requires three parts: a condition to evaluate, a result for true, and a result for false. Its basic syntax is:

var result = (condition) ? value1 : value2

If the condition evaluates to true, value1 will be returned; otherwise, 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

Using the ternary operator, the same code can be written in a more compact form:

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

As shown in the example above, since the specified condition evaluated to false, the value on the right side of the colon (:) is returned, which is the string 'Adult'.

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