Conditional Statements

Go back to JavaScript Index

What are conditional statements?

Conditional statements checks if specified conditions are true and performs an action if so.

In JavaScript, there are two types of conditional statements (with some variations): if statements and switch statements.

The if statement

If statements exist in 3 variations: 1) if... 2) if... else and 3) if... else if... else. Let's have a look at each of them:

If...

if (condition) {
// Code block that runs if the condition evaluates to true;
}
1.0 | If statement syntax

If the condition evaluates to true, the code block will run - if it evaluates to false, it won't.

Let's look at this in connection with some of our previous examples:

let isSunny = true;
if (isSunny) {
console.log("I'm going outside");
}
1.1 | If statement

In this example, the code block inside the curly brackets will run, because isSunny translates to true. If you change the value to false, the code block inside the curly brackets won't run.

If... else...

Sometimes, we want something to happen if the condition evaluates to true, and something else if it evaluates to false. An example could be that you want to give the user positive feedback if he answers a given question correctly, and negative feedback if his answer is incorrect. To do this, we can use an if... else... statements:

if (condition) {
// Code block that runs if the condition evaluates to true;
} else {
// Code block that runs if the condition evaluates to false;
}
1.2 | If... else... statement syntax

Let's add an else... statement to our previous example:

let isSunny = true;
if (isSunny) {
console.log("I'm going outside");
} else {
console.log("I'm staying in")
}
1.3 | If... else... statement

Now, if the condition evaluates to true, the code block inside the first set of curly brackets will run. If it evaluates to false, the code block inside the second set of curly brackets will run.

If... else if... else...

If we want a third (or fourth or fifth) option, we may add one or more else if... statements to our if... statement:

if (condition 1) {
// Code block that runs if the first condition evaluates to true;
} else if (condition 2) {
// Code block that runs if the first condition evaluates to false, but the second evalutes to true
} else {
// Code block that runs if none of the conditions evaluates to true;
}
1.4 | If... else if... else... statement syntax

More operators

In connection with conditional statements we often find ourself needing more operators that make it possible for us to compare expressions in different ways.

An example: To login to a website, you most often have to fill in two input fields: username and password - if they match, you get to log in, if not you will get an error message stating that something is off.

Comparison operators

To compare expressions, you may use one of the following comparison operators:

< less than

<= less than or equal to

> greater than

>= greater than or equal to

== equal to

=== strictly equal to

!= not equal to

!== strictly not equal to

Let's have a look at an example

let hour = 8;
if (hour < 9) {
console.log("Not time for school yet");
} else if (hour > 15) {
console.log("Done for the day!")
} else {
console.log("Time for school!")
}
1.5 | The use of comparison operators

Logical operators

We may also want to look at more expressions to see if they match - or if just one of them does. To do that, we use logical operators:

&& logical and

|| logical or

! logical not

When using &&, both of the expressions have to evaluate to true in order for the condition to evaluates to true.

When using ||, at least one of the expressions have to evaluate to true, in order for the condition to evaluate to true.

The sign ! converts the boolean to value.

Let's have a look at an example:

let isTired = true;
let isHungry = true;
if (!isTired && !isHungry) {
console.log("Do something");
}
1.6 | Use of logical operator

The code block in the example above will run, if the value of both the isTired and the isHungry variables is false! So... will it run?

Here's another example:

let x = 3;
let y = 4;
if (x < 4 || y === 4 ) {
console.log("Something");
} else {
console.log("Something else")
}
1.7 | True or false?

In the example above, the first code block will run if x is less than 4 or y is strictly equal to 4, and the second code block will run if that is not the case. So... which code block will run?

Truth tables

In order to get a better understanding of how it works, truth tables may help:

&& truth table

aba && b
TTT
FTF
TFF
FFF

First case: If a is true and b is true, the expression evaluates to true.

Second case: If a is false, but b is true, the expression evaluates to false.

Third case: If a is true, but b is false, the expression evaluates to false.

Fourth case: If a is false and b is false, the expression evaluates to false.

|| truth table

aba || b
TTT
FTT
TFT
FFF

First case: If a is true and b is true, the expression evaluates to true.

Second case: If a is false, but b is true, the expression evaluates to true.

Third case: If a is true, but b is false, the expression evaluates to true.

Fourth case: If a is false and b is false, the expression evaluates to false.

! truth table

a!a
TF
FT

First case: If a is true, the expression evaluates to false

Second case: If a is false, the expression evaluates to true.

The switch statement

The switch statement provides us with an alternative syntax when more directions are available:

let season = "spring";
switch (season) {
case "winter":
console.log("It's so cold! I'm freezing!");
break;
case "spring":
console.log("Yay! It's my favorite season");
break;
case "summer":
console.log("It's so hot!");
break;
case "fall":
console.log("Look! The leaves are falling.");
break;
default:
console.log("Oops! I don't know what season it is!")
}
1.8 | Switch statement

In the example above, the switch statement looks at the value of the season variable. If the value of the season variable is set to "winter", the code block stated in the first case will run; if the value of the season variable is set to "spring", the code block stated in the second case will run; an so on.

When JavaScript sees a break, it breaks out of the switch statement which means that it will not go through the rest of the cases to see if they match, if it has already found the one that matches.

Next up

Most often, we don't want our script to execute right away and that is why we are going to look at functions next.

Next up: Functions