What Are the If Statements in JavaScript

1if (<condition>) {
2  <statement>
3}

Where <condition> is a statement that returns either true or false. The statement can be something more complex than a basic equality test (===). For example, you could specify the temperature using numbers.

1let temperature = 26;
2
3if (temperature > 25) {
4  console.log("Wear a T-shirt.");
5}
6
7if (temperature <= 25) {
8  console.log("Wear a jacket.");
9}

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.

1if (temperature > 25) {
2  console.log("It's getting warm.");
3  console.log("Wear a T-shirt.");
4}
5
6if (temperature <= 25) {
7  console.log("It's getting cold.");
8  console.log("Wear a jacket.");
9}

If the temperature is lower than or equal to 25, the second if statement will execute.

1It's getting cold.
2Wear a jacket.

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

1let temperature = 28;
2let weather = "raining";
3
4if (temperature > 25) {
5  console.log("It's getting warm.");
6  console.log("Wear a T-shirt.");
7
8  if (weather === "raining") {
9    console.log("Bring an umbrella.");
10  }
11}

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

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

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

If else statement

The if else statement is an extension of the if statement, which provides you with a way to write a code block that executes when <condition> returns false. All you need to do is add an else block afterward.

1if (<condition>) {
2  . . . // Execute if <condition> returns true
3} else {
4  . . . // Execute if <condition> returns false
5}

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

1if (<condition1>) {
2  . . . // Execute if <condition1> returns true
3} else if (<condition2>) {
4  . . . // Execute if <condition2> returns true
5} else {
6  . . . // Execute if <condition1> and <condition2> both return false
7}

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, it is important to note that the order of the conditions matters.

When JavaScript matches a condition, the corresponding code block will be executed, and then it will jump out of the if else statement, simply ignoring the other conditions.

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

1let temperature = 8;
2
3if (temperature < 10) {
4  console.log("Wear winter clothes.");
5} else if (temperature < 25) {
6  console.log("Wear a jacket.");
7} else {
8  console.log("Wear a T-shirt.");
9}

1Wear 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.

1let temperature = 8;
2
3if (temperature < 10) {
4  console.log("Wear winter clothes.");
5}
6
7if (temperature < 25) {
8  console.log("Wear a jacket.");
9}

1Wear winter clothes.
2Wear a jacket.