How Object.entries work internally in JavaScript

In JavaScript, the Object.entries method returns an array of object’s own enumerable properties. It returns properties as a [key, value] pair, where the key is a string.

You can read enumerable properties as an array of key-value pairs using the Object.entries method as shown below,


let Product = {
    Title: 'Book',
    Price: 120,
    Author: undefined,
    inStock: true
}
 
console.log(Object.entries(Product));

Since it returns an array which adheres to the iterable protocol, you can also use the for…of loop to iterate output of the Object.entries method.


for (let f of Object.entries(Product)) {
    console.log(f);
}

Own Enumerable Properties

The Object.entries method only returns own enumerable properties of the object. That means it does no return properties from the prototype chain.

Let us consider below code listing, here the Owner object is the prototype of the Product object.


let Owner = {
    Name: 'Foo',
    City: 'Tokyo'
}
 
let Product = {
 
    Title: 'Book',
    Price: 120,
    Author: undefined,
    inStock: true
}
 
Object.setPrototypeOf(Product, Owner);
 
for (let i in Product) {
    console.log(Product[i]);
}
 
console.log(Object.entries(Product));

In the output, you will notice that for…in loop iterates enumerable properties from both Owner and Product object . However, Object.entries only iterates enumerable properties of the Product object, which is main difference between Object.entries and the for…in loop.

Also, Object.entries does not return properties which enumerable is set to false.


let Product = {
    Title: 'Book',
    Price: 120,
    Author: undefined,
    inStock: true
}
 
Object.defineProperty(Product,
    'Author',
    { enumerable: false });
 
console.log(Object.entries(Product));

In the above code, for the Product object, Object.entries does not return Author property, as its enumerable is set to false.

How it internally works?

When you call Object.entries, JavaScript execute it in following steps,

  1. Checks whether passed argument is an object or not.
  2. It checks that using internal abstract operation ToObject(O)
  3. The abstract ToObject(O) operation,
    1. Throws TypeError if O is null or undefined
    1. Returns crossponding objects if O is a primitive type such number, Boolean, string, symbol, BigInit
    1. Returns argument if O is an object
  4. Creates a nameList with all enumerable and own properties of the O
  5. Convert nameList to the Array using the abstract operation CreateArrayFromList
  6. Returns nameList array

Examples

Now You know from the above algorithm that, JavaScript will throw TypeError for the below code,


console.log(Object.entries(null));
console.log(Object.entries(undefined));

And when you pass primitive types values as arguments, JavaScript returns an Empty Array.


console.log(Object.entries(99));
console.log(Object.entries(true));
console.log(Object.entries(Symbol('foo')));

If you pass a string argument, JavaScript returns each character as items of the array.


console.log(Object.entries("JavaScript"));

One another thing is that if you pass more than one argument in Object.entries, JavaScript takes the first argument and ignores extra arguments.  Below code throws an error as the first argument is undefined, and for the undefined value Object.entries throw TypeError.


console.log(Object.entries(undefined, Dog, "JavaScript"));

So, it would be best if you used Object.entries method to return object’s own enumerable properties as an array.

Summary

  • Object.entries returns enumerable properties as an array
  • Properties are returned as key-value pair where key is a string
  • It only returns own properties and does not return property from the prototype chain
  • It only returns enumerable properties

I hope you find this post useful. Thanks for reading.

4 responses to “How Object.entries work internally in JavaScript”

  1. […] How Object.entries work internally in JavaScript – Dhananjay Kumar […]

  2. Hello Dhananjay, Your blog posts are daily doses to my brain. Everyday I learn something new. Thank you so much.

  3. Dhananjay Kumar , Microsoft Most Valuable Professional , Google Developer Expert, Trainer and Consultant

    Thanks

  4. Well explained..

Leave a comment

Create a website or blog at WordPress.com