JavaScript Arrays
JavaScript
forEachruns 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.
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.
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.
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.
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.
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.
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>Run the above example in the Try It Editor.
Try starting at zero:
Remove the + 1 and see the numbering change.
forEach runs a callback once per element.undefined.break out of a forEach.map when you want a new array back.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.