What Are the If Statements in JavaScript

In real life, we often encounter situations where we have to make decisions based on certain conditions. Such as deciding what cloth to wear based on the temperature.

If the temperature is high you could wear a T-shirt, and if the temperature is low, then you'll need a jacket.

If statement

You can express this logic in JavaScript with the if statement.

let temperature = "high";
 
if (temperature === "high") {
  console.log("Wear a T-shirt.");
}
 
if (temperature === "low") {
  console.log("Wear a jacket.");
}

Execute this code, and you should get the following output:

Wear a T-shirt.

If you set temperature to "low", a different string will be printed.

let temperature = "low";
 
if (temperature === "high") {
  console.log("Wear a T-shirt.");
}
 
if (temperature === "low") {
  console.log("Wear a jacket.");
}

Wear a jacket.

Let's take a closer look at the example and notice that the if statement has the following syntax:

if (<condition>) {
  <statement>
}

Where <condition> is a statement that is either true or false. The statement can be something more complex than an equality test (===).

For example, you could be more specific and define the temperature with numbers.

let temperature = 26;
 
if (temperature > 25) {
  console.log("Wear a T-shirt.");
}
 
if (temperature <= 25) {
  console.log("Wear a jacket.");
}

In this case, if the temperature is higher than 25, the first condition will return true, and the code block wrapped inside the curly braces ({}) will be executed.

Of course, you could have multiple statements inside the curly braces.

if (temperature > 25) {
  console.log("It's getting warm.");
  console.log("Wear a T-shirt.");
}
 
if (temperature <= 25) {
  console.log("It's getting cold.");
  console.log("Wear a jacket.");
}

If the temperature is lower than or equal to 25, the first if statement will be ignored, and the second one will execute.

It's getting cold.
Wear a jacket.

You can even do something more complex, such as adding a test for weather along with temperature by creating a nested structure.

let temperature = 28;
let weather = "raining";
 
if (temperature > 25) {
  console.log("It's getting warm.");
  console.log("Wear a T-shirt.");
 
  if (weather === "raining") {
    console.log("Bring an umbrella.");
  }
}

It's getting warm.
Wear a T-shirt.
Bring an umbrella.

Or combine them in one if statement using the logical operators, as long as the <condition> returns a Boolean value.

if (temperature > 25 && weather === "raining") {
  console.log("It's getting warm.");
  console.log("Wear a T-shirt.");
 
  console.log("Bring an umbrella.");
}

If else statement

The if else statement is an extension of if, which allows you to specify what to do when <condition> returns false.

All you need to do is add an else block afterward.

if (<condition>) {
   // Execute if <condition> returns true
} else {
   // Execute if <condition> returns false
}

If the logic you are trying to express is more complex, you can also chain multiple if else statements together like this:

if (<condition_1>) {
   // Execute if <condition_1> returns true
} else if (<condition_2>) {
   // Execute if <condition_2> returns true
} else {
   // Execute if neither <condition_1> nor <condition_2> returns true
}

Seem like it works just like our previous example, where we have multiple independent if statements.

But there is a crucial difference. With a if else chain, the order of the conditions matters.

When a condition is matched, the corresponding block will be executed, and then JavaScript will jump out of the if else statement, ignoring the other conditions.

Let's take a look at a more realistic example:

let temperature = 8;
 
if (temperature < 10) {
  console.log("Wear winter clothes.");
} else if (temperature < 25) {
  console.log("Wear a jacket.");
} else {
  console.log("Wear a T-shirt.");
}

Wear winter clothes.

Notice that even though the second <condition> also returns true in this case, JavaScript only executes the first code block, and the second condition is simply ignored.

But with multiple independent if statements, JavaScript will execute the code line by line, and the second if statement will also execute as long as the condition returns true.

let temperature = 8;
 
if (temperature < 10) {
  console.log("Wear winter clothes.");
}
 
if (temperature < 25) {
  console.log("Wear a jacket.");
}

Wear winter clothes.
Wear a jacket.