4.

Conditionals

Conditionals are an essential tool in programming. We need a way for our code to take different paths depending on some value.

For instance, let’s say we’re developing the visual part of a weather app and we have a value representing the temperature (a number). If it’s below a certain number, meaning it’s cold, we want to show it in blue. Otherwise, we want to show it in red. The condition is that the temperature is either below a certain number or not. Our two possible paths are: show the temperature in blue and show the temperature in red. For something with more conditions, let’s say we have the weather forecast, which can be “rain”, “clouds”, “sunny”, “snow”, or “thunderstorm”. For each of these values we want to show a different icon, so we actually have five different conditions.

A condition is an expression that results in a boolean value (either true or false), like we saw in the previous lesson. A conditional statement is when we use a condition to take different paths. Let’s look at two forms of conditional statements in JavaScript: if-else and the ternary operator.

if-else

if (condition) {
  console.log('the condition is true!');
}

The condition goes inside the round brackets after if. The code that we want to run if the condition is true goes in the curly brackets.

Just like in plain English, we can say “If I have less than 5 apples, then I should go buy some more.”

const apples = 2;
if (apples < 5) {
  console.log('I should go buy more apples.');
}

The condition is “I have less than 5 apples”. If that condition is true, then I should go buy some more. The condition “I have less than 5 apples” is either true or false, regardless of what I know about my apples (even if I haven’t checked how many apples I have in the kitchen). That’s the way it works with computers. The condition must be a boolean value. With the above code, the console.log line will only be executed if the condition is true.

If I instead want to catch the case where the above condition is false, I can check the opposite condition by negating it.

const apples = 2;
if (!(apples < 5)) {
  console.log('I have enough apples.');
}
const apples = 2;
if (apples >= 5) {
  console.log('I have enough apples.');
}

Both of the above blocks of code do the same thing.

There is an optional second part: the else. Instead of only handling the true path, we can handle the false path as well. Because the condition can only be true or false at the time of execution, only one of the paths will execute; never both.

const apples = 2;
if (apples < 5) {
  console.log('I should go buy more apples.');
} else {
  console.log('I have enough apples.');
}

Ternary operator

The ternary operator works a lot like the if-else statement, except it allows us to write an expression that results in a value. This is very useful, since we often want to obtain a resulting value depending on a condition.

There are three parts to the ternary operator expression: the condition, the true path value, and the false path value. It’s like a shortcut for the if-else statement (except the else is mandatory). The structure looks like this:

CONDITION ? TRUE-PATH-VALUE : FALSE-PATH-VALUE

Working with a similar example as before:

const apples = 2;
const message = (apples < 5) ? 'I should go buy more apples.' : 'I have enough apples.';
console.log(message);

Notice that in the above example we can store a new value depending on the condition. Why wouldn’t this work with if-else? Let’s see…

const apples = 2;
if (apples < 5) {
  const message = 'I should go buy more apples.';
} else {
  const message = 'I have enough apples.';
}
console.log(message); // ReferenceError: message is not defined

Running the above code results in an error because the scope of message is restricted to be inside the surrounding curly brackets.

Exercises

Top