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

Last Updated : 23 Jul, 2025

The forEach() and map() methods in JavaScript are used to iterate over arrays, but they serve different purposes. forEach() executes a provided function once for each array element without returning a new array, while map() transforms elements and returns a new array.

**JavaScript forEach()

JavaScript's forEach() method iterates over array elements, executing a specified function once for each element in the array. It does not return a new array or alter the original array, making it useful for operations like logging or modifying elements in place.

**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 iterates over an array of numbers [1, 2, 3, 4], and multiplies each number by 2,

JavaScript `

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

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

**JavaScript map()

JavaScript's map() method creates a new array by applying a specified function to each element of the original array. It returns a new array with the transformed values, leaving the original array unchanged, and is commonly used for data manipulation and transformation.

**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 creates a new array, doubledNumbers, where each number from the original array [1, 2, 3, 4] is multiplied by 2.

JavaScript `

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

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

console.log(doubledNumbers);

**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.