What is the importance of "enumerable" attribute in defining a property in JavaScript object?

Javascript Object Oriented Programming Front End Technology

We can define a property of an object using Dot and Bracket notations. There is also another way in which a property called Object.defineProperty() is used to define a property. It usually takes 3 parameters they are object name, property name, property descriptor.

syntax

Object.defineProperty(object name, property name, property descriptor)

Lets' define a property with this method.

Example

In the following example, initially, the object has only one property named 'one'. Later on, another property named 'two' is added. Now when we tried to display all the properties, only the first property was displayed but not the added property as shown in the output.

Live Demo

<html>
<body>
<script>
   var object = {one: 1};
   Object.defineProperty(
      object,
      'two', {
         value: 2
       }
   );
   document.write(JSON.stringify(object));
</script>
</body>
</html>

Output

{"one":1}

This is all because of the "enumerable" attribute. "enumerable" attribute must be true to define a property in an object. But, "enumerable" takes up a value "false" when not declared. So, to make the value as "true" we have to declare "enumerable" and need to assign "true" to it.

In the following example when "enumerable" is initialized and assigned value as true, all the properties were displayed as shown in the output.

Example

Live Demo

<html>
<body>
<script>
   var object = {one: 1};
  Object.defineProperty(
   object,
   'two', {
      value: 2,
      enumerable: true
   }
);
document.write(JSON.stringify(object));
</script>
</body>
</html>