JavaScript Map with examples

The .map, .filter and .reduce array prototype methods are the powerhouse of most JS applications

Because of this, I’ve broken this into three articles, this way you can follow along with whatever you like!

So let's take a minute to go over what the map prototype does in simple terms. We’ll be going over a lot of little code examples, so if you’d like to follow along; Here is a Repo with the array along with the questions and answers at the bottom.

The example array

Map:

Map is my favorite prototype method for ease of use and adaptability. There are a few simple rules with .map, it always returns an array of the same size, it is non-destructive, and it returns the array with each element in the array being the result of the callback function. This prototype method is especially useful if you are trying to iterate over a large number of objects and modify or display each of them. So say we want to just display all of the info in this array we could call a .map() on it and get back the results.

tasks.map(task => task) // find this in the Repl by: A.1

There you go, now you got back the array full of objects just how they were from the dataset. The way this works is that when you call .map() on an array it can take multiple arguments to display them. The most common being just the callback function (or “task =>” from above).

Now obviously there are probably not many situations where we wouldn't want to modify some part of the array. So let's try and just get back the Title and content from the dataset and have it come back like this:

Received value

// Answer here:
tasks.map(task => task.title + ': ' + task.content) // find this in the Repl by: A.2

So the way this worked was on every iteration through the map function would see “task” as one Object, and use dot notation to access the properties of that specific object and concatenates or adds, them together. When it’s done it has an array with three values of [“Task 1: …” , “Task 2: …”, “Task 3: …”] so it is still the same length.

When it’s done it has an array with three values of [“Task 1: …” , “Task 2: …”, “Task 3: …”] so it is still the same length.

Map can take strings and make them into objects and vice versa, as long as the array stays the same length. Another great thing about map is the ability to modify elements on the fly, much faster than trying to iterate over the array, find the object and then change the object and send it back we can use a map().

Now that we’ve learned a little more about what is going on under the hood I would encourage you to go to the Repl and go through a few of the exercises.

Thanks for taking the time to read this article, if you’d like to be notified when I publish other articles, follow me on Twitter @p_goulding!

Thanks again to Alan B Smith for helping with any questions I might have, Jessica West for being a continual source of inspiration, and Turing School for shaping me into the developer I am today.