JavaScript: How to use Array forEach() Method in JavaScript

Array forEach() method is usually the go-to method if we need to iterate through to perform operation on every element without expecting a return. Array forEach() is introduced since ES5.

What is Array forEach Method

Array refers to standard built-in object in JavaScript and forEach() or Array.proto.forEach() method is part of Array as shown in the documentation. It is design to have a callback function execute over every element and does not return anything.

forEach() method takes in a callback function that have up to 3 argument inputs. 1st argument being the element data is compulsory where it is the element. 2nd argument is the index and 3rd argument is the original array where these are optional.

// Syntax of forEach() method
// passObject is optional, its purpose is for us to pass values in
myArray.forEach(callback[,passObject]);

// Syntax of callback function
function(currentElement)
function(currentElement, index)
function(currentElement, index, originalArray)

There are 3 ways of how we can define the callback function. There are:

• Arrow function
• Callback function
• Inline callback function

Let’s look at the illustration below. Since we do not need to pass data into the callback function, there is no need for passObject.

// Arrow Function Type
myArray.forEach((currentElement) => { 
  console.log(currentElement);
});

// Callback Function Type
myArray.forEach(callbackFn);

// Inline Callback Function Type
myArray.forEach(function(currentElement) { 
  console.log(currentElement);
});

Features of forEach()

• Process on all elements without return anything back
• Not chain-able to other methods since nothing is return
• Before the first execution of callback, it will capture and fix the array size to process.
  • Will not process new array element.
• If a later array element is updated in the early iteration, this updated data will be passed to the callback function when come to its iteration.
• Every iteration will execute base on the index count regardless of the element state. If the array shift to the left in iteration X, the next iteration will access index X+2 element.
• Does not work with asynchronous callback function
• No method will be able to stop or break out of the loop. Only with exception, then can break out.

Usage of Array forEach() Method

Pre-ES5 Style

To write it with pre-ES5 style, we will only loop through and do processing on the data.

In the illustration below, we will print out all the elements in readable form.

var personArray = [
  { name: 'Person1', age: 6 },
  { name: 'Person2', age: 30 },
  { name: 'Person3', age: 80 },
]);

for (var i = 0; i < personArray.length; i++) {
  console.log(personArray[i].name + ': ' + personArray[i].age )
}

// Person1: 6
// Person2: 30
// Person3: 80

ES5 Style

Let’s look into how to use forEach() method with the below example.

First, let’s define a basic array consisting of person and their age. Next, we will increment the age of everyone in the original array. We will need to use the element and index here. No need original array data.

const personArray = [
  { name: 'Person1', age: 6 },
  { name: 'Person2', age: 30 },
  { name: 'Person3', age: 80 },
]);

personArray.forEach((currentElement, index) => {
  currentElement[index].age = currentElement[index].age + 1;
});

console.log(personArray);
// [
//   { name: 'Person1', age: 7 },
//   { name: 'Person2', age: 31 },
//   { name: 'Person3', age: 81 },
// ]);

Conclusion

From the above illustration, we can see that forEach() does not return any value after processing each element. But we can still use it to modify the original array.

More Reading

Here are more articles on Array related methods.

• every() Method
• filter() Method
• map() Method
• reduce() Method