10 Ways to Loop Through a JavaScript Array

JavaScript gives you several ways to iterate over an array. Some are better for simple iteration, while others are designed for transforming, filtering, searching, or reducing data.

Learn software development

Assume we have this array:

const fruits = ["Apple", "Banana", "Mango", "Orange"];

1. for Loop

The classic approach gives you complete control over the index.

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

Best for: When you need the index or precise control over the loop.

2. for...of

for...of provides a clean way to access each array value directly.

for (const fruit of fruits) {
  console.log(fruit);
}

Best for: Simple iteration when you don’t need the index.

3. forEach()

forEach() executes a function for every element.

fruits.forEach((fruit) => {
  console.log(fruit);
});

You can also access the index:

fruits.forEach((fruit, index) => {
  console.log(index, fruit);
});

Best for: Performing an action for every element.

4. for...in

for...in iterates over the array’s enumerable property keys.

for (const index in fruits) {
  console.log(fruits[index]);
}

Best for: Object properties. It generally isn’t the preferred choice for arrays because it iterates keys rather than array values.

5. map()

map() loops through an array and creates a new array containing the returned values.

const upperFruits = fruits.map((fruit) => {
  return fruit.toUpperCase();
});

console.log(upperFruits);

Output:

["APPLE", "BANANA", "MANGO", "ORANGE"]

Best for: Transforming every element.

6. filter()

filter() loops through the array and creates a new array containing only elements that satisfy a condition.

const longNames = fruits.filter((fruit) => {
  return fruit.length > 5;
});

console.log(longNames);

Best for: Selecting specific elements from an array.

7. reduce()

reduce() processes every element while accumulating a single result.

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

const total = numbers.reduce((sum, number) => {
  return sum + number;
}, 0);

console.log(total); // 100

Best for: Calculating totals, building objects, grouping data, and other accumulations.

8. while Loop

You can manually control iteration with a while loop.

let i = 0;

while (i < fruits.length) {
  console.log(fruits[i]);
  i++;
}

Best for: Situations where the stopping condition needs more flexible control.

9. do...while Loop

A do...while loop executes its body at least once before checking the condition.

let i = 0;

do {
  console.log(fruits[i]);
  i++;
} while (i < fruits.length);

Best for: Cases where the loop body must execute at least once.

10. Array.entries()

entries() returns an iterator containing [index, value] pairs.

for (const [index, fruit] of fruits.entries()) {
  console.log(index, fruit);
}

Output:

0 Apple
1 Banana
2 Mango
3 Orange

Best for: When you want both the index and value while using modern iteration syntax.

Quick Comparison

Method	Returns New Array?	Gets Index Easily?	Common Use
for	No	Yes	Full control
for...of	No	No	Simple iteration
forEach()	No	Yes	Perform an action
for...in	No	Yes	Object keys
map()	Yes	Yes	Transform data
filter()	Yes	Yes	Select data
reduce()	No	Yes	Accumulate data
while	No	Yes	Flexible conditions
do...while	No	Yes	Run at least once
entries() + for...of	No	Yes	Index + value

The important distinction

Don’t think of these as simply 10 different ways to do the same thing.

• Need maximum control? → for
• Just need each value? → for...of
• Perform an action for every item? → forEach()
• Transform every item? → map()
• Keep matching items? → filter()
• Produce one accumulated result? → reduce()
• Need index + value with modern syntax? → entries()
• Need a custom stopping condition? → while / do...while

One especially important rule: don’t use map(), filter(), or reduce() merely because they loop. Choose them when their purpose matches what you’re trying to accomplish.