Mastering JavaScript Loops

loops — for, while, do-while, for-in, for-of, and forEach

Loops are essential in JavaScript, enabling repetitive code execution based on specific conditions. JavaScript offers various loops — for, while, do-while, for-in, for-of, and forEach—each designed for different use cases. This guide explores these loops with practical examples to help you understand their usage and when to apply each type.

1. JavaScript for Loop

The for loop is one of the most frequently used loops in JavaScript. It is ideal when you need to repeat a block of code a specific number of times.

Syntax:

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

Example: Printing Numbers from 1 to 5

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

2. JavaScript while Loop

The while loop executes a block of code as long as the specified condition is true. It’s commonly used when the number of iterations is not known in advance.

Syntax:

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

Example: Print Numbers from 1 to 5

let i = 1;
while (i <= 5) {
  console.log(i);
  i++;
}

3. JavaScript do-while Loop

The do-while loop is similar to the while loop but guarantees that the loop body is executed at least once before checking the condition.

Syntax:

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

Example: Print Numbers from 1 to 5

let i = 1;
do {
  console.log(i);
  i++;
} while (i <= 5);

4. JavaScript for-in Loop

The for-in loop is used to iterate over the properties of an object. It allows you to loop through all the enumerable properties of an object.

Get PΛWΛN’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

Syntax:

for (key in object) {
  // code block to be executed
}

Example: Loop Through Object Properties

const student = { name: "John", age: 20, grade: "A" };
for (let key in student) {
  console.log(`${key}: ${student[key]}`);
}

5. JavaScript for-of Loop

The for-of loop is used to iterate over iterable objects like arrays, strings, maps, and sets. It provides a straightforward way to access the values of these collections.

Syntax:

for (element of iterable) {
  // code block to be executed
}

Example: Loop Through an Array

const fruits = ["apple", "banana", "cherry"];
for (let fruit of fruits) {
  console.log(fruit);
}

6. JavaScript forEach Loop

The forEach loop is an array method that allows you to execute a provided function once for each array element. It’s great for array traversal when you need access to the current value, index, or entire array.

Syntax:

array.forEach((element, index, array) => {
  // code block to be executed
});

Example: Using forEach with an Array

const numbers = [1, 2, 3, 4, 5];
numbers.forEach((number, index) => {
  console.log(`Index ${index}: ${number}`);
});

Choosing the Perfect Loop in JavaScript

• Use for loops when you know the exact number of iterations.
• Use while loops when the number of iterations is uncertain and depends on a condition.
• Use do-while loops when the loop body must run at least once.
• Use for-in loops to iterate over object properties.
• Use for-of loops to iterate over iterable objects like arrays and strings.
• Use forEach loops when you need to act on each element of an array