JavaScript: Getter/Setter Properties

By Xah Lee. Date: . Last updated: .

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

Accessor property generates its value at call time. 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. (For example, the builtin property .length is a getter property.)

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

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 JavaScript: Symbol Tutorial

Create Object with Getter/Setter Property by Object.create

〔►see JavaScript: 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 JavaScript: Object.defineProperty

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

〔►see JavaScript: Object.defineProperties

Delete Getter/Setter Property

To delete getter/setter property, use.

delete obj[key]

〔►see JavaScript: Delete operator

Reflect.deleteProperty ( obj, key )

  • 〔►see JavaScript: 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 JavaScript: 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 JavaScript: Property Attributes

    JS Object Property Topic

    1. JavaScript: Property Overview
    2. JavaScript: Property Key
    3. JavaScript: Dot Notation vs Bracket Notation for Properties
    4. JavaScript: Create/Delete Property
    5. JavaScript: Read/Write to Property and Prototype Chain
    6. JavaScript: Check Property Existence
    7. JavaScript: Access Property, List Properties
    8. JavaScript: Property Attributes
    9. JavaScript: Getter/Setter Properties
    10. JavaScript: Property Descriptor
    Like what you read? Buy JavaScript in Depth
    or, buy a new keyboard, see Keyboard Reviews.