Table of contents

JavaScript For Loop

The for loop in JavaScript is a powerful control structure that allows you to execute a block of code a specific number of times. It's commonly used for iterating over arrays, performing repetitive tasks, and executing code that requires a specified number of repetitions. This article explores the syntax, variations, and practical uses of the for loop in JavaScript, complete with code examples.

Basic Syntax of JavaScript For Loop

The for loop has three main components: initialization, condition, and iteration. These components are placed inside the parentheses following the for keyword and are separated by semicolons.

Syntax:

javascript
for (initialization; condition; iteration) {
    // Code to be executed
}
  • Initialization: This sets the starting point of the loop and is executed once before the loop starts.
  • Condition: This is evaluated before each loop iteration. If the condition evaluates to true, the loop continues; otherwise, it stops.
  • Iteration: This is executed after each iteration of the loop.

Example: Basic For Loop

javascript
for (let i = 0; i < 5; i++) {
    console.log("Iteration number: " + i);
}

In this example:

  • The loop starts with i set to 0.
  • The loop continues as long as i is less than 5.
  • After each iteration, i is incremented by 1.

Output:

javascript
Iteration number: 0
Iteration number: 1
Iteration number: 2
Iteration number: 3
Iteration number: 4

Looping Through Arrays

The for loop is commonly used to iterate over arrays.

Example:

javascript
let fruits = ["Apple", "Banana", "Cherry", "Date", "Elderberry"];

for (let i = 0; i < fruits.length; i++) {
    console.log(fruits[i]);
}

In this example:

  • The loop iterates from 0 to the length of the fruits array minus one.
  • Each element of the fruits array is accessed using fruits[i].

Output:

javascript
Apple
Banana
Cherry
Date
Elderberry

Nested For Loops

You can nest for loops to iterate over multi-dimensional arrays or perform more complex tasks.

Example:

javascript
let matrix = [
    [1, 2, 3],
    [4, 5, 6],
    [7, 8, 9]
];

for (let i = 0; i < matrix.length; i++) {
    for (let j = 0; j < matrix[i].length; j++) {
        console.log("Element at (" + i + ", " + j + "): " + matrix[i][j]);
    }
}

In this example:

  • The outer loop iterates over the rows of the matrix.
  • The inner loop iterates over the columns of the current row.

Output:

javascript
Element at (0, 0): 1
Element at (0, 1): 2
Element at (0, 2): 3
Element at (1, 0): 4
Element at (1, 1): 5
Element at (1, 2): 6
Element at (2, 0): 7
Element at (2, 1): 8
Element at (2, 2): 9

Using Break and Continue

The break statement exits the loop entirely, while the continue statement skips the current iteration and proceeds to the next one.

Example: Using Break

javascript
for (let i = 0; i < 10; i++) {
    if (i === 5) {
        break;
    }
    console.log(i);
}

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

Output:

javascript
0
1
2
3
4

Example: Using Continue

javascript
for (let i = 0; i < 10; i++) {
    if (i % 2 === 0) {
        continue;
    }
    console.log(i);
}

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

Output:

javascript
1
3
5
7
9

Infinite Loops

An infinite loop occurs when the condition in the for loop always evaluates to true. This can cause your program to freeze or crash, so be cautious when writing loops.

Example:

javascript
for (;;) {
    console.log("This loop will run forever.");
}

This loop has no condition to terminate, so it will run indefinitely. Always ensure that your loops have a valid termination condition.

Best Practices

  • Use Let/Const: Always declare loop variables with let or const to avoid scope issues.
  • Avoid Infinite Loops: Ensure your loop has a valid termination condition.
  • Optimize Performance: Minimize the number of operations inside the loop for better performance.

JavaScript

Related Articles