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.

CodeSweetly ads

Use Flexbox like a pro

Learn CSS Flexbox with live examples and images.

Check it out

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