What is difference between forEach() and map() method in JavaScript?

Front End Technology Javascript Web Development

JavaScript provides several ways to loop through arrays and objects. The most common way is the for loop, which is used to iterate through the elements of an array or object. However, there are other ways to loop through arrays and objects, such as the forEach() and map() methods.

The forEach() Method

The forEach() method is used to loop through each element of an array or object. The forEach() method takes a callback function as an argument. The callback function is invoked for each element of the array or object.

The forEach() method is similar to the for loop, but it does not have a return value.

Example

Below is the full working code with an explanation −

<!doctype html>
<html>
<head>
   <title>Examples</title>
</head>
<body>
   <div id="result"></div>
   <script>
      var arr = [1,2,3,4,5];
      arr.forEach(function(element){
         var item2 = document.createElement('div');
         item2.innerText = element;
         document.getElementById("result").appendChild(item2);
      });
   </script>
</body>
</html>

In the above code, we have defined an array named “arr”. The forEach() method is called on the “arr” array. The forEach() method takes a callback function as an argument. The callback function is invoked for each element of the “arr” array.

The map() Method

The map() method is used to loop through each element of an array or object. The map() method takes a callback function as an argument. The callback function is invoked for each element of the array or object.

The map() method is similar to the forEach() method, but it returns a new array.

Example

Below is the full working code with an explanation -

<!doctype html>
<html>
<head>
   <title>Examples</title>
</head>
<body>
   <div id="result"></div>
   <script>
      var arr = [1,2,3,4,5];
      arr.map(function(element){
         var item2 = document.createElement('div');
         item2.innerText = element;
         document.getElementById("result").appendChild(item2);
      });
   </script>
</body>
</html>

In the above code, we have defined an array named “arr”. The map() method is called on the “arr” array. The map() method takes a callback function as an argument. The callback function is invoked for each element of the “arr” array. The return value of the callback function is stored in a new array named “newArr”.

map() vs forEach()

Some of the difference between map() and forEach() methods are listed below −

The map() method returns a new array, whereas the forEach() method does not return a new array.
The map() method is used to transform the elements of an array, whereas the forEach() method is used to loop through the elements of an array.
The map() method can be used with other array methods, such as the filter() method, whereas the forEach() method cannot be used with other array methods.

Conclusion

In conclusion, the forEach() and map() methods are both used to loop through arrays and objects. The forEach() method does not return a new array, whereas the map() method returns a new array. The map() method is used to transform the elements of an array, whereas the forEach() method is used to loop through the elements of an array.