loading...
Cover image for How to convert objects into arrays in Javascript

How to convert objects into arrays in Javascript

ari_o profile image Arika O ・1 min read

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]];
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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"
}
Enter fullscreen mode Exit fullscreen mode

Image source: Adeolu Eletu/ @adeolueletu on Unsplash

Discussion

pic
Editor guide
Collapse
rsa profile image
Ranieri Althoff

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

Collapse
ari_o profile image
Arika O Author

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.

Collapse
mahmoudessa profile image
Mahmoud Essam EL-karuony

Thanks silvia :)

Collapse
ari_o profile image
Arika O Author

Hope it helped :).