JavaScript forEach: How to Iterate Array in JavaScript

JavaScript forEach() method is called on the array Object and is passed the function on each item in the array. It can only be used on Arrays, Maps, and Sets.

Javascript forEach

The array forEach() is a JavaScript function that executes the provided function once for each array item. The forEach() array method is used to iterate through each item in an array. When using forEach, we have to specify a callback function. This callback function will be executed on each item in the array.

The callback function can also take a second parameter of an index in case you need to reference the index of the current item in the array.


The syntax for the forEach Javascript function is the following.

array.forEach(function(currentValue, index, arr), thisValue)


The currentValue is the current item in an array that is iterating.

The index is an optional parameter, which is the current element index of an array.

The arr is an optional parameter, which is an array object to which the current element belongs.

The thisValue is an optional parameter that is the value to be passed to the function to be used as its “this” value.

Array forEach() example

An Array.forEach() function calls the provided function once for each array element.

The provided function may perform any operation on the elements of the given array. 

Let us create a folder, and inside that, create a file called app.js and add the following code.

// app.js

var arr = [1, 2, 3, 4, 5];
var newArray = [];

arr.forEach(function(item) {
    newArray.push(item + 21);


In the above example, we use the forEach function to add 21 to every array item. So the newly created element looks like this.

Javascript Array Foreach Example | Array.prototype.forEach() Tutorial

We can write the above function in the ES6 style.

// app.js

let arr = [1, 2, 3, 4, 5];
let newArray = [];

arr.forEach(item => newArray.push(item + 21));


The forEach() executes the callback function once for each array element; unlike map() or reduce() it always returns the value undefined, and it is not chainable. So we can use it to execute at the end of a chain.

Accessing Array Index in forEach() method

We can access the index inside the function like this.

// app.js

let arr = [1, 2, 3, 4, 5];
let newArray = [];

arr.forEach((item, i) => console.log(i));

Now, the output will be like this.

forEach method in Javascript

There is no way to break the forEach() function other than throwing an exception. If you need such behavior for your code, then the forEach method is not an option here. You can use it for() loop here.

If an array is modified during iteration

Let us take a scenario where we change the array, which is being iterated, and then it might skip the other values. See the following example.

// app.js

let arr = [1, 2, 3, 4, 5];

arr.forEach(item => {
    if(item == 3) {

In the above example, if the condition is fulfilled, then the next element of the array is skipped. So, when the item = 3, the 4 value is skipped and directly goes to 5. That means we have modified the array using our logic and skipped one element, which violates the forEach() function because it always executes on each item of an array.

Iterate(keys, values) in Javascript

To iterate the key-value pair in the JavaScript, the forEach() function will not help us. To iterate Object in JavaScript, use the loop.

See the following example.

// app.js

let strangerThings = [{
  name: 'Dustin',
  age: 13
}, {
  name: 'Mike',
  age: 12
    name: 'Eleven',
    age: 11

for (const name in strangerThings) {
  if (strangerThings.hasOwnProperty(name)) {

See the following output.

➜  es git:(master) ✗ node app
{ name: 'Dustin', age: 13 }
{ name: 'Mike', age: 12 }
{ name: 'eleven', age: 11 }
➜  es git:(master) ✗

How to Break forEach loop in Javascript

You can’t break from the forEach function. Instead, you should use a normal for loop.

In some cases, Array.every() function will probably fulfill the requirements.

How do I go to the next iteration of a Javascript Array.forEach() loop

You can return if you want to skip the current iteration.

Since you’re in a function, if you return before doing anything else, you have effectively skipped executing the code below the return statement.

JavaScript works differently from the one that might be used in other languages for each loop.

If you read on the MDN, it says that the function is executed for each of the elements in the array, in the ascending order, so, if we want to continue to the next item, that is, run the next function, you can return a current function without having it do any computation.


This method is a JavaScript extension to the ECMA-262 standard; as such, it may not be present in other implementations of the standard. To make it work, you must add the following code at the top of your script.

if (!Array.prototype.forEach)
   Array.prototype.forEach = function(fun /*, thisp*/)
      var len = this.length;
      if (typeof fun != "function")
      throw new TypeError();
      var thisp = arguments[1];
      for (var i = 0; i < len; i++)
         if (i in this), this[i], i, this);

Javascript forEach() and Javascript push()

Let’s copy all the values from one array to another using the Javascript foreach function and array push() function.

// app.js

const elements = [11, 21, 46];
const copy = [];


See the output.

➜  es git:(master) ✗ node app
[ 11, 21, 46 ]
➜  es git:(master) ✗

The function forEach() in this example adds every element to the new array.

Difference between forEach() and for in loop

Javascript forEach() is an Array method that we can use to execute a function on each item in an array. Javascript for in loop is used to iterate over the enumerable properties of objects.

Every property in an object will have an Enumerable value — if that value is true, then the property is Enumerable.

That’s it for this tutorial.

Recommended Posts

Javascript array map()

Javascript array filter()

Javascript array reverse()

Javascript array reduce()

Javascript array includes()

1 thought on “JavaScript forEach: How to Iterate Array in JavaScript”

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.