Difference between forEach() and map() loop in JavaScript

When we work with an array, it is an essential step to iterate on the array to access elements and perform some kind of functionality on those elements to accomplish any task. For this loops like ForEach() and Map() are used. In this article, we are going to learn the difference between the forEach() and map() loops in JavaScript.

JavaScript forEach()

The forEach() method is primarily used for iterating over array elements and executing a provided function once for each array element. It doesn’t create a new array and doesn’t return anything. It’s mainly used when you want to perform an operation on each element of the array without creating a modified version of the array.

Syntax:

array.forEach(callback(currentValue, index, array), thisArg);

Parameters:

This method accepts five parameters as mentioned above and described below:

• callback: This parameter holds the function to be called for each element of the array.
• element: The parameter holds the value of the elements being processed currently.
• index: This parameter is optional, it holds the index of the current value element in the array starting from 0.
• array: This parameter is optional, it holds the complete array on which Array.every is called.
• thisArg: This parameter is optional, it holds the context to be passed as this is to be used while executing the callback function. If the context is passed, it will be used like this for each invocation of the callback function, otherwise undefined is used as default.

Return value:

The return value of this method is always undefined. This method may or may not change the original array provided as it depends upon the functionality of the argument function. 

Example: In this example, we are using the ForEach() loop.

Javascript

const numbers = [1, 2, 3, 4];

numbers.forEach((number) => {
  console.log(number * 2);
});

Output

2
4
6
8

JavaScript map()

the map() method is also used for iterating over array elements, but its main purpose is to create a new array by applying a provided function to each element of the original array. It returns a new array with the results of applying the function to each element.

Syntax:

map((currentElement, indexOfElement, array) => { ... } );

Parameters:

• callback: A function to execute for each element, taking three arguments:
  • currentValue: The current element being processed in the array.
  • index (optional): The index of the current element being processed.
  • array (optional): The array map was called upon.
• thisArg (optional): Value to use as this when executing callback.

Return Value:

A new array with the results of calling the provided function on every element in the array.

Example: In this example, we are using map().

Javascript

const numbers = [1, 2, 3, 4];

const doubledNumbers = numbers.map((number) => {
  return number * 2;
});

console.log(doubledNumbers);

Output

[ 2, 4, 6, 8 ]

Differences between forEach() and map() methods

forEach()	map()
The forEach() method does not returns a  new array based on the given array.	The map() method returns an entirely new array.
The forEach() method returns “undefined“.	The map() method returns the newly created array according to the provided callback function.
The forEach() method doesn’t return anything hence the method chaining technique cannot be applied here.	With the map() method, we can chain other methods like, reduce(),sort() etc.
It is not executed for empty elements.	It does not change the original array.

Conclusion: As they are working with very few differences, also the execution speed is not significant to consider so it is time to think about, which one to choose. If you want the benefits of the return value or somehow you don’t want to change the original array then proceed with the map() otherwise if you are just interested to iterate or perform the non-transformation process on the array, forEach() could be the better choice.