๐Ÿ”ฅ NEW Code Tidbit Every Week ๐Ÿ”ฅ

# 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


Related Tidbits