The map()method in Javascript is a super useful Array method to add to your JS toolbelt. In fact it's pretty hard to do much in JS these days without some exposure to the map() method. It's a very widely used method.
However, I have always been curious how it works under the hood so this is what I want to explore in this article. The first part of the article will explain what the map() method is and some cool uses of it. The second part will dig below the surface and find out how it is actually implemented.
What is the map() method
According to the
MDN documentation on the map() method, the
map() method of Array instances creates a new array populated with the results of calling a provided function on every element in the calling array.Pretty straightforward. It’s basically used to do transformations on elements in an existing array and provides a new array back. The fact it creates a new array is very useful as it does not mutate the original array.
This
callbackFn is a function to execute for each element in the array. Its return value is added as a single element in the new array. The function is called with the following arguments:
element — The current element being processed in the array.
index — The index of the current element being processed in the array.
array — The array map() was called upon.
(We’ll look at an example witht the array argument a bit later…)
Simple Example of the map() method
Let’s look at a super simple example so you get the idea of what a map() method does and what it doesn’t do.
So in this example we have an array — numbers This numbers array is mapped over using the map() method and each element is multiplied by itself. This squared value is then placed into a new array. So when every element has gone through this map method we are returned a new array squaredNumbers.
Example of map() method using the index argument
Next is an example using the second argument — index of the map() method.
In this example we can see that we are mapping over a fruits array. For each element we are returning a string with the fruit name and then we are also printing out the index. Remember! Array indexes (indices?!) start at 0.
Example of map() method using the array argument
Finally is an example of the map array being used with all three potential arguments — element, index, array.
I admit it’s not the most imaginative example in the world but it does illustrate the point that you have access to all these three arguments inside the map() method.
Example of map() method used in React
A very common place where the map() method is used nowadays is to help map over some data (from an api or some local source) and then render out some UI (React Components).
In this example we have an array of users and in the React Component we are using the map() method to map over this array and then render our the user’s firstName and lastName as a list item.
Helpful Tip with the map() method
When
undefined or nothing is returned, the resulting array contains undefined. If you want to delete the element instead, chain a
filter() method, or use the
flatMap() method and return an empty array to signify deletion.
How map() method works under the hood
I am always interested in how things work and this curiosity is what led me to programming in the first place. So whenever I learn something like this I am always curious what is going on underneath the surface level.
For the map() method it isn’t actually anything too complicated. It’s basically this:
You pass the map() method the original array and the callback function within the map() method. The function creates a new array. Then uses a for loop to iterate over the existing array, call the callback on each item of that exisiting array and then push it to the new array. Then the function returns this new array. Neat!
map() method type definition
This is the type definition for the map() method when you go to it’s definition in a code editor:
Conclusion
The map() method is a must have for any develop who wants to say they develop in Javascript/Typescript. It’s a simple method but a very useful one and one you will be finding yourself using plenty to help you manipulate data.
Loading...