Introduction

Loops are an essential part of programming, especially when it comes to JavaScript. They allow us to execute the same piece of code multiple times without having to write the same code repeatedly. This not only saves time but also makes our code more efficient and easier to read.

In this blog post, we will discuss the different types of loops available in JavaScript and provide examples of how to use them. We will also discuss when to use each type of loop, keeping in mind that we're writing for someone who's learning programming.

Note: Jargons are technical words or expressions that are difficult for a non-expert to understand. In this post, we will try not to use jargons. If we do, we will explain them in simple terms.

Types of loops in JavaScript

There are several types of loops in JavaScript, each with its own use case and syntax. In this section, we will go over each type of loop and provide examples.

For loop

The for loop is perhaps the most commonly used loop in JavaScript. It is best suited for scenarios where you know the exact number of times you want to execute a piece of code.

Syntax:

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

Here's a simple example of how to use a for loop:

for (let i = 0; i < 5; i++) {
  console.log("Hello, World!");
}

In this example, the for loop prints "Hello, World!" five times in the console. The loop starts with an initialization (let i = 0), which sets a variable i to 0. The loop then checks the condition (i < 5), and if it is true, the code inside the loop will be executed. The increment (i++) increases the value of i by 1 after each iteration.

While loop

The while loop is used when you don't know the exact number of times you want to execute a piece of code but have a specific condition that must be met for the loop to continue.

Syntax:

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

Here's an example of how to use a while loop:

let number = 0;

while (number < 5) {
  console.log("Hello, World!");
  number++;
}

In this example, the while loop prints "Hello, World!" five times in the console, just like the for loop example. The loop checks the condition (number < 5), and if it is true, the code inside the loop will be executed. The number++ increases the value of number by 1 after each iteration.

Do-While loop

The do-while loop is similar to the while loop, with one key difference: the do-while loop executes the code inside the loop at least once, even if the condition is false from the beginning.

Syntax:

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

Here's an example of how to use a do-while loop:

let number = 0;

do {
  console.log("Hello, World!");
  number++;
} while (number < 5);

In this example, the do-while loop prints "Hello, World!" five times in the console, just like the previous examples. The key difference is that the code inside the loop will always be executed at least once, even if the condition is false from the start.

For-In loop

The for-in loop is used to iterate over the properties of an object. It is best suited for situations where you need to go through all the properties of an object and perform some action on each property.

Syntax:

for (variable in object) {
  // Code to be executed
}

Here's an example of how to use a for-in loop:

const person = {
  name: "John",
  age: 30,
  city: "New York"
};

for (const key in person) {
  console.log(`${key}: ${person[key]}`);
}

In this example, the for-in loop iterates over the properties of the person object and prints the property names and their values in the console.

For-Of loop

The for-of loop is used to iterate over the values of an iterable data structure, such as an array or a string. It is best suited for scenarios where you need to loop through the values of an array or a string and perform some action on each value.

Syntax:

for (variable of iterable) {
  // Code to be executed
}

Here's an example of how to use a for-of loop:

const fruits = ["apple", "banana", "cherry"];

for (const fruit of fruits) {
  console.log(fruit);
}

In this example, the for-of loop iterates over the values of the fruits array and prints each fruit in the console.

Which loop to use?

Now that we have discussed the different types of loops available in JavaScript, the question arises: which loop should you use in your code?

• Use a for loop when you know the exact number of times you want to execute a piece of code.
• Use a while loop when you don't know the exact number of times you want to execute a piece of code but have a specific condition that must be met for the loop to continue.
• Use a do-while loop when you want to execute the code inside the loop at least once, even if the condition is false from the beginning.
• Use a for-in loop when you need to iterate over the properties of an object.
• Use a for-of loop when you need to iterate over the values of an iterable data structure, such as an array or a string.

By understanding the different types of loops and their use cases, you can choose the most suitable loop for your specific requirements and write more efficient code.