Explain Object.keys in JavaScript

Enumerating through the properties of a JavaScript object is a persistent requirement. Hence it becomes a popular question in a JavaScript interview. Any good JavaScript developer must know about various available options.

Note: You can find a video tutorial on the same at the end of the article.

To start with considering the Dog object as shown in next code listing:


let Dog = {
    name: 'foo',
    age: 9
}

JavaScript provides two options to enumerate through the properties. They are,

  1. Using the for..in loop
  2. Using Object.keys method

You can use for..in loop as shown in the next code listing:


for (let p in Dog) {
    console.log(p + ':' + Dog[p]);
}

Another option is to use Object.keys method, which returns the object’s own enumerable properties as an array. You can use Object.keys as shown in the code listing:


let DogProperties = Object.keys(Dog);
console.log(DogProperties);

Some important characteristics of Object.keys method are

  1. It returns properties as an array
  2. It returns only enumerable properties
  3. It returns only object’s own properties

To understand, what do precisely own properties mean, create one more object called Animal and link Dog object to Animal object using the __proto__ as shown in the next code listing:


let Animal = {
    color: 'black'
}
 
Dog.__proto__ = Animal;

Next, let us again use for..in loop as to print Dog properties,


for (let p in Dog) {
    console.log(p + ':' + Dog[p]);
}

As output, you will find that the for..in loops prints name, age, color, because it prints object’s own properties and all enumerable properties from the object’s prototype chain.

In the above example, Dog object is linked to Animal object, and it is creating a prototype chain, hence for…in loop prints properties of the both objects.

However, when you use Object.keys method, it would only return name and age properties because it only prints object’s own property and does not print properties from the object’s prototype.

One last thing you should keep in mind that both for..in loop and Object.keys method does not return non-enumerable properties. Let us make age property non-enumerable,


Object.defineProperty(Dog, 'age', { enumerable: false });
let DogProperties = Object.keys(Dog);
console.log(DogProperties);

Now you will find that Object.keys only returns name property.

If you prefer watching a video tutorial, you can watch step by step video on the same topic here :

I hope now you know the purposes of for..in loop and Object.keys method to enumerate object’s properties. Thanks for reading, and your feedback is welcome.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s