Control Flow and Loops in JavaScript

December 14, 2023

JavaScript is a powerful programming language that allows you to create dynamic and interactive web applications. In order to make your programs more efficient and responsive, it is important to understand control flow and loops.

Conditional Statements

Conditional statements are used to execute different blocks of code based on certain conditions. The two most common types of conditional statements in JavaScript are if/else and switch.

if/else

The if/else statement allows you to execute a block of code if a certain condition is met, and a different block of code if the condition is not met. The basic structure looks like this:

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

Let’s look at an example. Say we want to create a program that checks if a user is old enough to vote. We can use an if/else statement to check the user’s age and display a message accordingly:

let age = 18;

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

In this example, the condition age >= 18 is evaluated. If the user’s age is 18 or above, the first block of code will be executed and the message “You are old enough to vote!” will be displayed. If the condition is not met, the second block of code will be executed and the message “You are not old enough to vote yet.” will be displayed.

switch

The switch statement allows you to specify multiple possible outcomes based on the value of a variable. It has the following structure:

switch (expression) {
  case value1:
    // code to be executed if expression is equal to value1
    break;
  case value2:
    // code to be executed if expression is equal to value2
    break;
  ...
  default:
    // code to be executed if no match is found
}

Let’s use the same voting example from before, but this time using a switch statement:

let age = 18;

switch (age) {
  case 18:
    console.log("You are old enough to vote!");
    break;
  default:
    console.log("You are not old enough to vote yet.");
}

In this case, the value of age is compared to the different cases. If it matches the case 18, the first block of code will be executed. If no match is found, the default block will be executed.

Loops

Loops are used to execute a block of code multiple times. There are three types of loops in JavaScript: for, while, and do/while.

for

The for loop is used to execute a block of code a specific number of times. It has the following structure:

for (initialization; condition; increment/decrement) {
  // code to be executed
}

Let’s say we want to print the numbers from 1 to 10. We can use a for loop to do this:

for (let i = 1; i <= 10; i++) {
  console.log(i);
}

In this example, the loop starts with i = 1, checks if the condition i <= 10 is met, and then increments i by 1 after each iteration. This will continue until i is no longer less than or equal to 10.

while

The while loop is used to execute a block of code while a certain condition is true. It has the following structure:

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

Let's use the same example as before, but this time using a while loop:

let i = 1;

while (i <= 10) {
  console.log(i);
  i++;
}

In this case, the loop will continue to execute as long as i is less than or equal to 10. The value of i is incremented by 1 after each iteration.

do/while

The do/while loop is similar to the while loop, except the code block is executed at least once before the condition is checked. It has the following structure:

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

Let's use the same example as before, but this time using a do/while loop:

let i = 1;

do {
  console.log(i);
  i++;
} while (i <= 10);

In this case, the code block will be executed once, and then the condition i <= 10 will be checked. If the condition is still true, the loop will continue to execute.

Now that you understand control flow and loops in JavaScript, you can use them to create more dynamic and interactive programs. Practice using these concepts in your code and you'll be on your way to becoming a JavaScript pro!