Skip to content
Permalink
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
159 lines (107 sloc) 4.75 KB

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', '🐼'] ]

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 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:

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 }

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

You can’t perform that action at this time.