Javascript Map, and How it is Different from forEach

📣 Sponsor

The map method is one of the most used functions in Javascript. It is used to take arrays, and return a new array which can be changed with an attached function. When you start developing in Javascript, you'll see map everywhere. Let's look at how it works.

How map works in Javascript

map() is a method of arrays. That means you can only use map on something which is typed as an array. For example, [ 1, 2, 3 ].map() will work, but 14.map() will not.

The map() method itself accepts one function. Let's look at an example:


let arr = [ 1, 2, 3, 4 ];

let mappedArr = arr.map((item) => {
    return item * 3;
});

// Returns 3, 6, 9, 12
console.log(mappedArr);

map() goes through each item in an array, and returns in its place whatever you modify it with in the map() function. Above, we take every item in our array, and multiply it by 3.

We store this new mapped array in a variable called mappedArr. It's important to note that map() doesn't modify the original array. It simply creates and returns a new array, which we can store in a variable should we choose to.

You can modify the array in any way that you like - including by adding strings. Whatever you return in the map function, will replace that particular item in the new array.


let arr = [ 1, 2, 3, 4 ];

let mappedArr = arr.map((item) => {
    return 'Number: ' + arr;
});

// Returns "Number: 1", "Number: 2", "Number: 3", "Number: 4"
console.log(mappedArr);

Arguments in map function

As shown above, we can access the item itself in map(), but we can also access other useful things relating to the array.


let arr = [ 1, 2, 3, 4 ];

let mappedArr = arr.map((item, index, array) => {
    return 'Number: ' + arr;
});

The above is the same function as before, but showing the 3 arguments available to you when you use the map() function:

item - this is the value of the current array item being looped through.
index - this is the index of the array that we are currently at. So if we are on the 2nd element in the array, the index will be 1 - since it starts counting from 0.
array - this is the full array map was called upon - which we can access if we need to.

This gives us a lot of flexibility in how we can manipulate an array using map().

Difference between map and forEach

You might see map and forEach being used interchangeably. The difference between both of these is that forEach loops through an array, but doesn't return the array at the end. map(), on the other hand, returns a new array when it's used.

Therefore, you might want to use forEach if you don't want to return a new array at the end of your function.

Conclusion

map() is used extensively in Javascript, as arrays are a major part of handling data in the language. If you are interested in learning more about arrays, check out the cheatsheet I wrote here.

Last Updated 1647964784797