Loop Through an Array in JavaScript

JavaScript provides several ways to loop through arrays. Whether you need to iterate over the array’s elements, modify data, or perform some action for each item, understanding the various looping mechanisms available is essential. This article will walk you through all the common and modern approaches to loop through arrays in JavaScript, explaining each method with examples.

1. For Loop

The traditional for loop is one of the most commonly used ways to iterate over an array in JavaScript. It’s simple, flexible, and works well for arrays with a known number of elements.

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

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

/* Output: 
10
20
30
40
50  */

Explanation

• We initialize a variable i to 0 to start from the first element.
• The condition i < array.length ensures the loop runs until it reaches the end of the array.
• i++ increments the index, allowing us to move through each element in the array.
• fruits[i] gives us access to each element during the loop.

2. For…of Loop

Introduced in ECMAScript 6 (ES6), the for...of loop is designed specifically for iterating over iterable objects, including arrays. It’s simpler and more readable than the traditional for loop.

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

for (let item of arr) {
    console.log(item);
}

/* Output: 
10
20
30
40
50  */

Explanation

• item refers to the current element of the array during each iteration.
• The loop automatically handles the iteration over the array, so there’s no need to manage an index or check the length.

3. For…in Loop

The for...in loop is designed for iterating over the keys or indices of an object or array, not the values themselves. It can be used to loop through arrays, but it’s not the recommended approach for arrays, as it is more suited for object iteration.

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

for (let index in arr) {
  console.log(arr[index]);
}

/* Output: 
10
20
30
40
50  */

Explanation

• The for...in loop gives you the index of each element, which you can then use to access the value from the array.
• While this works fine with arrays, it’s best to avoid using it for arrays in most cases, as the behavior with objects can be unpredictable.

4. forEach() Method

The forEach() method is a built-in array method that allows you to execute a callback function once for each element in the array. This method is part of the Array prototype and is preferred when you don’t need to break or return values from the loop early.

let arr = [10, 20, 30, 40, 50];
arr.forEach(function(item) {
    console.log(item);
});

/* Output: 
10
20
30
40
50  */

Explanation

• forEach() takes a callback function as an argument. The function is invoked for each element in the array.
• The callback receives up to three arguments: the current element (item), its index (index), and the array itself (array).

Note: Unlike traditional loops, forEach() cannot be interrupted with break or return. It always iterates over all elements in the array.

5. map() Method

map() is similar to forEach(), but it’s used when you want to transform the elements of an array and return a new array with the modified values. It doesn’t modify the original array.

let arr = [5, 10, 15, 20, 25];

let newArr = arr.map(function(item) {
  return item * 2;
});

console.log(newArr);

// Output: [ 10, 20, 30, 40, 50 ]

Explanation

• The map() method transforms the elements of the array by applying a function to each element.
• The result is a new array with the transformed values, leaving the original array unchanged.

6. filter() Method

The filter() method is another higher-order function that allows you to loop through an array, but it only returns the elements that meet a certain condition. It creates a new array containing only the elements that pass the test implemented by the provided function.

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

let newArr = arr.filter(function(item) {
  return item % 3 !== 0;
});

console.log(newArr);



// Output: [ 10, 20, 40, 50 ]

Explanation

• filter() iterates through each element and applies the condition inside the function.
• Only the elements that return true for the condition will be included in the new array.

7. reduce() Method

reduce() is another higher-order function used to iterate over an array. Unlike map() or filter(), reduce() doesn’t return an array; instead, it accumulates a single result (e.g., a sum, product, object, etc.) from the array’s elements.

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

let sum = arr.reduce(function(accumulator, currentValue) {
    return accumulator + currentValue;
}, 0);

console.log(sum); // 150

Explanation

• reduce() iterates over the array and applies a function to combine each element with the accumulated result (the accumulator).
• The initial value (0 in the example) is used to start the accumulation.