JavaScript Property's Attributes: Writable, Enumerable, Configurable

, , …,

There are 2 types of JavaScript property.

ECMAScript §8#sec-8.6

Property Attributes

Each JavaScript property has associated info called attribute. ECMAScript §8#sec-8.6.1

For data property, their attributes are:

Data Property Attributes
attribute namemeaning
valueThe property's value. Can be any JavaScript data type.
writabletrue or false. Whether the property's value can be set. (⁖ o["p"] = 1)
enumerabletrue or false. Whether the property shows in some loop constructs, such as for (var x in o) {…} and Object.keys(o).
configurabletrue or false. Whether the property can be deleted (⁖ delete o["p"]) and whether its attributes can be changed.

Getter & setter properties dont't have “writabe” attribute. See: JavaScript Tutorial: Getter & Setter Properties.

Show Property Attributes

Object.getOwnPropertyDescriptor(obj, "property name") → return a property's attributes. ECMAScript §15#sec-15.2.3.3

// get the attributes of a property
var x = {"p":4};
console.log( Object.getOwnPropertyDescriptor(x, "p") );
// → { value: 4, writable: true, enumerable: true, configurable: true }

Property Descriptor

Property Descriptor is the syntax for a property's attributes. It has the form:

{ value: value, writable: boolean, enumerable: boolean, configurable: boolean }

ECMAScript §8#sec-8.10

Property Descriptor is used by several JavaScript functions to create/set properties. ⁖

Create/Modify Property Attributes

Object.defineProperty(obj, "property name", property descriptor) → create a property with specified attribute values (if property name doesn't exist), or modify a existing property's attributes. Returns the modified object obj. ECMAScript §15#sec-15.2.3.6

Creating a Property

// example of creating a property by Object.defineProperty()

var x = {};

// define a property and assign its value and attributes
Object.defineProperty(x, "p",
{ value : 3, writable: true, enumerable: false, configurable: true}
);

console.log(x["p"]);            // 3

Making a Property Read-Only

// example of setting property to be read-only

// "use strict"

var oy = {"p":3};

Object.defineProperty(oy, "p", { writable: false} );

oy["p"] = 4;                    // no effect
// if in use strict mode, then it's
// TypeError: Cannot assign to read only property 'p' of #<Object>

console.log(oy["p"]);           // 3

Note: once a property's “writable” attribute is set false, it can't be set back to true. ECMAScript §8#sec-8.6.2

Default Values for Property Descriptor

For any function that takes a Property Descriptor, the default values for all attributes is false, and for value property it defaults to undefined. ECMAScript §8#sec-8.6.1

// shows default values of attributes when using Object.defineProperty()

var ox = {};

// empty property descriptor
Object.defineProperty(ox, "p", {} );

console.log(ox["p"]);            // undefined

// the property exist
console.log(Object.getOwnPropertyNames(ox)); // [ 'p' ]

// show attributes
console.log(
 Object.getOwnPropertyDescriptor(ox, "p")
);
// { value: undefined, writable: false, enumerable: false, configurable: false }

Create/Modify Multiple Properties

Object.defineProperties() is similar to Object.defineProperty(), but lets you work on multiple properties at once.

Object.defineProperties(obj, {"p name 1": descriptor 1}, {"p name 2": descriptor 2}, … ) → create properties or modify existing properties. Returns the modified obj. ECMAScript §15#sec-15.2.3.7

// create a object
var yy = {};

// add 2 properties, with their attributes
Object.defineProperties(
    yy,
    {
        x1:{ value : 1, writable: true, enumerable: true, configurable: true},
        x2:{ value : 2, writable: true, enumerable: true, configurable: true}
    }
);

console.log(yy);                // { x1: 1, x2: 2 }

Checking Property's Enumerable Attribute

One convenient method is obj.propertyIsEnumerable(p).

o.propertyIsEnumerable("p") → Return true if o.hasOwnProperty("p") is true and its attribute enumerable is true. Else, false. ECMAScript §15#sec-15.2.4.7

// example of using .propertyIsEnumerable()
var x = {"p":4};
console.log( x.propertyIsEnumerable("p") ); // true
console.log( Object.getOwnPropertyDescriptor(x, "p").enumerable ); // true

Getter & Setter Property's Attributes

Note: getter & setter properties don't have “writable” attribute. (nor “value” property in their property descriptor). But getter property has a “getter” attribute, and setter property has a “setter” attribute. Their values are functions. See: JavaScript: Getter and Setter Properties Tutorial.

blog comments powered by Disqus