5.4. Conditionals¶

5.4.1. if Statements¶

The most basic form of a conditional is an if statement. Here's how to create one in JavaScript:

Let's look at each component of this new syntax.

• The if statement consists of a header line and a body. The header line begins with the keyword if followed by a boolean expression enclosed in parentheses.
• condition is a boolean expression (an expression that evaluates to either true or false).
• The statements that follow the condition, within { }, make up a code block. The code within the brackets { } will be executed if the condition evaluates to true. If the condition evaluates to false, the code within the brackets is ignored.

Here is an explicit example that mimics our banking program.

1let billHasBeenPaid = false;
2
3if (!billHasBeenPaid) {
4   console.log("Your bill is due soon!");
5}

Your bill is due soon!

The message prints because billHasBeenPaid is false, so !billHasBeenPaid evaluates to true. If we were to change the value of billHasBeenPaid to be true, then !billHasBeenPaid would evaluate to false and the code block would not execute.

The condition in an if statement can be any boolean expression, such as name === 'Jack' or points > 10 (here, name and points are variables). Additionally, the code block associated with a conditional can be of any size. This conditional has a code block with two lines of code:

1if (num % 2 === 0 && num > 3) {
2   console.log(num, "is even");
3   console.log(num, "is greater than 3");
4}

While not required, the code within a conditional code block is typically indented to make it more readable. Similarly, it is a common convention to place the opening { at the end of the first line, and the closing } on a line of its own following the last line of the code block.

You should follow such conventions, even though ignoring them will not create an error. To see why, compare the readability of this example, which is functionally equivalent to the one above.

1if (num % 2 === 0 && num > 3)
2{ console.log(num, "is even");
3 console.log(num, "is greater than 3"); }

Aside from being more aesthetically pleasing, the first version also makes it easier to visually identify the pair of matching curly brackets, which helps prevent syntax errors.

1if (!billHasBeenPaid)
2   console.log("Your bill is due soon!");

5.4.2. else Clauses¶

An else clause can be paired with an if statement to specify code that should be executed when the condition is false.

We can use an else clause within our bank app to send a message if no bills are currently due.

1let billHasBeenPaid = true;
2
3if (!billHasBeenPaid) {
4   console.log("Your bill is due soon!");
5} else {
6   console.log("Your payments are up to date.");
7}

Your payments are up to date.

This structure is known as an if-else statement, and it provides a mechanism for branching. The flow of the program can take one of two paths when it reaches a conditional, depending on whether the condition is true or false.

5.4.3. else if Statements¶

If-else statements allow us to construct two alternative paths. A single condition determines which path will be followed. We can build more complex conditionals using an else if clause. These allow us to add additional conditions and code blocks, which facilitate more complex branching.

 1let x = 10;
 2let y = 20;
 3
 4if (x > y) {
 5   console.log("x is greater than y");
 6} else if (x < y) {
 7   console.log("x is less than y");
 8} else {
 9   console.log("x and y are equal");
10}

x is less than y

Let's summarize the flow of execution of this conditional:

1. Line 4 begins the conditional. The boolean expression x > y evaluates to false, since 10 is not greater than 20. This causes line 5 to be skipped.
2. Line 6 contains an else-if statement. The boolean expression x < y evaluates to true, since 10 is less than 20. This triggers the execution of line 7.
3. The code block associated with the else clause on lines 8-10 is skipped, because one of the conditions above was true.

As with a simple if statement, the else clause is optional in this context as well. The following example does not print anything, since both conditions evaluate to false and there is no else clause.

1let x = 10;
2let y = 10;
3
4if (x > y) {
5    console.log("x is greater than y");
6} else if (x < y) {
7    console.log("x is less than y");
8}

We can construct conditionals using if, else if, and else with a lot of flexibility. The only rules are:

1. We may not use else or else if without a preceding if statement.
2. else and else if clauses are optional.
3. Multiple else if statements may follow the if statement, but they must precede the else clause, if one is present.
4. Only one else clause may be used.

Regardless of the complexity of a conditional, no more than one of the code blocks will be executed.

 1let x = 10;
 2let y = 20;
 3
 4if (x > y) {
 5   console.log("x is greater than y");
 6} else if (x < y) {
 7   console.log("x is less than y");
 8} else if (x % 5 === 0) {
 9   console.log("x is divisible by 5");
10} else if (x % 2 === 0) {
11   console.log("x is even");
12}

x is less than y

Even though both of the conditions x % 5 === 0 and x % 2 === 0 evaluate to true, neither of the associated code blocks is executed. When a condition is satisfied, the rest of the conditional is skipped.

5.4.4. Check Your Understanding¶

1let a = 7;
2if (a % 2 === 1) {
3   console.log("Launch");
4} else if (a > 5) {
5   console.log("Code");
6} else {
7   console.log("LaunchCode");
8}