What types of loops in JavaScript do you know, and what are their differences?

Quick Answer

In JavaScript, there are several types of loops for performing repetitive actions:

• for: Best suited for when the number of iterations is known beforehand. It has three expressions: initialization, condition, and increment.
• while: Executes code as long as a condition is true. The condition is checked before the loop body is executed.
• do...while: Similar to while, but guarantees that the loop body will be executed at least once, as the condition is checked after the iteration.
• for...in: Iterates over the keys (properties) of an object. Not recommended for arrays.
• for...of: Iterates over the values of iterable objects, such as arrays, strings, Map, and Set. This is the modern and preferred way to iterate over arrays.

Detailed Breakdown of Loops

1. The for loop

The classic loop, ideal for situations where the number of iterations is known.

Syntax:

for (initialization; condition; increment) {
  // loop body
}

• Initialization: Executed once before the loop starts (e.g., let i = 0).
• Condition: Checked before each iteration. If true, the loop continues.
• Increment: Executed after each iteration (e.g., i++).

Example:

// Output numbers from 0 to 4
for (let i = 0; i < 5; i++) {
  console.log(i); // 0, 1, 2, 3, 4
}

2. The while loop

Used when the number of iterations is not known in advance, and the loop should continue as long as a specific condition is met.

Syntax:

while (condition) {
  // loop body
}

Example:

let i = 0;
while (i < 5) {
  console.log(i); // 0, 1, 2, 3, 4
  i++;
}

Feature: If the condition is initially false, the loop will not execute at all.

3. The do...while loop

Guarantees that the loop body will be executed at least once, as the condition check occurs after the iteration.

Syntax:

do {
  // loop body
} while (condition);

Example:

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

In this example, the loop body executes once, even though the condition i < 5 is initially false.

4. The for...in loop

Designed for iterating over the enumerable properties of an object.

Syntax:

for (let key in object) {
  // loop body
}

Example:

const user = {
  name: "Alice",
  age: 30,
  isAdmin: true
};
 
for (let key in user) {
  console.log(`${key}: ${user[key]}`);
}
// Output:
// name: Alice
// age: 30
// isAdmin: true

Features:

• Iterates over both own and inherited properties.
• The order of iteration is not guaranteed.
• Do not use it for arrays, as it can iterate over more than just the numeric indices.

5. The for...of loop

The modern standard for iterating over iterable objects (arrays, strings, Map, Set, etc.).

Syntax:

for (let value of iterable) {
  // loop body
}

Example with an array:

const fruits = ["Apple", "Banana", "Cherry"];
for (let fruit of fruits) {
  console.log(fruit);
}
// Output:
// Apple
// Banana
// Cherry

Example with a string:

const greeting = "Hello";
for (let char of greeting) {
  console.log(char);
}
// Output:
// H
// e
// l
// l
// o

Summary of Differences