How to convert an Object into an array?
Tags: javascript, webdev, programming
Published: 2023-11-24 14:37:21

As JavaScript developers, we frequently encounter the need to transform objects into arrays. In this blog, we'll explore methods for accomplishing this task.
####To convert Object into an array JavaScript provides following three methods:
- `Object.keys()`
- `Object.values()`
- `Object.entries()`

###[`Object.keys()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/keys)
It returns an array of a given object's key names. Here's a simple example:

```
const bookObj = {
  title: "Atomic Habits",
  author: "James Clear",
  publishedYear: 2018
}

const keysArray = Object.keys(bookObj);
console.log(keysArray); 
// Output: ['title', 'author', 'publishedYear']
```
In this example, `Object.keys()` gets the keys from `bookObj` object and returns them as an array.

```
// Suppose you have an employee object, and you want to count the number of employees. 
// In that case, you can use Object.keys()

const employeeData = {
  "id101": {name: "John Doe"},
  "id102": {name: "Jane Smith"},
}

const employeeCount = Object.keys(employeeData).length;
console.log(employeeCount);
// Output: 2
```

###[`Object.values()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/values)
It returns an array of a given object's values. Here's a simple example:
```
const bookObj = {
  title: "Atomic Habits",
  author: "James Clear",
  publishedYear: 2018
}

const valuesArray = Object.values(bookObj);
console.log(valuesArray); 
// Output: ['Atomic Habits', 'James Clear', 2018]
```
Now, valuesArray holds the values of the properties in `bookObj`.

```
// Suppose you have an employee object, and you want to count their total salary.
// In that case, you can use Object.values()

const employeeData = {
  "id101": { name: "John Doe", position: "Software Engineer", salary: 80000 },
  "id102": { name: "Jane Smith", position: "Product Manager", salary: 95000 },
};

const salariesArray = Object.values(employeeData).map(employee => employee.salary);
console.log(salariesArray);
// Output: [80000, 95000]

// Calculate the total salary
const totalSalary = salariesArray.reduce((acc, salary) => acc + salary, 0);
console.log("Total Salary:", totalSalary);
// Output: Total Salary: 175000
```

###[`Object.entries()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/entries)
It doesn't just give you the keys or values alone; it gives you both, together in pair.
```
const bookObj = {
  title: "Atomic Habits",
  author: "James Clear",
  publishedYear: 2018
}

const entriesArray = Object.entries(bookObj);
console.log(entriesArray); 
// Output: [["title", "Atomic Habits"],["author", "James Clear"],["publishedYear", 2018]]
```
The result is an array of arrays, where each inner array contains a key-value pair. This is particularly handy when you need both the keys and values together.

```
// Suppose you have a booksObject, and you want to display their data together.
// In that case, you can use Object.entries()

const bookCollection = {
  book1: { title: "Atomic Habits", author: "James Clear", ratings: "seven lakhs plus" },
  book2: { title: "The Power of Your Subconscious Mind", author: "Joseph Murphy", ratings: "seventy two thousand plus" }
};

Object.entries(bookCollection).forEach(([bookId, bookInfo]) => {
  console.log(`${bookId}: ${bookInfo.title} by ${bookInfo.author} has ${bookInfo.ratings} ratings`);
});

// Output:
// book1: Atomic Habits by James Clear has seven lakhs plus ratings
// book2: The Power of Your Subconscious Mind by Joseph Murphy has seventy two thousand plus ratings
```

Understanding Object.keys(), Object.values(), and Object.entries() in JavaScript is helpful. They simplify working with objects by allowing you to iterate through keys, values, or key-value pairs effortlessly.