Convert a JavaScript object to an array with Object.entries()

Last updated: September 27, 2022.

JavaScript objects are great for storing data. But arrays are generally much easier to work with.

In this article we cover:

• The limitations of working with JavaScript objects;
• How to convert a JavaScript object to an array using the Object.entries() method;
• How to extract only the keys or values of properties using Object.keys() and Object.values().

Why convert?

Let’s start with a JavaScript object, where data (properties) are stored in a key-value pair format, separated by a comma:

const userOne = {
   firstName: "Codey",
   lastName: "Mucho",
   age: 30,
   member: true,
};

The data is not easy to work with in this format.

For example, if we want to return the number of properties stored in the object, nothing will be returned:

console.log(userOne.length); // undefined

We also cannot select properties by their position:

console.log(userOne[1]) // undefined

And on top of that, we can’t loop through it either:

for (i = 0; i < userOne.length; i++) {
  console.log(userOne[i])
}

The same goes for any other technique that we may try to use to iterate through the object directly (e.g. the map() method).

However, if the data was in array format, then we could use all of the above.

JavaScript objects to array using Object.entries()

We can use the Object.entries() method to make the transformation:

const userOne = {
   firstName: "Codey",
   lastName: "Mucho",
   age: 30,
   member: true,
};

const userOneArray = Object.entries(userOne); // The JS object is placed in parentheses

console.log(userOneArray);

// Output:
// (4) [Array(2), Array(2), Array(2), Array(2)]
// 0: (2) ['firstName', 'Codey']
// 1: (2) ['lastName', 'Mucho']
// 2: (2) ['age', 30]
// 3: (2) ['member', true]

We now have converted each of the former key-value pairs from the JavaScript object into an array of 2 elements (e.g. firstName and Codey). And each of these four key-value pairs arrays are themselves nested inside a containing array.

Let’s try our attempts to work with the data from earlier again:

console.log(userOneArray.length); // 4

console.log(userOneArray[1]); // ['lastName', 'Mucho']

for (i = 0; i < userOneArray.length; i++) {
  console.log(userOneArray[i])
}
// Ouptut:
// (2) ['firstName', 'Codey']
// (2) ['lastName', 'Mucho']
// (2) ['age', 30]
// (2) ['member', true]

It is now possible to query and iterate through the data. We could also now apply iterable methods, such as map():

userOneArray.map((item) => {
  console.log(item);
})

// [object Array] (2) ["firstName","Codey"]
// [object Array] (2) ["lastName","Mucho"]
// [object Array] (2) ["age",30]
// [object Array] (2) ["member",true]

And because the nested former key-value pairs are also now stored in arrays, we can work with them just as easily:

console.log(userOneArray[0].length); // 2

console.log(userOneArray[0][1]); // Codey

for (i = 0; i < userOneArray[0].length; i++) {
    console.log(userOneArray[0][i])
}

// Ouput:
// firstName
// Codey

Getting keys or values only with Object.keys() and Object.values()

If we want only the key or values, we can use Object.keys() or Object.values():

const userOne = {
   firstName: "Codey",
   lastName: "Mucho",
   age: 30,
   member: true,
};

const userOneKeys = Object.keys(userOne);

console.log(userOneKeys); // ['firstName', 'lastName', 'age', 'member']

const userOneValues = Object.keys(userOne);

console.log(userOneValues); // ['Codey', 'Mucho', 30, true]

Since only the key or value is returned for each property in the object and not both, there is now no need for nesting. So both methods return a single array of either keys or values.

---