What does enumerable mean?

by

An enumerable property is one that can be included in and visited during for..in loops (or a similar iteration of properties, like Object.keys()).

If a property isn’t identified as enumerable, the loop will ignore that it’s within the object.

var obj = { key: 'val' };

console.log('toString' in obj); // true
console.log(typeof obj.toString); // "function"

for (var key in obj)
    console.log(key); // "key"

A property is identified as enumerable or not by its own [[Enumerable]] attribute. You can view this as part of the property’s descriptor:

var descriptor = Object.getOwnPropertyDescriptor({ bar: 1 }, 'bar');

console.log(descriptor.enumerable); // true
console.log(descriptor.value);      // 1

console.log(descriptor);
// { value: 1, writable: true, enumerable: true, configurable: true }

A for..in loop then iterates through the object’s property names.

var foo = { bar: 1, baz: 2};

for (var prop in foo)
    console.log(prop); // outputs 'bar' and 'baz'

But, only evaluates its statement – console.log(prop); in this case – for those properties whose [[Enumerable]] attribute is true.

This condition is in place because objects have many more properties, especially from inheritance:

console.log(Object.getOwnPropertyNames(Object.prototype));
// ["constructor", "toString", "toLocaleString", "valueOf", "hasOwnProperty", "isPrototypeOf", "propertyIsEnumerable", /* etc. */]

Each of these properties still exists on the object:

console.log('constructor' in foo); // true
console.log('toString' in foo);    // true
// etc.

But, they’re skipped by the for..in loop because they aren’t enumerable.

var descriptor = Object.getOwnPropertyDescriptor(Object.prototype, 'constructor');

console.log(descriptor.enumerable); // false

More Related Contents:

  1. Why will ES6 WeakMap’s not be enumerable?
  2. why doesn't this work -> https://jsfiddle.net/hc8g901k/ [closed]
  3. Close ad to continue as free user?
  4. How to remove item from array by value? [duplicate]
  5. How do I retrieve an HTML element’s actual width and height?
  6. jQuery load more data on scroll
  7. Can I call jQuery’s click() to follow an link if I haven’t bound an event handler to it with bind or click already?
  8. Good tutorial for using HTML5 History API (Pushstate?) [closed]
  9. What are these three dots in React doing?
  10. How to detect if a variable is an array
  11. script tag create with innerHTML of a div doesn’t work
  12. HTML selected option background-color CSS style
  13. JavaScript loop variable scope
  14. How to detect if javascript files are loaded?
  15. jQuery (almost) equivalent of PHP’s strip_tags()
  16. Ajax jquery success scope
  17. How to escape a JSON string to have it in a URL?
  18. “javascript:void(0);” vs “return false” vs “preventDefault()”
  19. Debounce function implemented with promises
  20. Random floating point double in Inclusive Range
  21. Set custom header for the request made from tag
  22. How to namespace es6 classes (for React components)
  23. Test if two lines intersect – JavaScript function
  24. Updating existing URL querystring values with jQuery
  25. how do web crawlers handle javascript
  26. How to convert one emoji character to Unicode codepoint number in JavaScript?
  27. Scope issues with Angular UI modal
  28. How can I read a local file with Papa Parse?
  29. How to have a mouseover event fire only if the mouse is hovered over an element for at least 1 second?
  30. Javascript Input Text Masking without Plugin

Leave a Comment