Convert Object to Array JavaScript

Working with data in JavaScript often means juggling objects and arrays. Objects store data in key-value pairs, while arrays store data in an ordered list. Sometimes, you need to convert an object to an array to use array methods like map(), filter(), or reduce().

This guide explains the simplest and most effective ways to perform this conversion. We will cover modern ES6+ methods that are clean, readable, and widely supported. By the end, you will be able to choose the right method for your specific needs.

Why Convert an Object to an Array?

Objects are great for describing a single entity with named properties. However, they are not iterable in the same way as arrays. If you want to loop through the data or transform it using array methods, you first need to convert it to an array.

For instance, you might have an object containing user data. To display each value in a list, you need to convert those values into an array. This is a common task in web development, especially when working with APIs and state management. If you are dealing with complex data structures, check out our JavaScript Array of Objects Guide for more context.

Using Object.keys()

The Object.keys() method is a straightforward way to get an array of an object's property names (keys). It returns an array of strings representing the enumerable properties of the object.

This method is perfect when you only need the keys. You can then use this array to access the corresponding values in the original object. It is a simple and direct approach for specific use cases.

// Example object
const person = {
  name: 'Alice',
  age: 30,
  city: 'New York'
};

// Convert object keys to an array
const keysArray = Object.keys(person);

console.log(keysArray);

Output:
[ 'name', 'age', 'city' ]

As you can see, the output is an array of the object's keys. This is a clean and efficient way to get a list of property names.

Using Object.values()

Similar to Object.keys(), the Object.values() method extracts the property values of an object. It returns an array containing the values of the object's enumerable properties.

This method is ideal when you only need the data, not the keys. It provides a direct array of the values, which you can then manipulate or display. This is often the quickest way to get the data out of an object.

// Example object
const product = {
  id: 101,
  name: 'Laptop',
  price: 1200
};

// Convert object values to an array
const valuesArray = Object.values(product);

console.log(valuesArray);

Output:
[ 101, 'Laptop', 1200 ]

The output shows an array of just the values. This is perfect for situations where the keys are not needed and you just want a list of the data points.

Using Object.entries()

The most powerful method is Object.entries(). It returns an array of arrays. Each inner array contains two elements: the key and its corresponding value. This is excellent for when you need both the property name and its value together.

This method provides a complete picture of the object's data. Each entry is a pair, making it easy to iterate over and destructure the key-value pairs. This is especially useful for creating maps or for complex transformations.

// Example object
const settings = {
  theme: 'dark',
  notifications: true
};

// Convert object to an array of key-value pairs
const entriesArray = Object.entries(settings);

console.log(entriesArray);

Output:
[ [ 'theme', 'dark' ], [ 'notifications', true ] ]

The output is an array of pairs. You can easily loop through this array using a for...of loop or the array's forEach() method. This gives you the most flexibility when converting your object.

Using Array.from()

The Array.from() method is a more general-purpose method. It can create a new array from any iterable or array-like object. You can use it to convert the result of Object.keys(), Object.values(), or Object.entries() into a standard array.

While the methods above already return arrays, Array.from() is useful when you want to apply a mapping function during the conversion. This allows you to transform the data as you create the new array. It is a powerful tool for data manipulation.

// Example object
const scores = {
  math: 90,
  science: 85
};

// Use Array.from to get values and double them
const doubledScores = Array.from(Object.values(scores), score => score * 2);

console.log(doubledScores);

Output:
[ 180, 170 ]

Here, we combined Object.values() with Array.from() to both extract and modify the data in one step. This shows how you can chain methods for more complex operations.

Practical Example: Using a Loop

In many cases, you will want to loop through the converted array to perform actions. Let's see a practical example using Object.entries() to iterate over an object.

This is a common pattern for processing data. You can use the key and value together to build new structures, like an HTML list or a formatted string. This is a fundamental skill for any JavaScript developer.

// Example object
const user = {
  name: 'Bob',
  email: '[email protected]'
};

// Convert to entries and iterate
Object.entries(user).forEach(([key, value]) => {
  console.log(`${key}: ${value}`);
});

Output:
name: Bob
email: [email protected]

This example shows how to destructure the key-value pair in the loop. This is a clean and readable way to work with object data in an array format.

Converting Nested Objects

When dealing with nested objects, the conversion becomes slightly more complex. The methods above only convert the top-level properties. If you have an object inside an object, its value will be that object, not an array.

For deeply nested structures, you may need to recursively apply these methods. This is an advanced topic, but it's important to know that a simple Object.values() won't flatten your data. For more on managing collections, see our JavaScript Array Methods Guide.

// Example with nested object
const data = {
  user: {
    name: 'Charlie',
    age: 25
  },
  active: true
};

// Convert to entries
const entries = Object.entries(data);

console.log(entries);

Output:
[ [ 'user', { name: 'Charlie', age: 25 } ], [ 'active', true ] ]

As you can see, the 'user' value is still an object. To get an array of its properties, you would need to call Object.entries(data.user) separately. Understanding this is key to correctly converting complex data.

Performance and Readability

All the methods discussed are highly optimized and perform well for most use cases. The choice between them should be based on what you need to do with the data.

For readability, Object.keys() and Object.values() are very clear and simple. Object.entries() is slightly more complex but provides more information. Choose the method that makes your code the most self-documenting. If you are working with large arrays, understanding their length is useful; you can learn more in our JavaScript Array Length Guide.

Remember that these methods are part of modern JavaScript (ES6 and later). They are supported in all modern browsers and Node.js environments, so you can use them without worry.

Conclusion

Converting an object to an array in JavaScript is a simple task with several great options. You can use Object.keys() to get property names, Object.values() to get property values, or Object.entries() to get both as key-value pairs.

The Array.from() method adds extra flexibility for transformation. Choose the method that best fits your specific need. Mastering this conversion is a fundamental step in becoming proficient with JavaScript data structures.

By understanding these techniques, you can now efficiently manipulate your data. This will make your code cleaner and more effective. Remember to practice with different examples to solidify your understanding.