JavaScript: Getter/Setter Properties

By Xah Lee. Date: . Last updated: .

There are 2 kinds of JavaScript property.

Data Property
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 (like obj.getColor()). (the function is either JavaScript internal or user-defined.)
Setter Property
When a property is set such as obj.color = val, a function is called to do it, similar to obj.setColor(val). (the function is either JavaScript internal or user-defined.)

[see Property Overview]

Create Getter Property

Getter property syntax is:

get key_name () {function_body}

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 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 have the getter/setter access/modify its value.

Add Getter/Setter Property

Delete Getter/Setter Property


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

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

Value is true/false.
Value is true/false.
Value is a function.

Setter property has these attributes:

Value is true/false.
Value is true/false.
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

JavaScript in Depth

JavaScript in Depth

Basic Syntax

Value Types





Object and Inheritance



Iterable 🌟