JS: Getter Setter Properties

By Xah Lee. Date: . Last updated: .

A Getter Property and Setter Property, together are also known as Accessor Properties. They are a special type of property that when accessed, they implicitly calls a function to get or set the value. [see Property Overview]

Getter Property
a special property such that when accessed e.g. obj.color, a function is called implicitly do generate the value (as if there is a method obj.getColor()).
Setter Property
a special property such that when set e.g. obj.color = val, a function is called implicitly to do it (as if there is a method obj.setColor(val)).

Create Getter Property

Getter property syntax is:

get keyName () {functionBody}

Here is example of a getter that returns a random number.

// object with 2 properties: p1 and p2. The p2 is a getter property that returns a random number
const xx = {
  p1: 1,
  get p2() {
    return Math.round(Math.random() * 100);
  },
};

// access property p2
console.log(xx.p2); // 91
console.log(xx.p2); // 37
console.log(xx.p2); // 79

Create Setter Property

Setter property syntax is:

set keyName (arg) {functionBody}

// object with 2 properties, p1 and p2. p2 is a setter property, it sets p1
const jj = {
  p1: 1,
  set p2(x) {
    this.p1 = x;
    return 7; // return value is ignored
  },
};

jj.p2 = 3;

console.log(jj.p1 === 3);

Property Key with Both Getter and Setter

A property key can be both getter and setter.

// getter and setter of the same name

const jj = {
  xx: 0,

  // getter property
  get kk() {
    return this.xx;
  },

  // setter property
  set kk(x) {
    this.xx = x;
  },
};

console.log(jj.kk === 0);

jj.kk = 3;

console.log(jj.kk === 3);

Getter/Setter Cannot Have Own Value

You cannot have a getter or setter that holds a value itself . (unless you use complex technique such as Closure) To hold/modify a value, use another property key. A good solution is to create a Symbol key property and have the getter/setter access/modify its value.

Add Getter/Setter Property

Delete Getter/Setter Property

example: 

// delete both getter and setter of key gg

const jj = {
  get gg() {
    console.log("getter called");
  },
  set gg(x) {
    console.log("setter called");
  },
};

// delete property gg
Reflect.deleteProperty(jj, "gg");

// verify
console.log(jj.hasOwnProperty("gg") === false);

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

const jj = {
  get kk() {
    3;
  },
  kk: 1,
};

console.log(jj.kk === 1);

ThisBinding in Getter/Setter

The this keyword in getter/setter is the object. [see this Binding] 

// value of this keyword in getter/setter is the object.
const jj = {
  get kk() {
    console.log(this === jj);
  },
  set kk(x) {
    console.log(this === jj);
  },
};

jj.kk;

jj.kk = 3;

Getter/Setter Property Attributes

Every property has special info attached, called Property Attributes.

Getter property has these attributes:

enumerable
Value is true/false.
configurable
Value is true/false.
get
Value is a function.

Setter property has these attributes:

enumerable
Value is true/false.
configurable
Value is true/false.
set
Value is a function.

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: f, set: f, enumerable: boolean, configurable: boolean }

JavaScript, Property

BUY Ξ£JS JavaScript in Depth