How to convert objects into arrays in Javascript

#javascript #react #tutorial #beginners

Gone are the days when transforming Javascript objects into arrays required complex logic. Starting with E2017(ES8), we can do just that pretty easily. Depending on our needs, we can convert an object into an array containing the keys, the values or the whole key-value pairs. Let's see how this works. We are going to use the Object class and some specific static methods found on this class. These are: Object.keys(), Object.values() and Object.entries().

// We have an object
const pairs = {
  Key1: "value1",
  Key2: "value2",
  Key3: "value3"
}

// Converting the object into an array holding the keys
const arrayOfKeys = Object.keys(pairs);
console.log(arrayOfKeys);// prints [Key1, Key2, Key3]

// Converting the object into an array holding the values
const arrayOfValues = Object.values(pairs);
console.log(arrayOfValues);// prints [value1, value2, value3]

// Converting the object into an array holding the key-value pairs
const arrayOfCompleteEntries = Object.entries(pairs);
console.log(arrayOfCompleteEntries);// prints [[Key1, value1], [Key2, value2], [Key3, value3]];

As we can see, in the last example where we are extracting the key-value pairs we end up with an array of arrays. If we want to work with each key or value from the original object, we can use forEach to loop through every sub-array:

arrayOfCompleteEntries.forEach(([key, value]) => {
  console.log(key);
  console.log(value);
})

// prints 
Key1
value1
Key2
value2
Key3
value3

If for some reason we want to convert the newly created array back into an object, we can do that very easily like this:

const backToObject = Object.fromEntries(arrayOfCompleteEntries);
console.log(backToObject);

// prints
{
Key1:"value1",
Key2:"value2",
Key3:"value3"
}

Image source: Adeolu Eletu/ @adeolueletu on Unsplash

Top comments (4)

Ranieri Althoff • Jul 31 '20

Very nice, I use these a lot since I learned about it.

Object.fromEntries is pretty useful. I use it in place of [...].reduce((prev, [key, value]) => ({ ...prev, [key]: value }), {}) for much cleaner syntax and better Typescript inference :D

Arika O • Jul 31 '20

Funny, just yesterday I flattened an array using reduce() and I ran into Typescript issues because of the inference. Still didn't find a solution :D. But yes, these methods are super useful.