Iterate over an array in JavaScript

Sh Raj - Mar 31 - - Dev Community

In JavaScript, there are several ways to iterate over an array, each with its own advantages depending on what you need to accomplish. Here are the most common ways to iterate over an array:

1. for Loop

The traditional for loop is versatile and widely used for iterating over arrays.

const numbers = [1, 2, 3, 4, 5];
for (let i = 0; i < numbers.length; i++) {
  console.log(numbers[i]);
}
// Output: 1, 2, 3, 4, 5
Enter fullscreen mode Exit fullscreen mode

2. for...of Loop

Introduced in ES6, for...of is simpler and more concise, iterating over array values.

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

3. forEach() Method

Specifically designed for arrays, forEach() executes a provided function once for each array element.

const numbers = [1, 2, 3, 4, 5];
numbers.forEach(function(number) {
  console.log(number);
});
// Output: 1, 2, 3, 4, 5
Enter fullscreen mode Exit fullscreen mode

4. map() Method

Creates a new array by calling a provided function on every element in the array.

const numbers = [1, 2, 3, 4, 5];
const squared = numbers.map(function(number) {
  return number * number;
});
console.log(squared);
// Output: [1, 4, 9, 16, 25]
Enter fullscreen mode Exit fullscreen mode

5. filter() Method

Creates a new array with elements that pass a test specified by a function.

const numbers = [1, 2, 3, 4, 5];
const evenNumbers = numbers.filter(function(number) {
  return number % 2 === 0;
});
console.log(evenNumbers);
// Output: [2, 4]
Enter fullscreen mode Exit fullscreen mode

6. reduce() Method

Reduces an array to a single value by executing a reducer function for each element.

const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce(function(accumulator, currentValue) {
  return accumulator + currentValue;
}, 0);
console.log(sum);
// Output: 15
Enter fullscreen mode Exit fullscreen mode

7. some() and every() Methods

These methods check if some or every element in the array meets a condition.

const numbers = [1, 2, 3, 4, 5];
const hasEven = numbers.some(function(number) {
  return number % 2 === 0;
});
console.log(hasEven); // Output: true

const allEven = numbers.every(function(number) {
  return number % 2 === 0;
});
console.log(allEven); // Output: false
Enter fullscreen mode Exit fullscreen mode

8. Entries() Method with for...of

If you need both the index and value, you can use entries() with for...of.

const numbers = [1, 2, 3, 4, 5];
for (let [index, value] of numbers.entries()) {
  console.log(index, value);
}
// Output: 0 1, 1 2, 2 3, 3 4, 4 5
Enter fullscreen mode Exit fullscreen mode

These are the most common and powerful ways to iterate over arrays in JavaScript. Choosing the right method depends on what you need to achieve, whether it's simply logging elements, transforming them, filtering, or reducing them to a single value.

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .