Post
Ask Question

What's The Difference Between forEach And Map Methods

Introduction

 
Are you currently learning the JavaScript language and are within the subject area of loops, iteration, and arrays? Plus you stumbled upon these two methods: Array.forEach() and Array.map(). Finally, are you confused? No worries, because in this post, we are going to answer the differences between these two methods.
 

What is the Array.forEach?

 
The forEach method allows you to run a function/method for every element inside the array.
 
The syntax,
  1. //the syntax     
  2. [].forEach(function(item, index, array){    
  3.     //do your stuff here...    
  4. });  
Argument Description Required
 item  The current item being processed.
 index  The index of the current item in the array.
 array  The array forEach was called upon.
 
Quick Example
  1. ["apple", "mango", "avocado", "dragon fruit"].forEach(console.log);   
Output
 
 
As you can see, we have shown the 3 arguments of the forEach method by passing the console.log method. Easy isn’t it? I will get in-depth in the later section.
 

What is the Array.map?

 
The map method returns a new set of arrays but doesn’t change the original array.
 
The syntax,
  1. //the syntax:   
  2. [].map(function(currentValue, index,currentArray){  
  3. //do your stuff here ...  
  4. }, thisValue)   
Argument Description Required
 currentValue  The current item being processed.
 index  The index of the current item in the array.
 currentArray  The array map was called upon.
 thisValue  Value to use as this when executing callback.
 
Quick Example
  1. ["apple", "mango", "avocado", "dragon fruit"].map((currentValue) => currentValue.toUpperCase());   
Output
 
 
As you can see, we have shown how the map method returns a new set of arrays in uppercase.
 

The difference between forEach and map

 
Now, that we have seen the syntax of these two array methods, we can go and answer their differences. Will do our best to explain the difference with the use of code samples. However, before going into each detail, we need some form of data.
  1. const employees =  
  2.     [{  
  3.         employee: 'Eleanor R. Crane',  
  4.         company: 'Tellus Faucibus Leo Incorporated',  
  5.         dailyRate: 0,  
  6.         salary: 15200  
  7.     },  
  8.     {  
  9.         employee: 'Haviva E. Lane',  
  10.         company: 'Eu Neque Pellentesque Incorporated',  
  11.         dailyRate: 0,  
  12.         salary: 13333  
  13.     },  
  14.     {  
  15.         employee: 'Merrill F. Morrison',  
  16.         company: 'Lobortis Quam Ltd',  
  17.         dailyRate: 0,  
  18.         salary: 1450  
  19.     },  
  20.     {  
  21.         employee: 'Halee L. Hensley',  
  22.         company: 'Elit Corp.',  
  23.         dailyRate: 0,  
  24.         salary: 15872  
  25.     },  
  26.     {  
  27.         employee: 'Hamish T. Trevino',  
  28.         company: 'Rhoncus LLC',  
  29.         dailyRate: 0,  
  30.         salary: 14214  
  31.         }];   
forEach
  • Has no result value or doesn’t return anything.
  • Iterates over a list and applies some operation with side effects to each list. If you need to do something meaningful, you can do some side effects while iterating.
  1. const TOTAL_WORKING_DAYS = 261;  
  2.   
  3. //Horrible in my opinion, worst someone will say it is ugly.   
  4. const dailyRate = (item, index, array) => array[index].dailyRate = Math.floor(((item.salary * 12) / (TOTAL_WORKING_DAYS)));  
  5.   
  6. //undefined as forEach doesn't return any results.  
  7. let dailyRateEmployeeResults = employees.forEach(dailyRate);  
  8.   
  9. console.log(dailyRateEmployeeResults);//undefined  
  10.   
  11. console.log(employees); //With side effects.  
Output
 
 

Thoughts on the forEach method

 
Every time working with the forEach method, I have observed that it describes the control flow. No mystery, right?. Hence, we can say that it is imperative.
 
map
  • Returns a new list without changing anything else.
  • Has no side effects, it doesn't change the original array-list.
  1. const TOTAL_WORKING_DAYS = 261;  
  2.    
  3. const getDailyRate = salary => Math.floor(((salary * 12) / (TOTAL_WORKING_DAYS)));  
  4.    
  5. const dailyRate = employee => Object.assign({}, { employee: employee.employee, dailyRate: getDailyRate(employee.salary) });  
  6.    
  7. //Returns a new set of empoloyees with dailyRate and name  
  8. const newEmployees = employees.map(dailyRate);  
  9.    
  10. //new data  
  11. console.log(newEmployees);  
  12.    
  13. //old data  
  14. console.log(employees);  
Output
 
 

Thoughts on the map method

 
Again, going back to my observations but with the map method. I have observed that it is somewhat of a flow of data. Meaning, when you have an input array then it outputs a new array through the use of this method. Hence, we can say that it is functional.
 

Conclusion

 
It is obvious that these two methods have opposing views when it comes to usage which has its own pros and cons. Therefore, we can conclude that the forEach method is using the imperative paradigm while the map method uses the functional programming paradigm.
 

Summary

 
We have seen the difference between forEach and map. We started from its syntax all the way up to the differences with code samples. I hope you have enjoyed this article, as much as  I have enjoyed writing it. Stay tuned for more. This post was originally posted here. Many thanks, and until next time, happy programming!


Similar Articles