Back

Activity 2.3 Branching with If/Else

Introduction

Activity 2.3

Branching with If/Else

Topics

Mutually Exclusive Conditions
Branching with else if and else statements

Mutually Exclusive Conditions

The last activity introduced us to the idea of controlling the flow of an application with if statements.

Each program had multiple if statements that execute if their conditions were true.

But what if you only want to execute one block of code out of a set of possibilities?

Mutually Exclusive Conditions

This code may output multiple letter grades.

1
let grade = 95;
2

3
// Curly braces omitted for brevity
4
if (grade >= 90)
5
    console.log("A");
6
if (grade >= 80)
7
    console.log("B");
8
if (grade >= 70)
9
    console.log("C");
10
if (grade >= 60)
11
    console.log("D");
12
if (grade < 60)
13
    console.log("F");

Mutually Exclusive Conditions

A grade of 95 would outout A, B, C, and D.

1
let grade = 95;
2

3
// Curly braces omitted for brevity
4
if (grade >= 90)
5
    console.log("A");
6
if (grade >= 80)
7
    console.log("B");
8
if (grade >= 70)
9
    console.log("C");
10
if (grade >= 60)
11
    console.log("D");
12
if (grade < 60)
13
    console.log("F");

Mutually Exclusive Conditions

Mutually exclusive conditions ensure only one selection is chosen from a list of possibilities.

These types of statements are also known as branching statements.

Branching with `else if` and `else` Statements

The if, else if, else structure is a way to control the flow of a program by executing exactly one block of code from a series of options.

It's used to handle mutually exclusive conditions, where only one outcome is possible.

Components of an `if`, `else if`, `else` structure

if: The first condition in the chain that is checked. You must always start with an if statement.
else if: A condition that is only checked if all preceding if or else if statements were false. You can have multiple else if statements.
else: An optional "catch-all" or "fallback" block that runs only if all preceding if and else if conditions were false.

`else` Statements

Simple Pass/Fail Checker

1
let grade = parseInt(prompt("Enter grade:"));
2

3
if (grade > 60) {
4
    console.log("Pass!");
5
}
6
else {
7
    console.log("Fail!");
8
}

1
Enter grade: 45 [Enter]
2
Fail!

1
Enter grade: 78 [Enter]
2
Pass!

`else` Statements

Simple Login Prompt

1
let password = prompt("Enter password:");
2
let secret = "secret123";
3

4
if (password == secret) {
5
    console.log("Access granted.");
6
}
7
else {
8
    console.log("Access denied.");
9
}

1
Enter password: secret123 [Enter]
2
Access granted.

1
Enter password: secretpassword [Enter]
2
Access denied.

`else if` Statements

Corrected Letter Grade Program

1
let grade = parseInt(prompt("Enter grade:"));
2

3
// braces ommitted for brevity
4
if (grade >= 90)
5
    console.log("A");
6
else if (grade >= 80)
7
    console.log("B");
8
else if (grade >= 70)
9
    console.log("C");
10
else if (grade >= 60)
11
    console.log("D");
12
else
13
    console.log("F");

1
Enter grade: 86 [Enter]
2
B

`else` Statements

Corrected Letter Grade Program

1
let grade = parseInt(prompt("Enter grade:"));
2

3
// braces ommitted for brevity
4
if (grade >= 90)
5
    console.log("A");
6
else if (grade >= 80)
7
    console.log("B");
8
else if (grade >= 70)
9
    console.log("C");
10
else if (grade >= 60)
11
    console.log("D");
12
else
13
    console.log("F");

1
Enter grade: 49 [Enter]
2
F

Key Terms

Branching Statements: Statements that allow a program to follow one of several possible paths of execution based on a condition. The if, else if, else structure is a type of branching statement.
else if: A keyword that introduces an additional condition. The else if block is only checked and executed if the preceding if or else if statements were all false.

Key Terms

else: A keyword that introduces a final, optional block of code. The else block acts as a "catch-all" and will execute if all preceding if and else if conditions were false.

