How to convert an Object into an array?

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()

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()

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()

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.