Introduction

JavaScript array has many iteration methods like, map(), filter(), reduce(). I discussed Reduce method in my last article. Today I will be talking about the Map() method.

What is Map() method?

The map() method allows you to iterate through the elements in an array and apply a function to them. It returns a new array with the results of applying a function to the previously mentioned element. It doesn't mutate the array which is being called on.

According to MDN, The map() method creates a new array populated with the results of calling a provided function on every element in the calling array.

Prerequisite

• You must understand how an array works.
• You must have the basic knowledge about ES6 Arrow function.

Map() syntax:

let newArray = arr.map(function callback( currentValue[, index[, array]]) {
    // return element for newArray
}[, thisArg])

Callback function: The function is called on every element in the array and, the returned value is added to newArray.

The callback function accepts three arguments:

• Current value: The current value is the element being processed in the array.

• Index: It's the index of the element being processed in the array.

• Array: It is the array map() method was called on. It is also known as the source array.

thisArg: it is the value to use as this when executing callback.

Returned value: It is the new array containing result from the callback function.

Note: There are some cases you, don't need to use the map() method on an array, which is:

1. If you are not using, the array it returns.
2. If you are not returning a value from the callback function.

You can make use of forEach or for...of method.

Use cases of the Map() method

Mapping an array of numbers to an array of square roots

If arr = [4, 9, 16]. find the square roots of numbers in the arrayarr without mutating the array.

let arr = [4, 9, 16];
let roots = arr.map(x => Math.sqrt(x));
//arr is not mutated
//roots returns [2, 3, 4]

Extracting data from an array

We have an array containing names, usernames, emails and phone numbers of employees in an organisation, and we need only their names and Emails in another array.

const employee = [
  {
    name: 'john Doe', username: 'johnD',
    email: 'johndoe@gmail.com', 'phone number': '+1(555)5555555'
  },
  {
    name: 'Damilola Adetokunbo', username: 'Dami',
    email: 'damilolaadetokunbo@gmail.com', 'phone number': '+2348146785555'
  },
  {
    name: 'Folashade Alabi', username: 'Folashade',
    email: 'folashadealabi2@gmail.com', 'phone number': '+2348145425555'
  },
  {
    name: 'Man Lundgreen', username: 'Lundgreen',
    email: 'manlundgreen@gmail.com', 'phone number': '+1(555)5456555'
  },
  {
    name: 'Doretta Vanderpol', username: 'Doretta',
    email: 'dorettavanderpol@gmail.com', 'phone number': '+1(555)3209855'
  }

];
let userData = employee.map(user => ({ Name: user.name, Email:  user.email}))
console.log(userData)

The userData will be:

[
  {
    Name: 'john Doe',
    Email: 'johndoe@gmail.com'
  },
  {
    Name: 'Damilola Adetokunbo',
    Email: 'damilolaadetokunbo@gmail.com'
  },
  {
    Name: 'Folashade Alabi',
    Email: 'folashadealabi2@gmail.com'
  },
  {
    Name: 'Man Lundgreen',
    Email: 'manlundgreen@gmail.com'
  },
  {
    Name: 'Doretta Vanderpol',
    Email: 'dorettavanderpol@gmail.com'
  }
];

Conclusion

Hope this is a useful explanation of the map() method in JavaScript. Give it a try if you are not using it already.