Enumerability of Properties of an Object in Javascript

Hey folks, in this article , you will learn about enumerable properties in Javascript. I assume that you have the knowledge about javascript object.

So, when we create an object then we set the properties and their values. These properties have several internal attributes like value, writable, enumerable and configurable.

Output:

So, see the property “firstName” has the four attributes value, configurable, enumerable and writable.

Here, we will discuss about it’s enumerability, what is it?,How it works ?

What enumerbale means ?

It means that a property can be viewed if it is iterated using for..in loop or Object.keys() method.

Lets see an example :

Output :

In above example all the properties are displayed by both for..in loop and Object.keys() method because “All the properties which are created by simple assignment or property initializer are enumerable by default.” Means for these properties enumerable : true.

Suppose we don’t want some key to be accesible by for..in loop or Object.keys() then we have to make this key { enumerable : false }. So to that we will use Object.defineProperty() method which allows us to change the enumerability of keys.

Output :

Here , “age” will not be accessible by Object.keys() or for..in loop here bcz we have set it’s enumerability to false. Also if we add a new property by using Object.defineProperty() method then by default enumerbale : false.

Output:

We can also set the enumerable value during adding new property.

Output:

Check if property is enumerable

We can check whether the property is enumerable or not by using propertyIsEnumerable() which returns a Boolean indicating whether the specified property is enumerable and is the object’s own property.

Output : true , true, false

firstName and age are enumerable because firstName is added by property initializer and age is added by simple assignment so by default enumerable will be set to true for these. But “pin” is added by Object.defineProperty() method so by default enumerable will be false.

Let’s see some more examples where there is a great importance of enumerable properties:

Object.create()

See below example

Output: [‘city’]

key “name” is not enumerable here means enumrable : false. So only “city” will be accessible . You can make enumerable : true like this :

Output: [‘name’, ‘city’]

Similarly in this example “getFoo” is not enumerable

Output : [‘foo’]

But after setting the enumerable : true Output will be : [‘getFoo’, ‘foo’]

Object.assign()

As we all know know this method copies all own properties and enumerable properties from source object to target object.See below example to be more clear about this :

Output:

In person2 object the key “pin” will not be there because in source object it was not enumerable (enumerable: false). If in source it were enumerable (enumerable: true) then it would have been also available in person2. Let’s make it available in person2 by making this enumerable : true.

Output :

Hope it will help you a lot 👏👏👏