How to Use forEach() in JavaScript

Dec 16, 2020

JavaScript's Array#forEach() function is one of several ways to iterate through a JavaScript array. It is generally considered one of the "functional programming" methods along with filter(), map(), and reduce().

Getting Started

The forEach() method takes a parameter callback, which is a function that JavaScript will execute on every element in the array.

// Prints "a", "b", "c"
['a', 'b', 'c'].forEach(v => {
  console.log(v);
});

JavaScript calls your callback with 3 parameters: currentValue, index, and array. The index parameter is how you get the current array index with forEach().

// Prints "0: a, 1: b, 2: c"
['a', 'b', 'c'].forEach(function callback(value, index) {
  console.log(`${index}: ${value}`);
});

Caveats

There are some common gotchas when working with forEach(). Here's a few of them:

1. With Async/Await

You should not use async/await within a forEach() callback. Because a forEach() callback is a separate function, you can't use await without making the callback async.

async function test(arr) {
  arr.forEach(val => {
    // Syntax error because you're using `await` within a synchronous function.
    await val;
  });
}

You might be tempted to make your forEach() callback async. But that would be a mistake, because then you'll get unhandled promise rejections because there's no way to handle errors.

async function test(arr) {
  try {
    arr.forEach(async (val) => {
      await new Promise(resolve => setTimeout(resolve, 0));
      // Unhandled promise rejection because `forEach()` doesn't return
      // a promise, so there's no way to `await`.
      throw new Error('Oops!');
    });
  } catch (err) {
    // Does not execute
  }
}

2. Doesn't Work on arguments or Iterables

forEach() is a method on JavaScript arrays, so you can't use it with array-like values, like function arguments or iterables.

If you want to use forEach() with arguments or iterables, use Array.from() to convert to a fully fledged array first.

function test() {
  // Throws "TypeError: arguments.forEach is not a function"
  arguments.forEach(val => console.log(val));
}
test();

const map = new Map([['key', 'value']]);
// Throws "TypeError: map.keys(...).forEach is not a function"
map.keys().forEach(val => console.log(val));

// Must use `Array.from()` to convert iterable to array
// before using `forEach()`
Array.from(map.keys()).forEach(val => console.log(val));

3. Can't use break or continue

The forEach() method is a plain old JavaScript function, which means you can't use looping constructs like break or continue.

There are workarounds, but we recommend using slice() and filter() to filter out values you don't want forEach() to execute on. Filtering out unwanted elements is more idiomatic functional programming because it enables easier composition and minimizes branching.

// Prints "1, 2, 3"
const arr = [1, 2, 3, 4, 5];

// Instead of trying to `break`, slice out the part of the array that `break`
// would ignore.
arr.slice(0, arr.findIndex(v => v > 3)).forEach(v => {
  console.log(v);
});
// Instead of trying to `continue`, filter out unwanted elements
[1, 2, 3, 4, 5].filter(v => v % 2 === 0).forEach(v => {
  console.log(v);
});

Did you find this tutorial useful? Say thanks by starring our repo on GitHub!

More Fundamentals Tutorials

×
Mastering JS
Hi, I'm a JavaScript programming bot. Ask me something about JavaScript!