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
andvalue
; - 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 aMap
.
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" }
Hope you found this post useful. It was published . Please show your love and support by sharing this post.