Am I Coder?

Back to all post
javascript
alwaisy
5 min read

6 ways to convert Objects into Array in JavaScript

There are different methods to convert an object into an array like Object.entries(), Object.values(), and loops including for...in, and for...of .

There are different methods to convert an object into an array like Object.entries(), Object.values(), and loops including for...in, and for...of .

Hi, Developers! in this article, I will talk about typecasting on a higher level. It is not exactly the same but it has a similar procedure. We are going to convert Objects into Array.

Nifty!

but why do we need to convert? Do objects not play well? That is not true! actually, Objects are much better than arrays. They can handle complex data and provide better access to their properties. But sometimes array becomes a great choice because of its methods and easy iteration.

Here I will explain why to use an Array,

  • Arrays provide an easy way to iterate over their elements using a for loop, forEach(), or map() method, while objects require additional steps to iterate over their properties.
  • It is often necessary to sort an array of objects based on a specific property. This can be done using the sort() method, which is not available for objects.
  • Converting an object into an array allows you to manipulate its properties in a more flexible way, such as mapping, filtering, or reducing and slicing the properties into a new form.

Two days ago I tried to slice an object but later I have to convert it into an array. Therefore I am going to explain several ways to convert a JavaScript object into an array.

  1. Object.entries()
  2. Object.values()
  3. for...in loop
  4. Object.keys() and map()
  5. Using Array.from() method
  6. Using the spread operator (...)
  7. Using JSON.parse() and JSON.stringify()

How to use Object.entries()?

The first method to convert a JavaScript object into an array is using Object.entries().

Object.entries() is a method available on all JavaScript objects that returns an array of arrays, where each inner array consists of a key/value pair from the object. Here's an example of using Object.entries() to convert an object into an array

let obj = { name: 'John', age: 30, city: 'New York' }

let arr = Object.entries(obj)
console.log(arr)

// Output: [['name', 'John'], ['age', 30], ['city', 'New York']]

How to use Object.values()?

The second method to convert a JavaScript object into an array is using Object.values().

Object.values() is a method available on all JavaScript objects that returns an array of the object's values. Here's an example of using Object.values() to convert an object into an array

let obj = { name: 'John', age: 30, city: 'New York' }

let arr = Object.values(obj)
console.log(arr)

// Output: ['John', 30, 'New York']

Using for...in loop with Objects

The for...in loop is a traditional looping method in JavaScript to iterate over the properties (keys) of an object. It can be used to convert an object into an array by extracting its values and forming a new array with them. Here's an example

let obj = { a: 1, b: 2, c: 3 }
let arr = []

for (let key in obj) {
  arr.push(obj[key])
}

console.log(arr)
// Output: [1, 2, 3]

Using Object.keys() and map()

The fourth method to convert a JavaScript object into an array is by using the Object.keys() method combined with the map() method.

The Object.keys() method returns an array of the properties (keys) of an object, and the map() method allows you to transform each item in an array and return a new array.

Here's an example to use it,

let obj = { a: 1, b: 2, c: 3 }

let arr = Object.keys(obj).map((key) => obj[key])

console.log(arr)
// Output: [1, 2, 3]

Array.from() is best method

To convert a JavaScript object into an array is by using the Array.from() method. The Array.from() method creates a new, shallow-copied Array instance from an array-like or iterable object. Here is how

let obj = { a: 1, b: 2, c: 3 }

let arr = Array.from(Object.entries(obj), ([key, value]) => value)

console.log(arr)
// Output: [1, 2, 3]

How spread operator help to convert an Object into an Array

The second last method to convert a JavaScript object into an array is by using the spread operator (...). The spread operator allows you to spread the elements of an iterable such as an object, into a new array.

Here's what you can do!

let obj = { a: 1, b: 2, c: 3 }

let arr = [...Object.values(obj)]

console.log(arr)
// Output: [1, 2, 3]

What JSON.parse() and JSON.stringify() can do

The last method (in this article) to convert a JavaScript object into an array is by using the JSON.parse() and JSON.stringify() methods. The JSON.stringify() method is used to convert a JavaScript object into a JSON string, and the JSON.parse() method is used to convert a JSON string into a JavaScript object.

Let’s code

let obj = { a: 1, b: 2, c: 3 }

let json = JSON.stringify(obj)
let arr = JSON.parse(json)

console.log(arr)
// Output: [1, 2, 3]