The Array map method is the most useful and widely used array method among all other methods.

The Array map method has the following syntax:

Array.map(function callback(currentValue[, index[, array]]) {
    // Return element for new_array
}[, thisArg])

The map method executes a provided function once for every element in the array and it returns a new transformed array.

Take a look at the below code:

const months = ['January', 'February', 'March', 'April'];
const transformedArray = months.map(function (month) {
  return month.toUpperCase();
});

console.log(transformedArray); // ["JANUARY", "FEBRUARY", "MARCH", "APRIL"]

Here's a Code Pen Demo.

In the above code, inside the callback function, we’re converting each element to uppercase and returning it.

The equivalent for loop code for the above example looks like this:

const months = ['January', 'February', 'March', 'April'];
const converted = [];

for(let i = 0; i < months.length; i++) {
 converted.push(months[i].toUpperCase());
};

console.log(converted); // ["JANUARY", "FEBRUARY", "MARCH", "APRIL"]

Here's a Code Pen Demo.

Using map method helps to avoid creating a separate converted array beforehand for storing the converted elements. So it saves memory space and also the code looks much cleaner using array map method, like this:

const months = ['January', 'February', 'March', 'April'];

console.log(months.map(function (month) {
  return month.toUpperCase();
})); // ["JANUARY", "FEBRUARY", "MARCH", "APRIL"]

Here's a Code Pen Demo.

Note that the map method returns a new array that is of the exact same length as the original array.

The difference between the forEach and map methods is that forEach is only used for looping and does not return anything back. On the other hand, the map method returns a new array that is of the exact same length as the original array.

Also, note that map does not change the original array but returns a new array.

Take a look at the below code:

const users = [
  {
    first_name: 'Mike',
    last_name: 'Sheridan'
  },
  {
    first_name: 'Tim',
    last_name: 'Lee'
  },
  {
    first_name: 'John',
    last_name: 'Carte'
  }
];

const usersList = users.map(function (user) {
  return user.first_name + ' ' + user.last_name;
});

console.log(usersList); // ["Mike Sheridan", "Tim Lee", "John Carte"]

Here's a Code Pen Demo.

Here, by using the array of objects and map method, we're easily generating a single array with first and last name concatenated.

In the above code, we're using the + operator to concatenate two values. But it's much more common to use ES6 template literal syntax as shown below:

const users = [
  {
    first_name: 'Mike',
    last_name: 'Sheridan'
  },
  {
    first_name: 'Tim',
    last_name: 'Lee'
  },
  {
    first_name: 'John',
    last_name: 'Carte'
  }
];

const usersList = users.map(function (user) {
  return `${user.first_name} ${user.last_name}`;
});

console.log(usersList); // ["Mike Sheridan", "Tim Lee", "John Carte"]

Here's a Code Pen Demo.

The array map method is also useful if you want to extract only specific data from the array like this:

const users = [
  {
    first_name: 'Mike',
    last_name: 'Sheridan',
    age: 30
  },
  {
    first_name: 'Tim',
    last_name: 'Lee',
    age: 45
  },
  {
    first_name: 'John',
    last_name: 'Carte',
    age: 25
  }
];

const surnames = users.map(function (user) {
  return user.last_name;
});

console.log(surnames); // ["Sheridan", "Lee", "Carte"]

Here's a Code Pen Demo.

In the above code, we're extracting only the last names of each user and storing them in an array.

We can even use map method to generate an array with dynamic content as shown below:

const users = [
  {
    first_name: 'Mike',
    location: 'London'
  },
  {
    first_name: 'Tim',
    location: 'US'
  },
  {
    first_name: 'John',
    location: 'Australia'
  }
];

const usersList = users.map(function (user) {
  return `${user.first_name} lives in ${user.location}`;
});

console.log(usersList); // ["Mike lives in London", "Tim lives in US", "John lives in Australia"]

Here's a Code Pen Demo.

Note that in the above code, we're not changing the original users array. We're creating a new array with dynamic content because map method always returns a new array.

Advantages of using the map method

• It helps quickly generate a new array without changing the original array

• It helps generate an array with dynamic content based on each element

• It allows us to quickly extract any element of the array

• It generates an array with the exact same length as the original array

Browser Support:

• All modern browsers and Internet Explorer (IE) version 9 and above

• Microsoft Edge version 12 and above