.reduce(). In this blog, we will learn about the
.map() is one of a powerful Array method that is used to perform an operation on each item in an array.
MDN defines map() as
The map() method creates a new array populated with the results of calling a provided function on every element in the calling array.
Let’s try to understand what exactly it means with a code sample.
Consider an example where you have an array of objects with fields like
_id, name & age
Now you want to get only the
name of all the objects from the
persons array into a new array called
How would you do it?
There are multiple ways that you can use to achieve this. You can create an empty array called
personNames and use
for() loop, or
for (... of) loop.
Let’s see how you would do it with a
Notice, you had to create an empty
personNames array beforehand in case of
.forEach(). The same thing would be true in case of simple
for(... of) loop as well.
Let’s see how you would do this using
We can even use shorthand
arrow function (requires ES6 support, Babel or TypeScript) to make it a one-liner
It takes 2 arguments, a callback function and an optional context (will be considered as
this in the callback) which I did not use in the previous example and is optional to use.
The callback function runs for each value in the array and returns each new value in the resulting array.
The callback function takes three parameters viz.
originalArray i.e the array upon which the
.map() function is called.
In the example, we used the first parameter which was the currentValue.
Note: Keep in mind that the resulting array will always be the same length as the original array. Also
.map() will always return a new array i.e it doesn’t mutate the original array.
This should be enough to help you understand how the
.map() function works and what it does.
Take a look at another intermediate example if you want more clarity.
Take a look at another example for when can you use
.map() method to understand how it makes your life better as well as your code easier to read, understand and maintain.
Here we are using the logic of taking the first character from the string which is at 0th index and converting it to upper case using
.toUpperCase() string in-built function and then concatenating it with the rest of the characters using
.slice() method. All this is done in a single line using
.map() function and arrow function.
You can clean up the code ever better by breaking the inline callback function into separate function and pass that to the
Now the code is much cleaner and you can reuse the
capitalizeFirstCharacter() function somewhere else as well without rewriting the logic.
So I hope you have understood the Array