Control Flow

:dart: Learning Objectives

By the end of this lesson, you will be able to:

• Understand what control flow means in programming
• Write if statements to make decisions in your code
• Use if...else statements to create two different paths
• Chain multiple conditions using else if statements
• Read and trace through conditional code step by step

:information_source: Info What is Control Flow? Control flow is the order in which your computer reads and runs each line of code. It's like following a recipe - sometimes you do every step, and sometimes you skip steps based on what ingredients you have!

• Control flow is one of the most important concepts in programming but is also simple to understand.
• Just like how we read a page line-by-line from the top to the bottom, JavaScript codes also run from top to bottom in a step-by-step manner. We call this the sequential flow of a program.
• However, not always the program runs in a straightforward manner. Sometimes we want the program to skip some code when a certain condition isn't met, or repeatedly run a block of code a few times. JavaScript allows us to do that.

Conditional Statements

Similar to Scratch or MIT AI2, we can use if statements to create a conditional statement.

Basic If Statement

The most simplest and common syntax of the if statement looks like this:

if (condition) \{
    // statements to execute if true
\}

• If the condition is evaluated as true, all statements inside the pair of curly braces \{ \} will be executed.
• Else, if the condition is evaluated as false, all statements inside the pair of curly braces \{ \} will be skipped.

Example One: Condition is True

var age = 16;
if (age > 12) \{
    console.log("Greater than 12!");
\}
console.log("Just a number.");

Output:

Greater than 12!
Just a number.

What happens:

• A variable called "age" is declared with the value 16.
• The keyword if tells the computer to start the conditional statement.
• The condition (age > 12) inside the pair of round brackets is the condition to test.
• In this case it is true because 16 is greater than 12, the code contained inside the curly braces will run.
• Then, the program proceeds to run the code after the if statement, and executes the next console.log().

Example 2: Condition is False

var age = 11;
if (age > 12) \{
    console.log("Greater than 12!");
\}
console.log("Just a number.");

Output:

Just a number.

What happens:

• This time, the variable called "age" is 11.
• The condition (age > 12) is false because 11 is not greater than 12.
• Thus, the code inside the curly braces will be skipped.
• The program will proceed to run only the console.log() that was written after the if statement ends.

If...Else Statement

We can also run a block of code when the condition is evaluated to false by using the if...else statement.

Just add else with a pair of curly brackets at the end of the first closing bracket like this:

if (condition) \{
    // statements to execute when condition is true
\} else \{
    // statements to execute when condition is false
\}

If...Else Example

var age = 8;
if (age > 12) \{
    console.log("Greater than 12!");
\} else \{
    var diff = 12 - age;
    console.log(diff + " more years until 12.");
\}
console.log("Just a number.");

Output:

4 more years until 12.
Just a number.

What happens:

• A variable called "age" is declared with the value 8.
• The condition (age > 12) is false because 8 is not greater than 12.
• Because the condition is evaluated as false, the statement inside the curly braces for if (``age>12``){ ... } will be skipped. The statement inside the curly braces of else { ... } will run instead.
• There are two lines of statement inside the else block, the program will first set the variable "diff" to the difference between 12 and the age, then join it together with the string " more years until 12." with the + operator.
• The console.log("Just a number"); will run as usual because it is outside of the if and else block.

Else If Statement

The Problem with Nested If...Else

Continuing from the previous example, suppose we want to check if the age is less than 5 and when the age is not greater than 12, we can use what we called a nested if...else statement. For example:

var age = 8; // :(
if (age > 12) \{
    console.log("Greater than 12!");
\} else \{
    if (age < 5) \{
        console.log("Hey kid!");
    \} else \{
        console.log("Between 5 and 12");
    \}
\}
console.log("Just a number.");

However, as you can see the code gets harder to read and complicated writing this way! It is not wrong, just not the best way to code your logic.

The Solution: Else If

This is actually a pretty common code. So for this reason, JS provides a simpler way to do the same thing, just like nested if...else statements but better.

Introducing the else if statement:

if (condition1) \{
    // Run only this if condition1 is true
\} else if (condition2) \{
    // Run only this if condition2 is true
\} else \{
    // Run this if all conditions are false
\}

How Else If Works

Conditions are checked line-by-line from the top:

• First, the program checks on condition1. If condition1 is evaluated as true, only the statements inside condition1 will run, totally skipping all of the other conditions.
• If condition1 evaluates as false, then the program will continue by checking on the next condition, and so on. In this case, the next one is condition2.
• In the end, if no conditions are evaluated as true, then the else block will run.

You can have as many else if statements as you like to replace the if...else if...else statements.

Simplified Example

Thus, we can now simplify the code to this:

var age = 8; // :)
if (age > 12) \{
    console.log("Greater than 12!");
\} else if (age < 5) \{
    console.log("Hey kid!");
\} else \{
    console.log("Between 5 and 12");
\}
console.log("Just a number.");

Output:

Between 5 and 12
Just a number.

This is much cleaner and easier to read!

Key Concepts Summary

• Control flow determines the order in which statements are executed in a program
• If statements allow code to run conditionally based on whether a condition is true or false
• If...else statements provide alternative code paths for when conditions are not met
• Else if statements enable multiple condition checking in a clean, readable format
• Proper use of conditional statements makes code more logical and easier to follow