'F' → Fullscreen

Objectives

Using if, else if, and else statements to create mutually exclusive conditions.

Activity Tasks

Create a new project named 2-3-branching-if-else.js.
Complete each task individually.

Task 1: Chinese Zodiac Calendar

Each birth year maps to one of twelve zodiac animals in a repeating cycle. To find the corresponding animal, use the formula birthYear % 12, which gives you a remainder between 0 and 11.
Tip: Once you've written you first else if copy and paste it to speed things up, just tweak the values as needed.

1
console.log("--- Chinese Zodiac Calendar ---");
2

3
let birthYear = parseInt(prompt("Enter your birth year: "));
4
let zodiacNumber = birthYear % 12;
5
let zodiacAnimal; // Assign animal based on birth year
6

7
if (zodiacNumber == 0) {
8
  zodiacAnimal = "monkey";
9
}
10
else if (zodiacNumber == 1) {
11
  zodiacAnimal = "rooster";
12
}
13
else if (zodiacNumber == 2) {
14
  zodiacAnimal = "dog";
15
}
16
else if (zodiacNumber == 3) {
17
  zodiacAnimal = "pig";
18
}
19
else if (zodiacNumber == 4) {
20
  zodiacAnimal = "rat";
21
}
22
else if (zodiacNumber == 5) {
23
  zodiacAnimal = "ox";
24
}
25
else if (zodiacNumber == 6) {
26
  zodiacAnimal = "tiger";
27
}
28
else if (zodiacNumber == 7) {
29
  zodiacAnimal = "rabbit";
30
}
31
else if (zodiacNumber == 8) {
32
  zodiacAnimal = "dragon";
33
}
34
else if (zodiacNumber == 9) {
35
  zodiacAnimal = "snake";
36
}
37
else if (zodiacNumber == 10) {
38
  zodiacAnimal = "horse";
39
}
40
else if (zodiacNumber == 11) {
41
  zodiacAnimal = "sheep";
42
}
43
else {
44
  // Exit if input was invalid (NaN)
45
  console.log("Something went wrong. Exiting.");
46
  Deno.exit();
47
}
48

49
console.log(`\nBirth year: ${birthYear} - You are the year of the...${zodiacAnimal}.\n`);
50

51
alert("Press enter to continue...");
52
//

Task 2: Simple Lottery Game

1
console.log("--- Chinese Zodiac Calendar ---");
2

3
let birthYear = parseInt(prompt("Enter your birth year: "));
4
let zodiacNumber = birthYear % 12;
5
let zodiacAnimal; // Assign animal based on birth year
6

7
if (zodiacNumber == 0) {
8
  zodiacAnimal = "monkey";
9
}
10
else if (zodiacNumber == 1) {
11
  zodiacAnimal = "rooster";
12
}
13
else if (zodiacNumber == 2) {
14
  zodiacAnimal = "dog";
15
}
16
else if (zodiacNumber == 3) {
17
  zodiacAnimal = "pig";
18
}
19
else if (zodiacNumber == 4) {
20
  zodiacAnimal = "rat";
21
}
22
else if (zodiacNumber == 5) {
23
  zodiacAnimal = "ox";
24
}
25
else if (zodiacNumber == 6) {
26
  zodiacAnimal = "tiger";
27
}
28
else if (zodiacNumber == 7) {
29
  zodiacAnimal = "rabbit";
30
}
31
else if (zodiacNumber == 8) {
32
  zodiacAnimal = "dragon";
33
}
34
else if (zodiacNumber == 9) {
35
  zodiacAnimal = "snake";
36
}
37
else if (zodiacNumber == 10) {
38
  zodiacAnimal = "horse";
39
}
40
else if (zodiacNumber == 11) {
41
  zodiacAnimal = "sheep";
42
}
43
else {
44
  // Exit if input was invalid (NaN)
45
  console.log("Something went wrong. Exiting.");
46
  Deno.exit();
47
}
48

