forEach vs map method in Javascript

In this tutorial, let us look at two commonly used, seemingly similar array methods and compare them to see different they are. To begin with, let's quickly understand what a method is and then look at the syntax, functionality followed by comparing forEach and map methods. These methods help us iterate through arrays. In JavaScript, methods are actions that can be performed on objects.

Table of Contents

• Syntax & Explanation
• Example Code
• Ability to chain other methods

Syntax and explanation

1) forEach method

The forEach() method executes a provided function once for each element in an array. After executing the function for every array element, this method changes the values of the existing array elements according to the result of the provided function. Hence forEach() is a mutator method. Also, forEach method doesn’t return anything (undefined).

2) map method

The map() method, similar to the forEach() method, executes the provided function once for each element in an array. But unlike the forEach() method, it creates a new array with the results of calling a function for every array element. Hence map() method relies on immutability. Also, map() does not execute/call the function for those array elements without values.

Syntax:

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

array.map(testfunc(currentValue, index, arr), thisValue)

Both the methods take two arguments:

1) testFunc

The testFunc() is a function that is used to execute a condition on each element of the array until the function returns true, indicating that the element satisfying the condition was found.

The testFn() takes three arguments:

• currentValue: This indicates the current element in the array being processed.
• index: Indicates the index of the current element being processed.
• arr: This is the array that the method was called upon.

2) thisValue

It is an optional argument that is passed to the function and used as its "this" value. If it is empty, the value "undefined" will be passed as its "this" value. In JavaScript, "this" keyword refers to the object it belongs to.

The method executes testFunc() for every element of the array and if true is returned by the testFunc().

Example Code

const exampleArray = [1, 2, 3, 4, 5]
console.log(exampleArray.forEach(x => x * x * x));
//Output: (undefined)
console.log(exampleArray.map(x => x * x * x));
//Output: [1 , 8, 27, 64, 125 ]

Ability to chain other methods

Chaining methods is the ability that one can attach another method after performing one method in one continuous line of code. i.e. Repeatedly calling one method after another on an object.

One of the main differences between forEach() and map() methods is their ability to chain other methods. map() is chainable but forEach isn't. This means that one could use reduce(), sort(), and other methods after map() but that's not possible with foreach() because it returns undefined.

const exampleArray = [5, 4, 3, 2, 1]
console.log(exampleArray.forEach(x => x * x * x).sort(function(a, b){return a-b}););
//Output: Uncaught TypeError: Cannot read property 'reduce' of undefined
console.log(exampleArray.map(x => x * x * x).sort(function(a, b){return a-b}););
//Output: [1 , 8, 27, 64, 125 ]