Skip to main content

Enumerable in JavaScript – What Is an Enumerable Property?

An enumerable property is a property whose enumerable attribute's value is configured to be true.

For instance, suppose you use the Object.create() or Object.defineProperty() method to add some properties to an object. In that case, JavaScript will set each property's enumerable attribute's value to false.

Below are some examples.

Example 1: Create and Check an Object's Enumerable Attribute​

// Create an object containing sweet and snow properties:
const colors = Object.create(
  {},
  { sweet: { value: "pink" }, snow: { value: "white" } }
);

// Check colors' content:
console.log(colors.sweet); // Outputs: "pink"
console.log(colors.snow); // Outputs: "white"

// Confirm if the 'sweet' property's enumerable option is true or false:
console.log(colors.propertyIsEnumerable("sweet")); // Outputs: false

// Confirm if the 'snow' property's enumerable attribute is true or false:
console.log(colors.propertyIsEnumerable("snow")); // Outputs: false

Try Editing It

The propertyIsEnumerable() method returned false because JavaScript automatically sets an enumerable = false flag on properties you create through the Object.create() method. Therefore, you cannot use for...in or Object.keys() on such properties.

Example 2: Use for...in to Loop Non-Enumerable Properties​

const colors = Object.create(
  {},
  { sweet: { value: "pink" }, snow: { value: "white" } }
);

console.log(colors.sweet); // Outputs: "pink"
console.log(colors.snow); // Outputs: "white"
console.log(colors.propertyIsEnumerable("sweet")); // false
console.log(colors.propertyIsEnumerable("snow")); // false

for (const eachProp in colors) {
  console.log(`My ${eachProp} is ${colors[eachProp]}.`);
}

// The for...in code above will return: undefined

Try Editing It

The for...in code returned undefined because JavaScript does not allow using for...in to loop non-enumerable properties.

Let's now see an example of the Object.keys() method.

Example 3: Use Object.keys() to Return an Array of Non-Enumerable Properties​

const colors = Object.create(
  {},
  { sweet: { value: "pink" }, snow: { value: "white" } }
);

console.log(colors.sweet); // Outputs: "pink"
console.log(colors.snow); // Outputs: "white"
console.log(colors.propertyIsEnumerable("sweet")); // false
console.log(colors.propertyIsEnumerable("snow")); // false

console.log(Object.keys(colors));

// The Object.keys() code above will return: []

Try Editing It

The Object.keys() code returned an empty array because JavaScript does not allow using Object.keys() on non-enumerable properties.

Note: You can make a property enumerable by configuring its enumerable attribute to be true. Let's see some examples.

Example 4: Use for...in to Loop Enumerable Properties​

const colors = Object.create(
  {},
  {
    sweet: { value: "pink", enumerable: true },
    snow: { value: "white", enumerable: true },
  }
);

console.log(colors.sweet); // Outputs: "pink"
console.log(colors.snow); // Outputs: "white"
console.log(colors.propertyIsEnumerable("sweet")); // true
console.log(colors.propertyIsEnumerable("snow")); // true

for (const eachProp in colors) {
  console.log(`My ${eachProp} is ${colors[eachProp]}.`);
}

// The for...in code above will return:
// My sweet is pink.
// My snow is white.

Try Editing It

The for...in code returned valid values because we used it to loop enumerable properties.

Let's now see an example of the Object.keys() method.

Buy CSS Flexbox book

Example 5: Use Object.keys() to Return an Array of Enumerable Properties​

const colors = Object.create(
  {},
  {
    sweet: { value: "pink", enumerable: true },
    snow: { value: "white", enumerable: true },
  }
);

console.log(colors.sweet); // Outputs: "pink"
console.log(colors.snow); // Outputs: "white"
console.log(colors.propertyIsEnumerable("sweet")); // true
console.log(colors.propertyIsEnumerable("snow")); // true

console.log(Object.keys(colors));

// The Object.keys() code above will return: ["sweet", "snow"]

Try Editing It

The Object.keys() code returned an array containing colors' keys because we used Object.keys() on properties whose enumerable option is set to true.

note

JavaScript, by default, sets enumerable = true on properties you create via assignment or property initialization.

For instance, consider the following code:

// Assign an object containing a sweet property to the colors variable:
const colors = { sweet: "pink" };

// Initialize the colors object with a snow property:
colors.snow = "white";

console.log(colors); // {sweet: "pink", snow: "white"}
console.log(colors.propertyIsEnumerable("sweet")); // true
console.log(colors.propertyIsEnumerable("snow")); // true

console.log(Object.keys(colors));

// The Object.keys() code above will return: ["sweet", "snow"]

Try Editing It

Overview​

This article discussed what an enumerable property is in JavaScript. We also used examples to see how it works.