49
console.log(`\nBirth year: ${birthYear} - You are the year of the...${zodiacAnimal}.\n`);
50

51
alert("Press enter to continue...");
52

53
// -----------------------------------------------------------------------------
54

55
console.log("\n--- Lottery Game ---\n");
56
console.log("Rules: Pick two lottery numbers ranging from 0 to 9");
57
console.log("Match two numbers and win BIG!");
58
console.log("Match one number in order and win SMALL!\n");
59

60
let lottoNum1 = parseInt(prompt("Enter your 1st lottery number (0 to 9): "));
61
let lottoNum2 = parseInt(prompt("Enter your 2nd lottery number (0 to 9): "));
62
let winningNum1 = Math.floor(Math.random() * 10);
63
let winningNum2 = Math.floor(Math.random() * 10);
64

65
// Exit the program if either lotto number is out of range
66
if (lottoNum1 < 0 || lottoNum1 > 9 || lottoNum2 < 0 || lottoNum2 > 9) {
67
  console.log("Error: Your lotto numbers are invalid. Exiting");
68
  Deno.exit();
69
}
70

71
console.log(`The winning numbers are ${winningNum1} and ${winningNum2}!`);
72

73
if (lottoNum1 == winningNum1 && lottoNum2 == winningNum2) {
74
  console.log("You win BIG!");
75
}
76
else if (lottoNum1 == winningNum1 || lottoNum2 == winningNum2) {
77
  console.log("You win SMALL!");
78
}
79
else {
80
  console.log("You lose! Better luck next time!");
81
}
82
//

Task 3: Bonus - Fix Lotto Number Check

Submitting empty input for each lotto number will still allow the game to proceed, since each value evaluates to NaN.
Modify the condition by adding two more logical OR expressions to check whether either lotto number is NaN using a function called isNaN(). Google it to see how it works.

Task 4: Bonus - Add Another Lotto Win Condition

create another win condition using another else if statement if the lotto numbers match out of order.

Sample Output

Your program output should something similar to the sample output below.

--- Chinese Zodiac Calendar ---
Enter your birth year:  1990

Birth year: 1990 - You are the year of the...horse.

Press enter to continue... [Enter]

--- Lottery Game ---

Rules: Pick a two lottery numbers ranging from 0 to 9
Match two numbers and win BIG!
Match one number in order and win SMALL!

Enter your 1st lottery number (0 to 9):  2
Enter your 2nd lottery number (0 to 9):  4
The winning numbers are 2 and 6!
You win SMALL!

Reflection Questions

You may write your reflection answers as comments at the bottom of your code.

How does using if, else if, else change the behavior of the program compared to using multiple, separate if statements? Describe a scenario where a separate if statement would be appropriate.
In the Chinese Zodiac program, the else block handles the case where the input is invalid. How does this demonstrate the role of the else statement as a "catch-all" or "fallback" in your code?

Submission

Submit your activity and reflection answers to the appropriate dropbox.

Activity 2.3 Branching with If/Else

Introduction

Activity 2.3

Branching with If/Else

Topics

Mutually Exclusive Conditions

Mutually Exclusive Conditions

Mutually Exclusive Conditions

Mutually Exclusive Conditions

Branching with else if and else Statements

Components of an if, else if, else structure

else Statements

Simple Pass/Fail Checker

else Statements

Simple Login Prompt

else if Statements

Corrected Letter Grade Program

else Statements

Corrected Letter Grade Program

Key Terms

Key Terms

Objectives

Activity Tasks

Task 1: Chinese Zodiac Calendar

Task 2: Simple Lottery Game

Task 3: Bonus - Fix Lotto Number Check

Task 4: Bonus - Add Another Lotto Win Condition

Sample Output

Reflection Questions

Submission

Activity Complete

Branching with `else if` and `else` Statements

Components of an `if`, `else if`, `else` structure

`else` Statements

`else` Statements

`else if` Statements

`else` Statements