JS: Getter/Setter Properties

By Xah Lee. Date: . Last updated: .

There are 2 kinds of JavaScript property.

[see JS: Property Overview]

Accessor property implicitly calls a function when the property is read or set.

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.

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

For example of a standard builtin getter property, the property "global" of RegExp.prototype is a getter property.

[see JS: RegExp.prototype]

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.
const obj = {
    p1: 1,
    get p2() {
        console.log("getter called");
        return this.p1;

// access property p2
// prints
// getter called
// 1

Create Setter Property

Setter property syntax is:

set property_key (arg) {function_body}

//  setter property example

const 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

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. To hold/modify a value, use another property key. A good solution is to create a symbol key property and modify its value. [see JS: Symbol Tutorial]

Create Object with Getter/Setter Property by Object.create

JS: 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 JS: Object.defineProperty]

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

[see JS: Object.defineProperties]

Delete Getter/Setter Property

To delete getter/setter property, use.

delete obj[key]

[see JS: Delete operator]

Reflect.deleteProperty ( obj, key )

  • [see JS: Reflect.deleteProperty]
  • // delete both getter and setter properties of key g
    const bj = {
        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"
    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

    Getter and Setter Property Attributes

    Every property has special info attached, called attributes. [see JS: 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: f, set: f, enumerable: boolean, configurable: boolean }

    [see JS: Property Attributes, writable, enumerable, configurable]

    JS Object Property

    1. Property Overview
    2. Property Key
    3. Dot vs Bracket Notation
    4. Create/Delete Property
    5. Get/Set Property
    6. Property Existence
    7. Access Property
    8. List Properties
    9. Property Attributes
    10. Getter/Setter
    11. Property Descriptor
    12. Symbol
    Like it? Help me by telling your friends. Or, Put $5 at patreon.

    Or, Buy JavaScript in Depth

    If you have a question, put $5 at patreon and message me.

    Web Dev Tutorials