What Is the Object.entries() Method in JavaScript?

Introduced in ES8, the Object.entries() method takes an object as an argument and returns an array of object's enumerable property [key, value] pairs. The following is true about the array resulting from Object.entries():

• Each element of the array is guaranteed to itself be an array consisting of key and value;
• Only enumerable properties of object are included;
• Iterating through an Object is possible;
• The order is not guaranteed;
• Non-object arguments are coerced to an object;
• Can be used to convert Object into a Map.

Each Element of the Array Is Guaranteed to Itself be an Array of Key-Value

The Object.entries() returns an array of object's enumerable property [key, value] pairs. For example:

const obj = { foo: 'bar', baz: 'qux', waldo: 'fred' };
const objEntries = Object.entries(obj);

console.log(objEntries); // output: [ ['foo', 'bar'], ['baz', 'qux'], ['waldo', 'fred'] ]

It is important to note that object property names are always string or Symbol. All other types of values (such as number, boolean, etc.) are coerced to a string. For example:

const obj = { false: 'foo', 10: 'bar' };
const objEntries = Object.entries(obj);

console.log(objEntries); // output: [ ['10', 'bar'], ['false', 'foo'] ]

In the example above, notice how the keys are coerced to a string.

Only Enumerable Properties of Object are Included

Array resulting from Object.properties() only includes enumerable properties of the object. For example:

const obj = { bar: 'baz' };

Object.defineProperty(obj, 'foo', {
  value: 123,
  enumerable: false,
});

console.log(Object.entries(obj)); // [ ['bar', 'baz'] ]

What are Enumerable Properties of an Object?

An object can have enumerable properties, as well as non-enumerable properties. The difference is that the former allows the property to be available when looping while the latter doesn't. For example, we can specify a property to be non-enumerable with Object.create() like so:

const obj = Object.create({}, {
  foo: {
    value: 123,
    enumerable: false,
  }
});

console.log(obj); // { foo: 123 }
console.log(Object.entries(obj)); // []

Similarly, for an existing object, we can define a property (new or old) to be non-enumerable using Object.defineProperty() in the following way:

const obj = {};

Object.defineProperty(obj, 'foo', {
  value: 123,
  enumerable: false,
});

console.log(obj); // { foo: 123 }
console.log(Object.entries(obj)); // []

To define multiple properties, you can use Object.defineProperties().

Iterating Through an Object Is Possible

You can easily iterate through an object by using Object.entries() with any loop because we essentially have an array of arrays that contain a key and value. However, the easiest way to iterate through object entries is to use for...of loop. For example:

const obj = { foo: 'bar', baz: 'qux', waldo: 'fred' };

// using destructuring syntax
for (const [key, value] of Object.entries(obj)) {
    console.log(key, value);
}

// without using destructuring syntax
for (const entry of Object.entries(obj)) {
    console.log(entry[0], entry[1]);
}

// output:
// foo bar
// baz qux
// waldo fred

Similarly, we can use forEach() as well (which has better browser support):

const obj = { foo: 'bar', baz: 'qux', waldo: 'fred' };

// using destructuring syntax
Object.entries(obj).forEach(([key, value]) => {
    console.log(key, value);
});

// without using destructuring syntax
Object.entries(obj).forEach((entry) => {
    console.log(entry[0], entry[1]);
});

// output:
// foo bar
// baz qux
// waldo fred

Iterate Only Over the Keys:

To iterate only over the keys, we can use the destructuring syntax like so:

for (const [key] of Object.entries(obj)) {
    console.log(key); // output: foo, baz, waldo
}

Object.entries(obj).forEach(([key]) => {
    console.log(key); // output: foo, baz, waldo
});

Iterate Only Over the Values:

To iterate only over the values, we can use the destructuring syntax like so:

for (const [, value] of Object.entries(obj)) {
    console.log(value); // output: bar, qux, fred
}

Object.entries(obj).forEach(([, value]) => {
    console.log(value); // output: bar, qux, fred
});

The Order Is Not Guaranteed

Object.entries() does not guarantee the order of the resulting array. To demonstrate this, let's consider the following example:

const obj = { 100: 'foo', 3: 'bar', 11: 'baz' };
const objEntries = Object.entries(obj);

console.log(objEntries); // output: [ ['3', 'bar'], ['11', 'baz'], ['100', 'foo'] ]

In cases where there's a need for a certain type of ordering of object entries, we can simply sort the resulting array to guarantee the order. For example, the following will sort the array in descending order:

const obj = { 100: 'foo', 3: 'bar', 11: 'baz' };
const sortedPairs = Object.entries(obj).sort((a, b) => b[0] - a[0]);

console.log(sortedPairs); // output: [ ['100', 'foo'], ['11', 'baz'], ['3', 'baz'] ]

We can also refactor the sort compare function using the destructuring syntax like so:

const obj = { 100: 'foo', 3: 'bar', 11: 'baz' };
const sortedPairs = Object.entries(obj).sort(([a], [b]) => b - a);

console.log(sortedPairs); // output: [ ['100', 'foo'], ['11', 'baz'], ['3', 'baz'] ]

Non-Object Arguments are Coerced to an Object

If a non-object argument is supplied to Object.entries() it will be coerced to an object. For any primitive types (except for strings) this would return an empty array. For example:

console.log(Object.entries('foo')); // output: [ ['0', 'f'], ['1', 'o'], ['2', 'o'] ]

console.log(Object.entries(100)); // output: []

Can Be Used to Convert Object Into a Map

Since the Map object constructor accepts an iterable of entries, we can simply pass object entries as an argument to convert an Object to Map. For example:

const obj = { foo: 'bar', baz: 'qux' };
const map = new Map(Object.entries(obj));

console.log(map); // output: Map(2) { "foo" => "bar", "baz" => "qux" }