Looping over Array using JavaScript forEach(), With Examples

This article will show you how to use the JavaScript forEach() method to loop over an array.

Pretty much any application of any complexity will require the looping over arrays (lists) of data.

The JavaScript forEach() method, which is built into JavaScript array variables, does just this. You’ll be using it a lot – so thankfully, it’s pretty darn easy to use.

JavaScript forEach() Syntax

arr.forEach(callback(currentValue[, index[, array]]) {
    // execute something
}[, thisArg]);

Note that:

• arr is an array or a variable containing an array
• callback is the function to execute for each element in the array
• currentValue is the current element being processed in the array, available within the callback function
• index can be optionally specified to get the index of currentValue while processing the array and make it available within the callback function
• array can also be optionally specified to make available the array that is being processed within the callback function
• thisArg is the value to use as this when executing the callback
  • this is a variable with a special meaning in JavaScript. Wherever it is used, it refers to the object it belongs to.
  • If this makes no sense, don’t worry – it’s not commonly used with forEach() – it will make sense as you progress further into understanding JavaScript and Object-Oriented Programming
• There is no return value from this method

JavaScript forEach() Example

Here’s an example that prints out each item in an array of cars along with the index it is stored at in the array:

var cars = ["ford", "holden", "lada", "fiat"];

cars.forEach(function(item, index){
    console.log(item + "exists at index" + index); // Will print the car name and the index it appears at
});

If you were to want to access the cars array from within the forEach callback function as it is being executed, you could pass it as an optional third parameter:

cars.forEach(function(item, index, theArray){
    console.log(theArray); // theArray will contain the cars array as it as passed as the third parameter above
});

The rarely used and slightly confusing thisArg can be used as follows:

var driverObject = { name: 'tim', age: 54 }; // An object with details of a car driver

cars.forEach(function(item){ 
    console.log(item); // Will print the item from the cars list 
    console.log(this.name); // Will print 'tim', as driverObject was passed as the value to use when referring to the variable called 'this'
}, driverObject)

Again, if thisArg makes no sense, that’s OK, it’s rarely used, and it will probably make sense if/when the time comes to use it.

As for this itself, it’s a fundamental JavaScript concept – find out more about it here.