How to iterate over an array in JavaScript: forEach, for...of and other methods

Why "iterating over an array" is a fundamental skill you need to know by heart

Imagine: you have a list of students, a shopping cart, or a set of numbers. You need to do something with each element: print a name, calculate a sum, filter only adults. In JavaScript, there are several ways to do this, and the most popular one is the forEach loop.

The question "Loop (for each) over an array in JavaScript" on Stack Overflow has gathered thousands of views. This means that even experienced developers sometimes get confused about the nuances. We'll break it all down: from the classic for to the modern for...of and the powerful forEach. You'll learn when to use which method and stop being afraid of arrays.

Method #1: The classic for loop — the grandfather of all iterations

The oldest and most understandable way. You control the counter and the exit condition yourself. Perfect when you need to break out of the loop early or skip several elements.

const fruits = ['apple', 'banana', 'orange'];
for (let i = 0; i < fruits.length; i++) {
    console.log(`Fruit #${i + 1}: ${fruits[i]}`);
}

Pros: full control, you can use break and continue.
\nCons: verbose, easy to make mistakes with indices.

When to use the classic for loop

\n
• You need to stop the iteration early (for example, when searching for an element).
\n
• You need access to the index (not just the value).
\n
• You are working with multidimensional arrays.
\n

Method #2: forEach — the king of traversals in JavaScript

This method is the answer to the question "Loop (for each) over an array in JavaScript" in 90% of cases. It is called directly on the array and takes a callback function that is executed for each element.

const fruits = ['apple', 'banana', 'orange'];
fruits.forEach(function(fruit, index) {
    console.log(`Fruit #${index + 1}: ${fruit}`);
});

// Same thing with an arrow function (modern style):
fruits.forEach((fruit, index) => {
    console.log(`Fruit #${index + 1}: ${fruit}`);
});

Important: forEach does not return a new array (unlike map). It simply performs an action for each element. And yes, break and continue don't work here — if you need to break out of the loop, use for...of or the classic for.

Parameters of the forEach callback function

\n
• First parameter — the current element of the array (required).
\n
• Second parameter — the index of the element (optional).
\n
• Third parameter — the array itself (rarely needed).
\n

[10, 20, 30].forEach((value, index, array) => {
    console.log(`Element ${value} at position ${index} in array [${array}]`);
});

Method #3: for...of — modern and elegant

Introduced in ES6 (2015) and immediately loved by developers. It works not only with arrays but also with any iterable objects (strings, Set, Map).

const fruits = ['apple', 'banana', 'orange'];
for (const fruit of fruits) {
    console.log(`Fruit: ${fruit}`);
}

Main advantage: you can use break and continue. Plus, the code looks clean and readable.

How to get the index in for...of

If you need the index, use the entries() method:

for (const [index, fruit] of fruits.entries()) {
    console.log(`Fruit #${index + 1}: ${fruit}`);
}

Method #4: map — when you need to create a new array

If you want not just to iterate, but to transform each element and get a new array of the same length, use m