JS: Getter/Setter Properties

By Xah Lee. Date: . Last updated: .

There are 2 kinds of JavaScript property. Data Property and Accessor property. 〔►see JS: Property Overview

Accessor property implicitly calls a function when the property is read or set.

ECMAScript 2015 §ECMAScript Data Types and Values#sec-object-type

There are 2 kinds of Accesor Property:

Getter property is similar to calling a method obj.getColor() , but with normal property access syntax of obj.color.

Setter property is similar to calling a method obj.setColor(val), but with normal property assignment syntax obj.color = val.

For example of a standard builtin getter property, the property "global" of RegExp.prototype is a getter property.

〔►see JS: RegExp.prototype

Create Getter Property

Getter property syntax is:

get property_key () {function_body}

Here's example of a getter that return another property's value:

// create a object with 2 properties: p1 and p2. The p2 is a getter property.
var obj = {
    p1: 1,
    get p2() {
        console.log("getter called");
        return this.p1;
    }
};

// access property p2
console.log(obj.p2);
// prints
// getter called
// 1

Create Setter Property

Setter property syntax is:

set property_key (arg) {function_body}

//  setter property example

var obj = {
    p1: 1, // data property

    // setter property
    set p2(x) {
        // anything you want to do here
        console.log("setter p2 called with arg " + x);
        this.p1 = x;
        return 7;  // return value is ignored
    }
};

obj.p2 = 3; // prints: setter p2 called with arg 3

console.log(obj.p1); // 3

Property Key with Both Getter and Setter

A property can have both getter and setter.

// getter and setter of the same key

var obj = {
    // getter property
    get kk() {console.log ( "getter called" )},

    // setter property
    set kk(x) { console.log("setter called with arg " + x)}
};

obj.kk; // prints: getter called
obj.kk = 3; // prints: setter called with arg 3

Getter / Setter Cannot Have Own Value

You cannot have a getter or setter that holds a value itself. To hold/modify a value, use another property key. A good solution is to use a symbol key. 〔►see JS: Symbol Tutorial

Create Object with Getter/Setter Property by Object.create

〔►see JS: Object.create

Add Getter/Setter Property to Existing Object

To add a getter or setter property to a existing object, use:

Object.defineProperty(obj, key, descriptor)

〔►see JS: Object.defineProperty

Object.defineProperties(obj, {key1: descriptor1}, {key2: descriptor2},…)

〔►see JS: Object.defineProperties

Delete Getter/Setter Property

To delete getter/setter property, use.

delete obj[key]

〔►see JS: Delete operator

Reflect.deleteProperty ( obj, key )

  • 〔►see JS: Reflect.deleteProperty
  • // delete both getter and setter properties of key g
    
    var bj = {
        p:1,
        get g () { console.log("getter called") },
        set g (x) { console.log("setter called") }
    };
    
    console.log(bj); // { p: 1, g: [Getter/Setter] }
    
    delete bj.g;
    
    console.log(bj); // { p: 1 }

    Property of the Same Key, Latter Overrides

    When the same property key appear multiple times, whichever comes later overrides the previous. The only exception is that the same key can be both setter and getter.

    // when getter/setter property have the same key as a data property key, whichever comes later overrides the previous
    "use strict"
    
    var o1 = {
        set p(x) { console.log("setter called with arg " + x) },
        p: 1
    };
    
    console.log(o1.p); // prints 1
    // because data property overrode the setter property of the same name

    Getter and Setter Property Attributes

    Every property has special info attached, called attributes. 〔►see JS: Property Attributes

    Getter property has these attributes:

    Setter property has these attributes:

    There's no writable attribute, nor value attribute, for getter and setter property.

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

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

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

    〔►see JS: Property Attributes

    JS Object Property Topic

    1. JS: Property Overview
    2. JS: Property Key
    3. JS: Property Dot Notation / Bracket Notation
    4. JS: Create/Delete Property
    5. JS: Get Property, Set Property
    6. JS: Check Property Existence
    7. JS: Access Property, List Properties
    8. JS: Property Attributes
    9. JS: Getter/Setter Properties
    10. JS: Property Descriptor
    Like what you read? Buy JavaScript in Depth