1. Introduction

Goal of the tutorial

This tutorial aims to introduce the concept of flow control in JavaScript. Flow control is a fundamental concept in any programming language that deals with the order in which the lines of code are executed.

What you will learn

By the end of this tutorial, you will have a solid understanding of the following flow control constructs in JavaScript:
- Conditional Statements: if, else if, else, switch
- Looping Statements: for, while, do-while
- Control Statements: break, continue

Prerequisites

Basic knowledge of JavaScript syntax and data types is required to follow along with this tutorial.

2. Step-by-Step Guide

Conditional Statements

Conditional statements are used to perform different actions based on different conditions. In JavaScript, we use if, else if, else, and switch for conditional operations.

• if statement

The if statement is used to specify a block of JavaScript code to be executed if a condition is true.

if (condition) {
  // code to be executed if condition is true
}

• else statement

The else statement is used to specify a block of code to be executed if the condition is false.

if (condition) {
  // code to be executed if condition is true
} else {
  // code to be executed if condition is false
}

• else if statement

The else if statement is used to specify a new condition to test if the first condition is false.

if (condition1) {
  // code to be executed if condition1 is true
} else if (condition2) {
  // code to be executed if condition1 is false and condition2 is true
} else {
  // code to be executed if condition1 and condition2 are false
}

• switch statement

The switch statement is used to perform different actions based on different conditions.

switch(expression) {
  case x:
    // code block
    break;
  case y:
    // code block
    break;
  default:
    // code block
}

Looping Statements

Looping statements are used to perform an action again and again, depending on a condition. The loops in JavaScript are for, while, and do-while.

• for loop

A for loop is a control flow statement for specifying iteration, which allows code to be executed repeatedly.

for (statement 1; statement 2; statement 3) {
  // code block to be executed
}

• while loop

The while loop loops through a block of code as long as a specified condition is true.

while (condition) {
  // code block to be executed
}

• do-while loop

The do-while loop is a variant of the while loop. This loop will execute the code block once, before checking if the condition is true, then it will repeat the loop as long as the condition is true.

do {
  // code block to be executed
} while (condition);

Control Statements

Control statements are used to control the flow of execution of the program based on certain conditions. These are used to cause the flow of execution to advance and branch based on changes to the state of a program.

• break statement

The break statement "jumps out" of a loop and continues executing the code after the loop.

for (i = 0; i < 10; i++) {
  if (i === 3) { break; }
  text += "The number is " + i + "<br>";
}

• continue statement

The continue statement "jumps over" one iteration in the loop.

for (i = 0; i < 10; i++) {
  if (i === 3) { continue; }
  text += "The number is " + i + "<br>";
}

3. Code Examples

Example 1: Conditional Statements

let age = 18;

if (age >= 18) {
  console.log("You are eligible to vote.");
} else {
  console.log("You are not eligible to vote.");
}

In this example, age >= 18 is the condition we check. If the condition is true, "You are eligible to vote." gets printed. If the condition is false, "You are not eligible to vote." gets printed.

Example 2: Looping Statements

for(let i = 1; i <= 5; i++) {
  console.log(`Iteration number: ${i}`);
}

In this example, we create a for loop. The loop starts with i = 1. The loop will continue as long as i <= 5. For each loop, i is incremented by 1, and Iteration number: ${i} is printed.

Example 3: Control Statements

for(let i = 1; i <= 10; i++) {
  if(i === 5) {
    break;
  }
  console.log(`Number: ${i}`);
}

In this example, we use a break statement to stop the loop if i === 5. The loop stops, and no numbers after 5 are printed.

4. Summary

In this tutorial, we have covered the basics of flow control in JavaScript, including conditional statements (if, else if, else, switch), looping statements (for, while, do-while), and control statements (break, continue). We also provided code examples for each of these concepts.

5. Practice Exercises

Exercise 1:

Write a JavaScript program that will take in a number from 1 to 10. If the number is less than 3, print "low". If it's from 3 to 7, print "medium". If it's greater than 7, print "high".

Solution:

let num = 5; // Change this to test with different values

if(num < 3) {
  console.log("low");
} else if(num <= 7) {
  console.log("medium");
} else {
  console.log("high");
}

Exercise 2:

Using a for loop, print all the even numbers from 1 to 20.

Solution:

for(let i = 1; i <= 20; i++) {
  if(i % 2 === 0) {
    console.log(i);
  }
}

Exercise 3:

Using a while loop, print numbers from 5 to 1 in reverse order.

Solution:

let num = 5;

while(num > 0) {
  console.log(num);
  num--;
}