Loops in JavaScript

In JavaScript, loops are used to repeatedly execute a block of code as long as a specified condition is true. There are several types of loops available in JavaScript, each with its own use case. Here’s a breakdown of the most common types:

1. for Loop

The for loop is the most commonly used loop when you know in advance how many times you want to iterate through a block of code.

Syntax:

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

• Initialization: Sets up the loop variable (runs once before the loop starts).

• Condition: Evaluated before each iteration. The loop continues as long as this condition is true.

• Increment: Updates the loop variable after each iteration.

Example:

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

In this example:

• The loop runs 5 times, from i = 0 to i = 4.

• After each iteration, i is incremented by 1 (i++).

---

2. while Loop

The while loop runs as long as the specified condition evaluates to true. The condition is checked before each iteration.

Syntax:

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

Example:

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

In this example:

• The loop will continue running as long as i < 5.

• The value of i is incremented in each iteration.

---

3. do...while Loop

The do...while loop is similar to the while loop, but the condition is checked after the loop has executed. This means the loop will always execute at least once, even if the condition is false initially.

Syntax:

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

Example:

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

Here:

• The code inside the do block is executed first, and the condition i < 5 is checked afterward.

• The loop continues as long as the condition is true.

---

4. for...in Loop

The for...in loop is used to iterate over the properties of an object or the indexes of an array. It is mostly used with objects.

Syntax:

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

Example:

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

for (let key in person) {
  console.log(key + ": " + person[key]);
  // Output:
  // name: John
  // age: 30
  // city: New York
}

In this example:

• The for...in loop iterates over the keys of the person object.

• Each key represents a property name, and person[key] accesses its value.

---

5. for...of Loop

The for...of loop is used to iterate over the values of an iterable (such as an array, string, map, or set). It is more useful than for...in when working with arrays.

Syntax:

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

Example:

let numbers = [10, 20, 30, 40, 50];

for (let number of numbers) {
  console.log(number);  // Output: 10, 20, 30, 40, 50
}

Here:

• The for...of loop iterates through the elements of the numbers array.

• The variable number represents each value in the array.

---

6. break and continue

You can control the flow of loops using the break and continue statements.

• break: Exits the loop immediately.

• continue: Skips the current iteration and continues with the next one.

Example of break:

for (let i = 0; i < 10; i++) {
  if (i === 5) {
    break;  // Exit the loop when i equals 5
  }
  console.log(i);  // Output: 0, 1, 2, 3, 4
}

Example of continue:

for (let i = 0; i < 5; i++) {
  if (i === 3) {
    continue;  // Skip the iteration when i equals 3
  }
  console.log(i);  // Output: 0, 1, 2, 4
}

In the break example, the loop stops when i equals 5. In the continue example, when i equals 3, that iteration is skipped, and the loop moves to the next value of i.

---

7. forEach() Method (Array)

The forEach() method is a higher-order function available on arrays in JavaScript. It allows you to iterate over the elements of an array without explicitly using a loop.

Syntax:

array.forEach(function(element, index, array) {
  // Code to be executed
});

Example:

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

fruits.forEach((fruit, index) => {
  console.log(index + ": " + fruit);  // Output: 0: apple, 1: banana, 2: cherry
});

Here:

• The forEach() method takes a function that gets called once for each element in the array.

• The fruit variable contains the current array element, and index is the position of the element in the array.

---

Summary of Loops

• for loop: Ideal when you know how many times you want to iterate.

• while loop: Ideal when you don’t know how many times you need to loop but have a condition to check.

• do...while loop: Ensures the loop runs at least once before checking the condition.

• for...in loop: Iterates over object properties or array indexes.

• for...of loop: Iterates over iterable values (arrays, strings, etc.).

• break: Exits the loop early.

• continue: Skips the current iteration and continues with the next.

• forEach(): Array-specific method for iterating over array elements.