# Converting Object to an Array
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
- Time for a story...
- Ancient times
- ES6 - Object.keys
- Object.values
- Object.entries
- Object.entries + Destructuring
- End of story
- Browser Support
- But wait, there's more...
- Community Input
- Resources
# 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.
I always was so angry 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:
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.
# 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
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!
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
- MDN: Object.keys
- MDN: Object.values
- MDN: Object.entries
# 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.
MDN: Object.fromEntries
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
- TC39: Object.fromEntries Proposal
- Share to Twitter Twitter
- Share to Facebook Facebook
- Share to LinkedIn LinkedIn
- Share to Reddit Reddit
- Share to Hacker News Hacker News
- Email Email
Related Tidbits
How to Format Currency in ES6
5 Ways to Convert a Value to String in JavaScript
Checking if a string contains substring in JavaScript
JavaScript Array.flatMap