JavaScript Tutorial: Getter & Setter Properties

, , …,

This page is a tutorial of JavaScript's gettter & setter properties.

There are 2 types of JavaScript property.

getter property is a special kind of property. When you access a property, such as myObj.buttonColor, and if that property is a getter property, then, the value is generated dynamically each time. (the purpose of getter property is similar to writing & calling a method myObj.getButtonColor(), but without explicitly calling a function.)

setter property lets you define a property such that setting the property myObj.buttonColor = value will call a function and pass value as argument, and the return value of the function is set to the property. (the purpose of getter property is similar to writing & calling a method myObj.setButtonColor(value), but without explicitly calling a function.)

Creating Getter Property

Here's a example of creating a getter property:

// create a object with 2 properties: p1 and p2. The p2 is a getter property.

var obj = {
    p1: 1,
    get p2() { return Math.random();}
};

// access property p1
console.log(obj["p1"]);         // 1

// access property p2. Each time the result will be different
console.log(obj["p2"]);         // sample output: 0.9890796344261616

You can also create getter & setter using Object.defineProperty(…). See: JavaScript Property's Attributes: Writable, Enumerable, Configurable

Creating Setter Property

Setter property is created in a similar way.

// create a object with 2 properties: p1, p2, p3. The p3 is a setter property.

var obj = {
    p1: 1, // property, named p1
    p2: 2, // property, named p2

    // property, named “p3”. it's a setter property
    set p3(xx) {
        // anything you want to do here.

        // for example, change the value of p1
        this.p1 = xx + 1;

        return 7;  // return value is ignored
    },

    p4: 4 // property, named p4
};

// access property p1
console.log(obj["p1"]); // ⇒ 1

obj["p3"] = 36;

console.log(obj["p1"]); // ⇒ 37

// access property p3
console.log(obj["p3"]); // prints 「undefined」 because there's no getter

The syntax for setter properties is set property name(parameter name) {function body}.

When user sets a property, for example obj["x"] = 3;, the setter method will get the right hand side 3 as its argument.

Getter Setter Property Name as String

Remember, in JavaScript, property names are strings, therefore can have space. 〔☛ JavaScript: Dot Notation vs Bracket Notation for Accessing Properties

When defining getter & setter properties, you can also use string in their name. Example:

// example of a getter property whose name contains space

var obj = {
    p1: 1,

    get "x y"() {
        return this["p1"] + 1;
    }
};

console.log(obj["p1"]);  // 1
console.log(obj["x y"]);  // 2

obj["p1"] = 10;
console.log(obj["p1"]);  // 10
console.log(obj["x y"]);  // 11

A property can have both getter & setter, or just one of them.

Getter & Setter Property Attributes

Note that, in JavaScript, every property has special info attached, called attributes. See: JavaScript Property's Attributes: Writable, Enumerable, Configurable.

A getter or setter property has these attributes:

There's no writable attribute, nor value.

If a accessor property only has getter, it cannot be written to. If it only has a setter, it cannot be read.

The getter & setter attributes are reflected in its property descriptor syntax:

{ get: ƒ, set: ƒ, enumerable: boolean, configurable: boolean }

〔☛ JavaScript Property's Attributes: Writable, Enumerable, Configurable

blog comments powered by Disqus