JavaScript Arrays

JavaScript Array forEach

Written by Swapnil RajaPublished 24 Aug 2026

JavaScript forEach runs a function once for every element in an array.

It is the method version of a for of loop.

It always returns undefined, so it is used for doing something rather than building a result.

Example

javascript

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

fruits.forEach(function (fruit) {
  console.log(fruit);
});

Each name is printed on its own line.

What is forEach?

forEach takes a callback and runs it once per element.

The callback receives the value, the index, and the whole array.

It returns undefined, so you cannot chain other methods onto it.

Syntax

javascript

array.forEach(function (value, index, array) {
  // code to run
});

The index and array arguments are optional.

Using the Index

The second argument is the position of the current element.

Example

javascript

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

fruits.forEach(function (fruit, index) {
  console.log(index + ": " + fruit);
});

The output starts at 0, as always.

With an Arrow Function

An arrow function keeps the line short.

Example

javascript

const numbers = [1, 2, 3];
let total = 0;

numbers.forEach(n => {
  total += n;
});

console.log(total);

Here forEach is used to build up a total outside itself.

It Returns Nothing

This is the most common surprise.

If you want a new array, use map instead.

Example

javascript

const numbers = [1, 2, 3];

const result = numbers.forEach(n => n * 2);

console.log(typeof result);

The output is undefined.

You Cannot break Out

break and continue do not work inside forEach.

Use a normal loop, or some, when you need to stop early.

Example

javascript

const numbers = [1, 2, 3, 4];
let firstEven = 0;

for (const n of numbers) {
  if (n % 2 === 0) {
    firstEven = n;
    break;
  }
}

console.log(firstEven);

A for of loop is the right choice when you need an early exit.

Changing the Original

forEach does not change the array unless you write code that does.

Example

javascript

const numbers = [1, 2, 3];

numbers.forEach((n, i) => {
  numbers[i] = n * 10;
});

console.log(numbers.join(","));

Here the array is changed on purpose; map would be cleaner.

Complete Example

html

<!DOCTYPE html>
<html>
<head>
  <title>JavaScript forEach</title>
</head>
<body>

  <h1>JavaScript forEach</h1>

  <p id="result"></p>

  <script>
    const fruits = ["Apple", "Banana", "Mango"];
    let output = "";

    fruits.forEach(function (fruit, index) {
      output += (index + 1) + ". " + fruit + "<br>";
    });

    document.getElementById("result").innerHTML = output;
  </script>

</body>
</html>

Try It Yourself

Run the above example in the Try It Editor.

Try starting at zero:

Remove the + 1 and see the numbering change.

Important Points

forEach runs a callback once per element.
The callback receives the value, index, and array.
It always returns undefined.
You cannot break out of a forEach.
Use map when you want a new array back.

Conclusion

forEach is the simplest way to do something with every element.

Because it returns nothing, it is for side effects rather than results.

When you need a result or an early exit, reach for another method.

PreviousJavaScript Array Search NextJavaScript Array map