Finally, with ES2017, it's official now! We have 3 variations to convert an Object to an Array π
Array has an array of methods (sorry, bad pun π). So by converting the object into an array, you have access to all of that. Woohoo π₯³
const zoo = {
lion: 'π¦',
panda: 'πΌ'
};
Object.keys(zoo)
// ['lion', 'panda']
Object.values(zoo)
// ['π¦', 'πΌ']
Object.entries(zoo)
// [ ['lion', 'π¦'], ['panda', 'πΌ'] ]
Time for a story...
Ancient times
Long long ago, in a far far galaxy, looping over Objects was not so easy. Okay, I'm exaggerating a bit π
. But I remember whenever I needed to convert an object
into an array
, I had to do something like this.
var numbers = {
one: 1,
two: 2
};
var keys = [];
for (var number in numbers) {
if(numbers.hasOwnProperty(number)){
keys.push(number)
}
}
keys; // [ 'one', 'two' ]
I always was so annoy and wished there was a better way...
ES6 - Object.keys
And then ES6 happened! My life changed! We finally have an easier way π₯³
Now, there was a built-in method that quickly turns all the keys in my object into an array:
const numbers = {
one: 1,
two: 2
}
Object.keys(numbers);
// [ 'one', 'two' ]
Life was beautiful! But then I became angry again. Why can I only extract the keys, I want my values too! Humans always want more don't we π And then ES2017 rolled in...
Object.values
Hi, I'm ES2017 and I grant you all your wish π§ββοΈ. you can now easily extract the values into an array with one method.
const numbers = {
one: 1,
two: 2
}
Object.values(numbers);
// [ 1, 2 ]
Object.entries
But ES2017 didn't stop there. It gave me more! I grant you BOTH keys and values now, so stop being angry. I was blown away. It turned my frown upside down π
const numbers = {
one: 1,
two: 2
}
Object.entries(numbers);
// [ ['one', 1], ['two', 2] ]
Booya π
Object.entries + Destructuring
But then I'm like...nested array π€¨. C'mon, that's not fun to work with. ES6 swoops in and like, don't worry! That's why I gave you destructuring!
const numbers = {
one: 1,
}
const objectArray = Object.entries(numbers);
objectArray.forEach(([key, value]) => {
console.log(key); // 'one'
console.log(value); // 1
})
ES6, that's why you are simply the best π
End of story
Hope you enjoyed my code story-telling time π
Now go out there and have some fun with all these amazing Object methods π
Browser Support
Object.keys
has the best support. When I say best, it means it supports Internet Explorer π. The other, Object.values
and Object.entries
, unfortunately, don't support Internet Explorer. Luckily, polyfill exists which can improve support.
Polyfill
But wait, there's more...
Your next question might be, now how do I convert the array back to an object. Don't worry, that's covered. There is a new method called Object.fromEntries
. It essentially is the opposite of Object.entries
.
const array = [
[ 'one', 1 ],
[ 'two', 2 ]
];
Object.fromEntries(array);
// { one: 1, two: 2 }
Note: This is extremely new, so support will be limited. Keep this in your knowledge box, but maybe wait a bit longer before you put it in your actual toolbox π§°
Community Input
-
@podfeet: I wanted to create an object in a specific form, so I used
object.keys
to discover the indices of the specific elements I wanted to extract.
Resources
- MDN Web Docs: Iterating over properties of an object
- MDN Web Docs: Object.keys
- MDN Web Docs: Object.values
- MDN Web Docs: Object.entries
β
Thanks for reading β€
Say Hello! Instagram | Twitter | Facebook | Blog | SamanthaMing.com