JavaScript - Convert Objects to Arrays

JavaScript objects are versatile data structures, but sometimes we need to convert them to arrays to perform data transformations or for simplified rendering purposes.

Keeping for...in statements, Object.entries(), Object.fromEntries() in your tool belt makes these less common use cases easier to wrangle.

How to Convert JavaScript Objects to Arrays

The simplest way to convert an Object to an Array is to use Object.entries().

Object.entries() returns an array of arrays containing the object's key/value pairs. That's a bit of a mouthful and may be easier expressed in code,

const myObject = {
  key0: "value0",
  key1: "value1",
  key2: "value2",
};

const myArray = Object.entries(myObject);

console.log(myArray);

/* Array(3)
  [
    [ "key0", "value0" ],
    [ "key1", "value1" ],
    [ "key2", "value2" ]
  ]
*/

Converting Objects to JavaScript Map Objects

Converting an object to an array is an intermediary step in the process of converting it to a JavaScript Map object.

It's a straightforward process after using Object.entries. Building on the above example,

const myMapObject = new Map(Object.entries(myObject));

console.log(myMapObject.get("key1")); // value1

Using for...in to Convert Objects to Arrays

Using a for...in statement provides an alternative method to convert objects to arrays.

Check out how we can convert the previously referenced myObject into an array using a for...in statement,

const myObject = {
  key0: "value0",
  key1: "value1",
  key2: "value2",
};

let myArray = [];
for (const key in myObject) {
  myArray.push([key, myObject[key]]);
}

console.log(myArray);

/* Array(3)
  [
    [ "key0", "value0" ],
    [ "key1", "value1" ],
    [ "key2", "value2" ]
  ]
*/

This approach is useful when additional data transformations are necessary on the keys or values. Building on the above, here's an arbitrary example for reference,

let myArray = [];
for (const key in myObject) {
  const value = {
    value: myObject[key],
    year: new Date().getFullYear(),
  };

  myArray.push([key, value]);
}

console.log(myArray);

/* Array(3)
  [
    [ "key0", { value: "value0", year: 2020 } ],
    [ "key1", { value: "value1", year: 2020 } ],
    [ "key2", { value: "value2", year: 2020 } ]
  ]
*/

Bonus - How to Convert Arrays to Objects

Using Object.fromEntries() allows us to convert key/value pairs into objects. This may be useful when converting an object to an array, doing some transformation on the data, and then later converting it back into an object. It can also be useful when working directly with new JS Map object instances.

For clarity, here's an example -

const myArray = [
  ["key0", { value: "value0", year: 2020 }],
  ["key1", { value: "value1", year: 2020 }],
  ["key2", { value: "value2", year: 2020 }],
];

const myObject = Object.fromEntries(myArray);

console.log(myObject);

/*
  {
    "key0": {
      "value": "value0",
      "year": 2020
    },
    "key1": {
      "value": "value1",
      "year": 2020
    },
    "key2": {
      "value": "value2",
      "year": 2020
    }
  }
*/
``;