Skip to main content

How to Convert an Object's Keys, Values, or Entries to an Array in JavaScript

Converting parts of an object into an array is a fundamental data transformation task. You often need to get a list of all available keys, check if a specific value exists, or iterate over an object's key-value pairs. Modern JavaScript provides a suite of static Object methods (.values(), .keys(), and .entries()) that make these tasks simple and highly readable.

This guide will teach you how to use these three essential methods to convert an object's values, keys, or entries into an array.

Getting an Object's Values as an Array​

This is a very common requirement: you have an object and you need a simple array containing all of its values. The Object.values() method is designed for this exact purpose.

For example, we need to extract all the values from a user object into a simple array.

// Problem: How to get [1, 'Alice', 'Canada'] from this object?
const user = {
  id: 1,
  name: 'Alice',
  country: 'Canada',
};

The recommended solution uses Object.values(): this method takes an object as an argument and returns a new array containing the object's own enumerable property values.

const user = {
  id: 1,
  name: 'Alice',
  country: 'Canada',
};

const valuesArray = Object.values(user);

console.log(valuesArray); // Output: [ 1, 'Alice', 'Canada' ]
note

This is the most direct, concise, and readable way to get an object's values.

Getting an Object's Keys as an Array​

Similarly, you might need a list of all the keys (property names) in an object. The Object.keys() method provides this functionality.

For example, we need to get an array of all the property names from our user object.

// Problem: How to get ['id', 'name', 'country'] from this object?
const user = {
  id: 1,
  name: 'Alice',
  country: 'Canada',
};

The recommended solution uses Object.keys(): this method returns an array of the object's own enumerable property names.

const user = {
  id: 1,
  name: 'Alice',
  country: 'Canada',
};

const keysArray = Object.keys(user);

console.log(keysArray); // Output: [ 'id', 'name', 'country' ]

Getting an Object's Entries (Key-Value Pairs) as an Array​

Sometimes you need both the key and the value together. The Object.entries() method converts an object into a two-dimensional array, where each inner array is a [key, value] pair. This format is incredibly useful for iterating over an object with for...of loops or for converting an object into a Map.

For example, we need to get a list of key-value pairs from our user object.

// Problem: How to get [['id', 1], ['name', 'Alice'], ...] from this object?
const user = {
  id: 1,
  name: 'Alice',
  country: 'Canada',
};

The recommended solution uses Object.entries():

const user = {
  id: 1,
  name: 'Alice',
  country: 'Canada',
};

const entriesArray = Object.entries(user);

console.log(entriesArray);

Output:

[
  [ 'id', 1 ],
  [ 'name', 'Alice' ],
  [ 'country', 'Canada' ]
]

This array of pairs can then be easily manipulated or converted. For example, you can convert it back into an object using the Object.fromEntries() method.

const objAgain = Object.fromEntries(entriesArray);
console.log(objAgain); // Output: { id: 1, name: 'Alice', country: 'Canada' }

Conclusion​

Modern JavaScript provides a clean and powerful API for introspecting objects and converting them to arrays.

  • To get an array of values, use Object.values(obj).
  • To get an array of keys, use Object.keys(obj).
  • To get an array of [key, value] pairs, use Object.entries(obj).

These three static methods are the standard, recommended best practices. They are more readable and less error-prone than older methods like using a for...in loop to manually build an array.

Table of Contents