How to use Array.map() on an object in JavaScript

If you're looking to use Array.map() on an object, and don't have time to read this post - here's how you can do it.

const myObject = { a: 1, b: 2, c: 3 };
let myArray = Object.keys(myObject).map(function(property) {
  return myObject[property];
});
// returns [1, 2, 3]

But how does this work? What are your other options? And why would you need to use Array.map() on an object anyway? In this blog post I'll discuss why I use this pattern quite often, how Object.keys() is crucial, and look at another option you can try.

↓

Looping is something that you probably do all the time with arrays in JavaScript. And one of the most popular ways to do it is with Array.map().

const myArray = [1, 2, 3];
let newArray = myArray.map(function(item) {
  return item + 1;
});
// returns [2, 3, 4]

Array.map() will literally map over each item in an array, and you can make changes to one or multiple items. Whatever you return from the function goes into your new array.

There are often times when I need to loop over a JavaScript object, and I want to use something like Array.map(). The problem is, it doesn't work.

const myObject = { a: 1, b: 2, c: 3 };
myObject.map(function(item) {
  return item + 1;
});

And... you get a nice red error.

Uncaught TypeError: myObject.map is not a function

Because Array.map() is for use on arrays - it's [].map() not {}.map().

But there's a really easy way you can get Array.map() to work with a JavaScript object. Sometimes though, you might not need to.

When to use Array.map() with an object

Usually, you can loop over an object using a for...in statement. Here's an example from MDN.

const myObject = { a: 1, b: 2, c: 3 };
for (const property in myObject) {
  console.log(`${property}: ${myObject[property]}`);
}

But what if you want to loop over an object and create an array? For example, in some JavaScript frameworks, like React, use can use map() to render multiple components.

This is when I often need to use Array.map() on an object.

Here's how you do it:

Array.map() using Object.keys()

My favourite way to use Array.map() is using the Object.keys() JavaScript function.

You need an array for Array.map() to work, and Object.keys() gives you an array of the properties on an object. So it's perfect! Let's start by getting an array of the keys with Object.keys().

const myKeys = Object.keys(myObject);
// returns ["a", "b", "c"]

Now you have an array, you can use Array.map()!

myKeys.map(function(property) {
  return property;
});

Now that you are mapping over the keys, you can go through each property on the object, and do whatever you need to do. For example, if you just want to return an array of each property value + 1 (like in the original example):

const myObject = { a: 1, b: 2, c: 3 };
let myArray = Object.keys(myObject).map(function(property) {
  return myObject[property] + 1;
});
// returns [2, 3, 4]

Array.map() using Object.values()

There is another function you can use to create an array from an object - Object.values(). As the name suggests, instead of getting the keys from the object, you get the values.

In this simple example, you could also use Object.values(), since we're only using the values in the returned array.

const myObject = { a: 1, b: 2, c: 3 };
let myArray = Object.values(myObject).map(function(value) {
  return value + 1;
});
// returns [2, 3, 4]

However, I would argue that - in most cases - Object.keys() will be the better choice. I prefer using Object.keys() since I'll often include both the key and the property in the return statement. If you have the key, you can get the value with myObject[key]. With only the value, you can't get the key very easily. So it's much more flexible to start with Object.keys() for mapping over your object.

Array.map() object example

For example, let's say you have an object for the tags you use on your blog.

const tags = {
  "JavaScript": {
    colour: "yellow"
  },
  "React": {
    colour: "blue"
  },
  "CSS": {
    colour: "cyan"
  },
  "NodeJS": {
    colour: "green"
  },
};

And to display these tags on your blog, you need to loop over the object and create the tags, changing the colour depending on the tag value.

This is a perfect use-case for Array.map().

Object.keys(tags).map(function(tag) {
  return `<span class="tag tag-${tags[tag.colour]}">${tag}</span>`;
});

One of the most common times I need to loop over an object is when I'm rendering a list of items in ReactJS (like the tag HTML example above). In my next blog post, I'll show you how to render an array in ReactJS.