JavaScript map() Method | Array.prototype.map()

Today we are going to understand JavaScript map() function. In this tutorial, We will take some example to understand how JavaScript map() method works.

If you are a beginner in JavaScript programming, chances are higher that you haven’t heard about .map() method.

This tutorial is most likely applies to whatever other languages you are using because these concepts already exist in many other programming languages.

JavaScript map() Definition

The map() method is used to apply a callback function once for every element in an array. In return, a new array is returned and the resulting array will always be the same length as the original array.

map() Method Syntax

var new_array = old_array.map((current_value, index, arr) => {
  // return or push element to new Array
});

Let’s understand, what all arguments and variable do here?

• new_array  – The new array that is returned as a result.
• old_array – Our main array on which to run the map function.
• current_value – the current value being processed in the array
• index – The current index of the value being processed in the array.
• arr – The original array the map was called upon.

Let’s take a simple example to understand the syntax and how things work in a map() method.

Let’s say, you have an array which contains multiple objects and each object is representing a user’s data. As a result, we want an array containing the user’s ID only.

See our code below:

// Our main array
var users = [
  { id: 16, name: 'James' },
  { id: 32, name: 'Robert' },
  { id: 47, name: 'Joseph' },
  { id: 75, name: 'Charles' },
  { id: 89, name: 'Thomas' },
  { id: 98, name: 'David' }
];
// We need as a result
[16, 32, 47, 75, 89, 98]

There are many ways to get the desired results. You can do it by creating an empty array, then simply using .forEach(), .for(…of), or a simple .for().

Let’s compare how it looks like:

Using JavaScript .forEach() Method:

var usersIds = [];

users.forEach(function (user) {
  usersIds.push(user.id);
});

See, how we have created an empty array first userIds and then pushing the user’s id into it.

Using JavaScript .map() Method:

var usersIds = users.map(function (user) {
  return user.id
});

We can make it more concise using arrow functions but it requires ES6 support, Babel or TypeScript.

const usersIds = users.map(user => user.id);

You can also modify the element of an array using map() method.

var numbers = [2, 5, 8, 11, 13];
var result = numbers.map(function(number) {
  return number * 2;
});

// result is now [4, 10, 16, 22, 26]
// numbers is still [2, 5, 8, 11, 13]

Try to execute the above code, When you print the numbers, it will give you the same result as our original array. But the result will give you the new modified array.

Conclusion

So how JavaScript map() method works? It takes two arguments a callback function and an optional context which we have not used in our examples.

There is an awesome detailed explanation is here.

Finally, JavaScript JavaScript map() Method | Array.prototype.map() Method tutorial is completed. Hope you liked this tutorial.

Want to start MongoDB from scratch? Stat from here – Learn MongoDB