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
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
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: []
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.
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.
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"]
The Object.keys()
code returned an array containing colors
' keys because we used Object.keys()
on properties whose enumerable
option is set to true
.
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"]
Overview
This article discussed what an enumerable property is in JavaScript. We also used examples to see how it works.