Chapter 13. Loops In JavaScript

Loops are fundamental constructs in JavaScript that allow you to execute a block of code repeatedly. They are essential for tasks that require iteration, such as processing arrays, performing repetitive calculations, or handling collections of data. In this blog, we’ll explore the different types of loops in JavaScript, how they work, and when to use them.

Types of Loops in JavaScript

JavaScript provides several types of loops to handle different iteration scenarios:

1. for loop
2. while loop
3. do..while loop
4. for..in loop
5. for..of loop

The for Loop

The for loop is the most commonly used loop in JavaScript. It allows you to run a block of code a specific number of times.

Syntax

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

Example 1: Basic for Loop

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

In this example, the loop runs five times, incrementing i from 0 to 4.

The while Loop

The while loop runs as long as a specified condition is true.

Syntax

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

Example 2: Basic while Loop

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

In this example, the loop continues to run until count is no longer less than 5.

The do..while Loop

The do..while loop is similar to the while loop, but it executes the code block once before checking the condition.

Syntax

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

Example 3: Basic do..while Loop

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

In this example, the loop runs at least once before checking the condition.

The for..in Loop

The for..in loop iterates over the properties of an object. It is not recommended for iterating over arrays because it iterates over all enumerable properties, including inherited ones.

Syntax

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

Example 4: Basic for..in Loop

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 loop iterates over the properties of the person object.

The for..of Loop

The for..of loop iterates over the values of iterable objects, such as arrays, strings, maps, and sets.

Syntax

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

Example 5: Basic for..of Loop

let numbers = [1, 2, 3, 4, 5];
for (let number of numbers) {
    console.log(number);
}
// Output: 
// 1
// 2
// 3
// 4
// 5

In this example, the loop iterates over the values of the numbers array.

Loop Control: 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 proceeds to the next one.

Using break

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

In this example, the loop exits when i equals 5.

Using continue

for (let i = 0; i < 10; i++) {
    if (i % 2 === 0) {
        continue;
    }
    console.log('Odd number:', i);
}
// Output: 
// Odd number: 1
// Odd number: 3
// Odd number: 5
// Odd number: 7
// Odd number: 9

In this example, the loop skips even numbers and only logs odd numbers.

Practical Applications

Loops are used in various applications, such as:

• Iterating Arrays: Processing each element of an array.
• Data Processing: Performing repetitive calculations or operations on data sets.
• Automated Tasks: Automating repetitive tasks in scripts and applications.

Loops are powerful constructs in JavaScript that allow you to perform repetitive tasks efficiently. By mastering the different types of loops and understanding when to use them, you can write more dynamic and efficient code. Experiment with these loops in your projects to deepen your understanding and enhance your JavaScript skills.