Learn JavaScript Array .map() method under 5 minutes with code examples

📆 · ⏳ 4 min read · · 👀

Introduction

If you are just starting with Javascript, you might or might not have heard about these terms like .map(), .filter() or .reduce(). In this blog, we will learn about the .map() function.

.Map()

Javascript .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

const persons = [
{
_id: '001',
name: 'John Doe',
age: 25,
},
{
_id: '002',
name: 'Kevin Smith',
age: 22,
},
{
_id: '003',
name: 'Jane Doe',
age: 17,
},
{
_id: '004',
name: 'John Wick',
age: 20,
},
];

Now you want to get only the name of all the objects from the persons array into a new array called personNames.

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 .forEach(), for() loop, or for (... of) loop.

Let’s see how you would do it with a .forEach() loop.

const personNames = [];
persons.forEach(function (person) {
// Access the name property of individual person with dot(.) operator
personNames.push(person.name);
});
// personNames would be an array like
// personNames = ['John Doe', 'Kevin Smith', 'Jane Doe', 'John Wick']

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() and for(... of) loop as well.

Let’s see how you would do this using .map().

const personNames = persons.map(function (person) {
return person.name;
});
// personNames would be an array like
// personNames = ['John Doe', 'Kevin Smith', 'Jane Doe', 'John Wick']

We can even use shorthand arrow function (requires ES6 support, Babel or TypeScript) to make it a one-liner

const personNames = persons.map((person) => person.name);

How does .map() works exactly?

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. currentValue, index and 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.

A visual depiction of what is being written about

Take a look at another intermediate example if you want more clarity.

Another Example

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.

const countries = ['india', 'america', 'australia' 'germany'];
// Create an array where the first alphabet of each country is capitalized.
const capitalizedCountryNames = countries.map(country => country[0].toUpperCase() + country.slice(1));
// Output of capitalizedCountryNames
// capitalizedCountryNames = ['India', 'America', 'Australia' 'Germany']

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 .map() function.

const countries = ['india', 'america', 'australia' 'germany'];
// capitalizeFirstCharacter function which takes a name as a parameter and returns a string with first letter capitalized name
const capitalizeFirstCharacter = (name) => name[0].toUpperCase() + name.slice(1);
// Simply pass the capitalizeFirstCharacter as the callback function
const capitalizedCountryNames = countries.map(capitalizeFirstCharacter);
// Output of capitalizedCountryNames
// capitalizedCountryNames = ['India', 'America', 'Australia' 'Germany']

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 .map() function in Javascript.

You may also like

  • # javascript

    Write Secure JavaScript Applications

    Dive into the realm of writing secure JavaScript applications. Uncover practical strategies to shield your web apps from XSS and CSRF vulnerabilities, ensuring robust and safe software in an interconnected world.

  • # javascript

    Multi-Threaded JavaScript with Web Workers

    Are you tired of slow and unresponsive web applications? Do you want to improve the performance of your JavaScript code without sacrificing user experience? Look no further than JavaScript's Web Workers API. In this article, we'll explore the basics of web workers and how they can help you create multi-threaded web applications.

  • # javascript

    Asynchronous JavaScript Programming: A Guide to Promises, Async/Await, and Generators

    Asynchronous programming is essential in JavaScript to handle time-consuming operations and provide a better user experience. This article will provide a detailed guide to mastering asynchronous JavaScript programming with Promises, Async/Await, and Generators.