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.
Get creative with your projects
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.
Your support matters: Buy me a coffee to support CodeSweetly's mission of simplifying coding concepts.
Join CodeSweetly Newsletter