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 🥳
const zoo = {
lion: '🦁',
panda: '🐼'
};
Object.keys(zoo)
// ['lion', 'panda']
Object.values(zoo)
// ['🦁', '🐼']
Object.entries(zoo)
// [ ['lion', '🦁'], ['panda', '🐼'] ]
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 angry and wished there was a better way…
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…
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 ]
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 👊
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,
two: 2
}
const objectArray = Object.entries(numbers);
objectArray.forEach(([key, value]) => {
console.log(key); // 'one' -> 2
console.log(value); // 1 -> 2
})
ES6, that’s why you are simply the best 💛
Hope you enjoyed my code story-telling time 😂
Now go out there and have some fun with all these amazing Object methods 😊
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
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 🧰
#javascript