A closer look at the forEach() JavaScript array method

Before the Array.forEach() method, iterating through an array in JavaScript would involve using a for loop.

const beans = ['kidney', 'baked', 'black'];

for (let i = 0; i < beans.length; i++) {
  console.log(beans[i]);
}

// kidney
// baked
// black

Using Array.forEach() makes things a bit simpler.

beans.forEach(function(bean) {
  console.log(bean);
}

// kidney
// baked
// black

But what does the Array.forEach() method actually do?

All array methods are functions attached to the Array.prototype object. We want our method to execute a provided function to each element of the array. What would this method look like then? Under-the-hood, the method is still in fact using a for loop.

Array.prototype.forEach = function (callback) {
  if (callback && typeof callback === 'function') {
    for (var i = 0; i < this.length; i++) {
      callback(this[i], i, this);
    }
  }
};

The for loop will iterate through each item in the array, and pass in the current item in the loop, the current index, and the array itself as arguments to the callback provided. Because the method is attached to the prototype, it can use this to refer to the array itself.

Leave a Reply

Your email address will not be published. Required fields are marked *