Map arrays in JavaScript

What is map() in JavaScript? It is a built in function on the Array prototype that basically creates a new array with the values it gets provided with. All right, that might be hard to grasp if you never worked with it before.. Let's do some coding and you will learn it in no time!

Basic example

Given we have an array of numbers, and we want to divide each number with 2 and create a new array from it.

const original = [2, 4, 6, 8];
const half = original.map((originalNumber) => originalNumber / 2);
// [1, 2, 3, 4]

Important note

The map function is not changing the original array, it creates a new one. So in the above example:

const original = [2, 4, 6, 8];
const half = original.map((originalNumber) => originalNumber / 2);

// original = [2, 4, 6, 8]
// half = [1, 2, 3, 4]

So doing this won't have any affect:

const original = [2, 4, 6, 8];
original.map((originalNumber) => originalNumber / 2);
// original is still = [2, 4, 6, 8]

Example with an object

So, in a real life example, we perhaps have a third-party API we are working with to get some kind of data, in many cases, we only are interested in some part of the data, or simply want to reformat it. Let's do some examples:

const personApiResponse = [
  { name: "Peter", age: 5, rightHanded: false },
  { name: "Leonard", age: 7, rightHanded: true },
  { name: "David", age: 2, rightHanded: true },
];

const mappedPersons = personApiResponse.map((person) => {
  return {
    name: person.name,
    age: person.age,
  };
});

mappedPersons is now:

[
  { name: "Peter", age: 5 },
  { name: "Leonard", age: 7 },
  { name: "David", age: 2 },
];

Since we do not care about the rightHanded property, we remove it from our objects.

Changing name of property

We can also "change" the name of the properties if we have e.g a standardized way of having our properties in our project, we might want to keep that. For example if we are using camelCase and the API we are working towards does not, we can transform our objects to follow our standard. Example:

const personApiResponse = [
  { firstname: "Peter", age: 5, righthanded: false },
  { firstname: "Leonard", age: 7, righthanded: true },
  { firstname: "David", age: 2, righthanded: true },
];

const mappedPersons = personApiResponse.map((person) => ({
  age: person.age,
  firstName: person.firstname,
  rightHanded: person.righthanded,
}));

mappedPersons is now:

[
  { age: 5, firstName: "Peter", rightHanded: false },
  { age: 7, firstName: "Leonard", rightHanded: true },
  { age: 2, firstName: "David", rightHanded: true },
];

NOTE: I am using a little different syntax on the map. Just to show it can be shortcutted to skip the return clause.

Example:

const mappedPersons = personApiResponse.map((person) => ({
  age: person.age,
  firstName: person.firstname,
  rightHanded: person.righthanded,
}));

Is equivalent to:

const mappedPersons = personApiResponse.map((person) => {
  return {
    age: person.age,
    firstName: person.firstname,
    rightHanded: person.righthanded,
  };
});

There is not difference in the above examples, it is more of a matter of preference what to use.

Map arrays with nested objects

So, as we mentioned in our sorting guide, nested objects can be tricky to work with, sometimes. Let's see how we can apply map() on nested objects as well.

const personApiResponse = [
  {
    firstName: "Peter",
    bestFriends: [
      { name: "Jason", shoeSize: 8 },
      { name: "Carl", shoeSize: 5 },
    ],
  },
  {
    firstName: "Frank",
    bestFriends: [
      { name: "Sandra", shoeSize: 6 },
      { name: "Anna", shoeSize: 7 },
    ],
  },
  {
    firstName: "Susan",
    bestFriends: [
      { name: "Adam", shoeSize: 8 },
      { name: "Richard", shoeSize: 7.6 },
    ],
  },
];

Let's imagine we do not care about the shoeSize of the best friends, then we can map it like this:

const mappedPersons = personApiResponse.map((person) => {
  return {
    ...person,
    bestFriends: person.bestFriends.map((bestFriend) => bestFriend.name),
  };
});

And result will be:

[
  { firstName: "Peter", bestFriends: ["Jason", "Carl"] },
  { firstName: "Frank", bestFriends: ["Sandra", "Anna"] },
  { firstName: "Susan", bestFriends: ["Adam", "Richard"] },
];

Noticed something different? Correct, the bestFriends array is now purely a string array instead of object array. That is because we only map the value of the name without specifying an object. Let me show you:

const mappedPersonsWObject = personApiResponse.map((person) => {
  return {
    ...person,
    bestFriends: person.bestFriends.map((bestFriend) => ({
      name: bestFriend.name,
    })),
  };
});

Would then give us:

[
  {
    "firstName": "Peter",
    "bestFriends": [{ "name": "Jason" }, { "name": "Carl" }]
  },
  {
    "firstName": "Frank",
    "bestFriends": [{ "name": "Sandra" }, { "name": "Anna" }]
  },
  {
    "firstName": "Susan",
    "bestFriends": [{ "name": "Adam" }, { "name": "Richard" }]
  }
]

Sometimes, it does not make any sense to return is as an object, but sometimes it does. But I just wanted to show you that there is possibilites for you to create the format of the object array how you want it to be to suite your project the best.

Outro

In todays guide, we explored the map() function and shared some examples of how we can use it. In my experience, map() is one of the most used functions when it comes to working with arrays - especially if you are working with other APIs since the data is almost never the way you want it in your application.

I hope this guide brought you some value. Good luck with your project!