The Array.prototype.forEach() method is one of the most fundamental tools for iteration in JavaScript. Introduced in ES5, it executes a provided function once for each array element in ascending order. Unlike newer functional methods like map() or filter(), forEach() is designed primarily for side effects—actions that happen outside the scope of the function itself, such as updating the DOM, logging data, or modifying external variables.

1. Syntax and the Callback Mechanism

The forEach() method takes a callback function and an optional thisArg.

JavaScript
array.forEach((element, index, array) => {
  // Your logic here
});
  • element: The current value being processed in the array.
  • index(Optional): The numerical position of the current element.
  • array(Optional): The original array that forEach() was called upon.
  • thisArg (Optional): A value to use as this when executing the callback.

Basic Implementation:

JavaScript
const notifications = ["Email received", "New follower", "Message liked"];

notifications.forEach((note, i) => {
  console.log(`${i + 1}: ${note}`);
});

2. Key Characteristics: Side Effects vs. Return Values

The most critical technical distinction of forEach() is its return value: it always returns undefined.

Unlike map(), which creates a new array, or filter(), which returns a subset, forEach() is designed strictly for side effects. A side effect is any change that happens outside the scope of the function itself, such as:

  • Updating a variable in the outer scope.
  • Modifying the DOM (e.g., appending items to a list).
  • Logging data to the console.
  • Making an API request for each item.

[Image comparing JavaScript forEach vs map method return values and data flow]

JavaScript
const logs = [];
const numbers = [1, 2, 3];

// Using forEach to populate an external array (side effect)
numbers.forEach(num => {
  logs.push(`Number found: ${num}`);
});

console.log(logs); // ["Number found: 1", "Number found: 2", "Number found: 3"]

3. Behavior with Sparse Arrays and “Holes”

forEach() is “hole-aware.” It skips uninitialized indices in sparse arrays. This distinguishes it from the values() iterator or a standard for loop, which would treat a hole as undefined.

[Image comparing forEach and for…of behavior with sparse arrays]

JavaScript
const sparse = [1, , 3]; // Hole at index 1

sparse.forEach((val, i) => {
  console.log(`Visited ${i}: ${val}`); 
});
// Output:
// Visited 0: 1
// Visited 2: 3
// (Index 1 was completely skipped)

4. thisArg and Arrow Functions

The optional second argument to forEach() allows you to set the context of this. However, if you use an arrow function, the thisArg is ignored because arrow functions lexically bind this from their surrounding scope.

JavaScript
const counter = {
  sum: 0,
  add(arr) {
    arr.forEach(function(val) {
      this.sum += val;
    }, this); // 'this' refers to the counter object
  }
};

5. Async/Await Pitfall

forEach() is not promise-aware. If you try to use await inside a forEach() callback, it will not wait for the promise to resolve before moving to the next element. It will fire off all promises simultaneously and move on immediately.

JavaScript
// ❌ WRONG: forEach won't wait
const ids = [1, 2, 3];
ids.forEach(async (id) => {
  await fetchData(id); // These all run in parallel, and the code continues below immediately
});

// ✅ RIGHT: Use for...of for sequential async tasks
for (const id of ids) {
  await fetchData(id); 
}

6. Real-World Use Case: Batch UI Updates

forEach() shines when you have an array of data and you need to perform a non-returning action for each item, such as adding event listeners or rendering elements to the DOM.

JavaScript
const buttons = document.querySelectorAll('.action-btn');

buttons.forEach(btn => {
  btn.addEventListener('click', () => {
    console.log(`Button ${btn.id} clicked!`);
  });
});

Would you like to see how to use Array.prototype.reduce() as a more powerful alternative to forEach() for cases where you want to accumulate a single result from an array?

Categorized in:

Javascript Array Methods,