How To Iterate Over An Array In Javascript

by

Iterating over an array in JavaScript is a common task that developers need to perform when working with data structures. JavaScript provides several ways to accomplish this task, and in this blog post, we will discuss some of the most popular methods and their use cases.

1. For Loop

The for loop is the most basic and straightforward way to iterate over an array. It is commonly used when the developer wants to have full control over the looping process.

Here’s an example of how to use a for loop to iterate over an array:

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

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

2. For…of Loop

The for…of loop is a modern loop added in the ES6 version of JavaScript. It is specifically designed for iterating over iterable objects like arrays, strings, and sets. The for…of loop is more concise compared to the traditional for loop.

Here’s an example of how to use a for…of loop to iterate over an array:

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

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

3. forEach() Method

The forEach() method is an array method that allows you to iterate over an array by executing a provided function once for each array element. This method is useful when you want to perform an action on each element of an array without modifying the original array.

Here’s an example of how to use the forEach() method to iterate over an array:

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

    numbers.forEach(function(number) {
        console.log(number);
    });

4. map() Method

The map() method is another array method that creates a new array by calling a provided function on every element in the calling array. The map() method is used when you want to create a new array based on the transformation of the elements in the original array.

Here’s an example of how to use the map() method to iterate over an array and create a new array with doubled values:

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

    const doubledNumbers = numbers.map(function(number) {
        return number * 2;
    });

    console.log(doubledNumbers);

Conclusion

In this blog post, we learned different ways to iterate over an array in JavaScript, including for loop, for…of loop, forEach() method, and map() method. Depending on your use case and preference, you can choose the method that best suits your needs.