Looping Over Arrays

Introduction

JavaScript provides several ways to loop through the elements of an array. The two most common and modern approaches are the array method forEach() and the language statement for...of. While they often achieve the same result, they work differently under the hood. Understanding these differences is crucial for writing clean, bug-free code, especially when you need to stop a loop early or perform asynchronous operations.

The forEach() method of Array instances executes a provided function once for each array element.

Basic forEach Example

The forEach() method is a higher-order function, meaning it takes another function (a callback) as an argument. It calls this provided function once for every item in the array. This approach is highly declarative—you tell JavaScript what to do for each item, rather than how to loop through them step-by-step.

const items = ['a', 'b'];
items.forEach(item => {
  console.log(item);
});

a
b

Using for…of

While forEach is an array method, for...of is a standard looping construct built into the language itself. It works on any iterable object, not just arrays. This imperative style gives you more control over the loop’s execution flow, making it easier to read for complex logic and allowing you to pause or stop the loop at any time.

The for…of statement executes a loop that operates on a sequence of values sourced from an iterable object.

const items = ['x', 'y'];
for (const item of items) {
  console.log(item);
}

x
y

Breaking Out of Loops

You can use break, continue, and return statements in a for…of loop.

const items = [1, 2, 3, 4];
for (const item of items) {
  if (item === 3) break;
  console.log(item);
}

1
2

The break Misconception

There is no way to stop or break a forEach() loop other than by throwing an exception.

const items = [1, 2, 3];
try {
  items.forEach(item => {
    if (item === 2) break;
    console.log(item);
  });
} catch (e) {
  console.log(e.name);
}

SyntaxError

SyntaxError

Accessing the Index

currentValue: The current element being processed in the array. index: The index of the current element.

const letters = ['a', 'b'];
letters.forEach((letter, index) => {
  console.log(index + ': ' + letter);
});

0: a
1: b

Iteration Visualized

const arr = [];
arr[2] = 'c'; // sparse array
arr.forEach(x => console.log('forEach seen: ' + x));
for (const x of arr) console.log('for...of seen: ' + x);

Misconceptions

• Wrong Belief: You can use the ‘break’ statement inside a forEach callback to stop looping early.
  • Reality: A forEach callback is just a regular function. The ‘break’ statement is not valid inside it, and there is no built-in way to stop a forEach loop early.
• Wrong Belief: forEach returns a new transformed array.
  • Reality: forEach always returns undefined. If you want a new array based on the original, use map() instead.
• Wrong Belief: for…of gives you the index of the array elements by default.
  • Reality: for…of gives you the values. To get indexes, you would typically use a traditional for loop or forEach(value, index).
• Wrong Belief: forEach and for…of are exactly the same in performance and behavior.
  • Reality: for…of is a language statement that supports break/continue and works well with async/await. forEach is an array method that expects a synchronous callback.

Edge Cases

• Empty arrays: both forEach and for…of will simply execute zero times without error.
• Sparse arrays: forEach skips empty slots, while for…of iterates over them returning undefined.