JavaScript: How to use Array map() Method in JavaScript

Array map() method is usually the go-to method if we need to iterate through and return a new array with updates over all the original values. Array map() is introduced since ES5.

What is Array map Method

Array refers to standard built-in object in JavaScript and map() or Array.proto.map() method is part of Array as shown in the documentation. It is design to have a callback function execute over every element and return a new array with updated elements in the same order.

Do note that if we do not have the need to use the newly return array or not having all the updated element return, we should not be using map() method but other method like forEach() or for…of.

map() method takes in a callback function that have up to 3 argument inputs. 1st argument being the element data is compulsory where it is the element. 2nd argument is the index and 3rd argument is the original array where these are optional.

// Syntax of map() method
// passObject is optional, its purpose is for us to pass values in
myArray.map(callback[,passObject]);

// Syntax of callback function
function(currentElement)
function(currentElement, index)
function(currentElement, index, originalArray)

There are 3 ways of how we can define the callback function. There are:

• Arrow function
• Callback function
• Inline callback function

Let’s look at the illustration below. Since we do not need to pass data into the callback function, there is no need for passObject.

// Arrow Function Type
myArray.map((currentElement) => { 
  // Logic here
  return currentElement;
});

// Callback Function Type
myArray.map(callbackFn);

// Inline Callback Function Type
myArray.map(function(currentElement) { 
  // Logic here
  return currentElement;
});

Features of map()

• map() method make use of closure to have the internal variables inside not exposure externally.
• less code is also needed since it will auto create the array and push all return element to the new array.

Usage of Array map() Method

Pre-ES5 Style

To write it via pre ES5 style, we will first need to create a new empty array variable. Subsequently, we create the new/updated objects and push it to the new array.

In the illustration below, we want to increment the age by 1.

var personArray = [
  { name: 'Person1', age: 6 },
  { name: 'Person2', age: 30 },
  { name: 'Person3', age: 80 },
]);

var incrementAgeArray = [];
for (var i = 0; i < personArray.length; i++) {
  incrementAgeArray.push({
    name: personArray[i].name,
    age: personArray[i].age + 1,
  });
}

console.log(incrementAgeArray);
// [
//   { name: 'Person1', age: 7 },
//   { name: 'Person2', age: 31 },
//   { name: 'Person3', age: 81 },
// ]);

ES5 Style

Let’s look into how to use map() method with the below example.

First, let’s define a basic array consisting of person and their age. Next, we want to increment the age of everyone. We will just need to use the element here. No need index and original array data.

const personArray = [
  { name: 'Person1', age: 6 },
  { name: 'Person2', age: 30 },
  { name: 'Person3', age: 80 },
]);

let incrementAgeArray = personArray.map((currentElement) => {
    return {
      ...currentElement,
      age: currentElement.age + 1;
    };
});

console.log(incrementAgeArray);
// [
//   { name: 'Person1', age: 7 },
//   { name: 'Person2', age: 31 },
//   { name: 'Person3', age: 81 },
// ]);

Conclusion

From the above illustration, we can see that less code will be required if we use map() method instead of a traditional for-loop.

More Reading

Here are more articles on Array related methods.

• every() Method
• filter() Method
• forEach() Method
• reduce() Method