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 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'] ]

Iterating Through an Object Is Possible

You can easily iterate through an object by using Object.entries() with any loop because you 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, you 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, you 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, you 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

Prior to ES11, Object.entries() did not guarantee the order of the resulting array. However, from ES11+, the Object.entries() has the same ordering as for...in loop.

For example:

const sym = Symbol('a');
const obj = { foo: 'bar', 123: 'baz', 0: 'qux', [sym]: 'quux' };

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

To guarantee the ordering of the object entries, can simply sort the resulting array or use a Map() instead.

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, you 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" }

This post was published (and was last revised ) by Daniyal Hamid. Daniyal currently works as the Head of Engineering in Germany and has 20+ years of experience in software engineering, design and marketing. Please show your love and support by sharing this post.