7 ways to convert Objects into Array in JavaScript
Tags: javascript, webdev, interviewquestion
Published: 2023-02-01 04:32:12

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

---

Originally published
 [here](https://www.amicoder.lol/convert-objects-array/)

---

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

```jsx
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

```jsx
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

```jsx
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,

```jsx
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

```jsx
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!

```jsx
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

I am also learning it. I will add an example here later.

---
A developer lives in a state of learning, some times he suffers from imposter syndrome. I am also a developer and learner. I wrote about what I learned. I want to get you out of syndrome. Here is the newsletter that will help you to learn new concepts. Here you go

I am open to feedback, suggestion, and improvements. Thanks for your precious time.