JavaScript: Getter/Setter Properties

By Xah Lee. Date: . Last updated: .

There are 2 kinds of JavaScript property.

Data Property
β€œnormal”
Accessor Property
aka Getter/Setter property. Implicitly calls a function when the property is read or set.

There are 2 kinds of Accesor Property:

Getter Property
When a property is accessed such as obj.color, the value is generated by calling a function implicitly.
Setter Property
When a property is set such as obj.color = val, it will implicitly call a function and pass value as argument, and the return value of the function is set to the property.

[see Property Overview]

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.

Create Getter Property

Getter property syntax is:

get key_name () {function_body}

Here's 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 obj = {
    p1: 1,
    get p2() {
        return Math.round (Math.random() * 100) ;
    }
};

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

Create Setter Property

Setter property syntax is:

set key_name (arg) {function_body}

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

obj.p2 = 3;

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

Property Key with Both Getter and Setter

A property key can be both getter and setter.

// getter and setter of the same key

const 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 . (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 modify its value. [see Symbol Tutorial]

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") }
};

console.log(jj); // { gg: [Getter/Setter] }

// 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 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

ThisBinding in Getter/Setter

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

const x1 = {
    get kk () { return this },
    set kk (x) {  console.log( this ); return x;}
};

console.log( x1.kk );
// { kk: [Getter/Setter] }

x1.kk = 3;
// { kk: [Getter/Setter] }

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

βˆ‘ JS in Depth
XAH Β BUY NOW

JS in Depth

JS Obj Ref

DOM


JS in Depth

Basic Syntax

Value Types

Variable

String

Function

Property

Object and Inheritance

Array

Constructor/Class

Iterable 🌟

Misc