Loop over an array in JavaScript

Arrays are an essential part of any programming language. They allow us to store and organize multiple values in a single variable. In JavaScript, looping through an array is a common task, as it allows us to perform operations on each element of the array.

In this article, we will explore different methods to loop over arrays in JavaScript. We will cover the traditional for loop, the forEach method, the for...of loop, and the map method.

Using the for loop

The for loop is a simple and common way to iterate through an array. It allows us to specify the starting point, the condition for continuing the loop, and the increment or decrement for each iteration. The basic syntax of the for loop is as follows:

for (let i = 0; i < array.length; i++) {
    // Access the element using array[i]
    // Perform operations
}

Let's take a look at an example:

const numbers = [1, 2, 3, 4, 5];

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

This will output:

Using the forEach method

The forEach method is a built-in method for arrays in JavaScript. It allows us to execute a provided function once for each element in an array. The syntax for using the forEach method is as follows:

array.forEach((element) => {
    // Perform operations
});

Let's see an example:

const numbers = [1, 2, 3, 4, 5];

numbers.forEach((number) => {
    console.log(number);
});

This will output the same result as the previous example:

Using the for...of loop

The for...of loop is a modern addition to JavaScript that allows us to iterate over iterable objects such as arrays. It provides a more concise and readable syntax compared to the traditional for loop. The basic syntax of the for...of loop is as follows:

for (let element of array) {
    // Perform operations
}

Here's an example:

const numbers = [1, 2, 3, 4, 5];

for (let number of numbers) {
    console.log(number);
}

Again, this will output the same result:

Using the map method

The map method is another built-in method for arrays in JavaScript. It creates a new array by applying a provided function to each element of an existing array. The syntax for using the map method is as follows:

const newArray = array.map((element) => {
    // Perform operations on each element and return the result
    return modifiedElement;
});

Let's illustrate this with an example:

const numbers = [1, 2, 3, 4, 5];

const squaredNumbers = numbers.map((number) => {
    return number * number;
});

console.log(squaredNumbers);