Map vs forEach difference between javaScript array methods

Hi there,

Warm welcome to my peers. I am writing this article to help you to understand the core difference between these two arrays methods.

So, If you are ready and excited then, Just give it a shot! I will try my best to transform that I understand as a beginner. I assume that you have basic knowledge of programming. But I am writing some basic steps. Because it’s a beginner-friendly article. Also good for someone who wants to look for the difference.

Array is a special kind of data structure from the object. It stores the values by indexing.

Here’s myArray. ex: let myArray = [1, 2, 3];

You know how to access the array values and modify them and also that how to iterate them. If you don’t know how to iterate an array then don’t worry I will take care of it by explaining the way to iterate. There are many loops available in javaScript to for iterating over any data type like this. There’s for loop the popular one. But you know that you have to define every single step to get the job done.

For example:

for (let round = 0; round < myArray.length; myArray++) { // some code }

You will have to define the array with the steps like initiate the variable, condition to evaluate every time and steps to do. By the way, you don’t need to do all these steps. You can simply use some built-in methods of the array. These methods are called arrays method. So, we are going to use one of the inbuilt methods of arrays. That is called the forEach method and the map method. Can you see there are two methods to get the job done? But why there’re two for the same. If you ask this question then an answer should be available.

Because there’s nothing without any reason. So, I will explain the reason behind it. But starting with the simple things is a good approach that we should take first now.

It’s pretty simple to work with the inbuilt methods. Methods will take care of everything that you want to do without the hassle. There are many array's inbuilt methods available. But, I will list here some of them to use and comparable for now.

There is forEach and map method for iterate the array. Both are popular for the array.

But, how do we use array methods? Don’t know. That’s not bad at all. You can simply call or invoke the array method on the array. as the example below:

let myArray = [1, 2, 3]; // Re-initialized it for better illustrate

myArray.forEach(); // Invoking or calling forEach method on myArray

As you can see that I called or invoked the forEach method on the array. Keep in mind the map method is also similar to this. So, I didn’t describe here for an example as forEach. You know that array is a special kind of data structure from the object. If you want to access any property from the object then you have to use dot notation or square bracket notation. So, we use dot notation here. Now object properties are available to use for an array. You can simply call any method that you want. So, we are calling the forEach method here. But it’s not enough as of now.

Why? Because forEach will just iterate through the array and will not do anything ( mutate ) to the array items. If you want to do anything with the array then you have to define what to do next after taking the items one by one. forEach or map takes the one by one item and through it to your defined steps. So, How do we define steps to perform next? You have to pass a callback function to the forEach or map method. How? We will add one to all the items. See the example below,

myArray.forEach( ); // We can define a callback function here // between the brackets. myArray is defined earlier forEach(item => item + 1); // Defined the steps between the brackets

As defined the steps to do after forEach iterate through one by one item of the array. It will be modified and one will be added to every item of myArray. If you want to see the result printed then apply a console.log( ) method to see it in your browser's console. Just copy and paste the below given code to your console.log().

1. let myArray = [1, 2, 3];

2. myArray.forEach(item => console.log(item + 1));

Oh, It’s printing to console right?

Yes, it all prints the modified numbers to the console. Do you know where callback function is being invoked? The callback function is invoked by the forEach method and also myArray items are passed to callback function by the forEach method. It does more than a simple callback function. So, the map function also works pretty similarly as forEach works. But there’s much difference between them. The difference is a must for the existence of the map method. Now add the 2nd line of code to a variable. What do you think will variable store all the changes? Check it by printing the value of the variable. Oh, it does nothing. So, Simply means is the forEach method doesn’t return anything. It just modifies the array data. Sometimes we need to store the modified data of the array. But How? Here comes the map method to use. The map method returns the modified data that you can store in the variable. For example:

let myArray = [1, 2, 3];

let modArray = myArray.map(item => item + 1); // The map method

Now if you print the modArray then you will see a new array in the console.

modArray (3) [2, 3, 4]

So, the map method works pretty similarly to the forEach. Both iterates the given array. However, the map returns a new modified array and forEach returns `undefined`. Note: Both methods iterate the array, which doesn’t mean that the original `mainArray` is being modified. It does create a clone array, modifies and returns that ( map only ). It is the key difference between these methods. So it’s all that these methods do and the difference between the two.

I hope that this article will help you to understand the key difference between these two array methods. I will write more for you with more clear with best illustration.

Please feel free to add your feedback to improve future articles. Thanks for giving it a shot.