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. ES2015 §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_name (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

A property can have both getter and setter, or just one of them.

// 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 (ES2015)

Create Object with Getter/Setter Property with Object.create()

JavaScript: Creating Object with Object.create()

Add Getter/Setter Property to Existing Object

You can add a getter or setter property, by using Object.defineProperty(…).

Object.defineProperty(object_name, property_key, { get : function_with_0_param, enumerable: false, configurable: true});

Object.defineProperty(object_name, property_key, { set : function_with_1_param, enumerable: false, configurable: true});

var ob = {p1:3};

// add a getter property key "g1"
Object.defineProperty(ob, "g1", { get : function () { console.log("getter called ") }});

ob.g1;
// prints: getter called

// add a setter property key "s1"
Object.defineProperty(ob, "s1", { set : function (x) { console.log("setter called with arg " +x) }});

ob.s1 = 4;
// prints: setter called with arg 4

Or use Object.defineProperties(…)

Object.defineProperties(obj, {pkey1, { get: function, enumerable: false, configurable: true }}, {pkey2, …},…)

〔➤see JavaScript: Property Attributes: Writable, Enumerable, Configurable

Delete Getter/Setter Property

Use the delete operator to delete getter/setter property.

// delete a getter property
var oo = {
    p:1,
    get g () { console.log("getter called") }
};

console.log(oo); // { p: 1, g: [Getter] }

delete oo.g;

console.log(oo); // { p: 1 }

Property of the Same Key, Latter Overrides

When getter/setter property have the same key as a data property key, whichever comes later overrides the previous.

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

// ------------------------------
// now we reverse order

var o2 = {
    p: 1,
    set p(x) { console.log("setter called with arg " + x) }
};

o2.p = 2; // prints: setter called with arg 2
// because setter property overrode the data property of the same name

// ------------------------------
// now we try getter

var o3 = {
    g: 1,
    get g() { console.log("getter called") }
};
o3.g; // prints: getter called

var o3 = {
    get g() { console.log("getter called") },
    g: 1
};
o3.g; // prints nothing

Getter and Setter Property Attributes

Every property has special info attached, called attributes. 〔➤see JavaScript: Property Attributes: Writable, Enumerable, Configurable

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: Writable, Enumerable, Configurable

JS Object Property Topic

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