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
console.log(obj.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 = {
        p:1,
        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. Check Property Existence
    7. Access Property
    8. List Properties
    9. Property Attributes
    10. Getter/Setter
    11. Property Descriptor
    12. Symbol
    Liket it? I spend 2 years writing this tutorial. Help me spread it. Tell your friends. Or, Put $5 at patreon.

    Or, Buy JavaScript in Depth

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

    JavaScript in Depth

    Basics

    1. JavaScript Basics
    2. true, false
    3. Operators
    4. Branch Control
    5. Loop
    6. Array Basics
    7. Object Basics
    8. RegExp Basics

    Variable

    1. Value Types
    2. let
    3. const
    4. var
    5. var Order
    6. var Scope
    7. Global Variable
    8. Destructuring Assignment

    String

    1. String Overview
    2. Template String
    3. Char, Code Unit, Codepoint
    4. String Escape Sequence
    5. Unicode Escape Sequence

    Function

    1. Define Function
    2. Arrow Function ⭐
    3. Function Params
    4. “arguments” Object
    5. Rest Params ⭐
    6. Arg Default Value ⭐
    7. Arg Destructure ⭐
    8. f Declaration vs Expression
    9. Closure
    10. f call apply bind
    11. Functional Programing

    Object Property

    1. Property Overview
    2. Property Key
    3. Dot vs Bracket Notation
    4. Create/Delete Property
    5. Get/Set Property
    6. Check Property Existence
    7. Access Property
    8. List Properties
    9. Property Attributes
    10. Getter/Setter
    11. Property Descriptor
    12. Symbol

    Object and Inheritance

    1. Object Overview
    2. Object Type
    3. Find Object's Type
    4. Prototype Chain
    5. Create Object
    6. Object Literal Expr
    7. Create Object with Parent X
    8. Get/Set Parent
    9. Show Prototype Chain
    10. Prevent Adding Property
    11. Clone Object
    12. Test Object Equality
    13. Add Method to Prototype

    Array

    1. Understand JS Array
    2. Create Array
    3. Sparse Array
    4. Array-Like Object
    5. Array How-To

    Class

    1. “this” Binding
    2. What's Constructor?
    3. Property Key "prototype"
    4. Operator “new”
    5. Operator “instanceof”
    6. Property Key “constructor”
    7. Class
    8. Keyword “extends”
    9. Keyword “super”

    Iterable ⭐

    1. Interface
    2. Iterable
    3. Iterator
    4. Iterator Prototype
    5. for-of Loop
    6. Spread Operator
    7. Generator
    8. Generator Function

    Misc

    1. Set Object
    2. Map Object
    3. Try Catch Throw Finally
    4. Import/Export
    5. Promise
    6. Proxy
    7. ES2015 Features
    8. How to Convert ES5 to ES2015
    9. Style Guide
    10. Semicolon Rules
    11. Exclamation Before Function
    12. How to Determine Strict Mode?
    13. x.y.z Associativity
    14. Function Chain
    15. Random Number, Range, Integer, Element
    16. Timing JS Code
    17. Range Function for Array
    18. Random Array Element, Randomize Array
    19. Tagged Template String
    20. String to Number
    21. Format Number

    Object Reference

    1. the Global Object
    2. Object 🙼 Object.prototype
    3. Array 🙼 Array.prototype
    4. Function 🙼 Function.prototype
    5. String 🙼 String.prototype
    6. RegExp 🙼 RegExp.prototype 🙼 RegExp Syntax
    7. Date 🙼 Date.prototype
    8. Set ⭐🙼 Set.prototype
    9. Map ⭐🙼 Map.prototype
    10. JSON
    11. Math
    12. Reflect
    13. Symbol ⭐🙼 Symbol.prototype
    14. Number 🙼 Number.prototype
    15. Boolean 🙼 Boolean.prototype

    DOM How-To

    1. Basic DOM Methods
    2. Get Elements by ID, Tag, Name, Class, CSS Selector
    3. Change CSS
    4. Change Node Content
    5. Create/Insert Node
    6. Remove Node
    7. Get Element's Attribute Value
    8. Set Element's Attribute Value
    9. Remove Element's Attribute Value
    10. List/Add/Remove Class Attribute
    11. Add/Remove Event Handler
    12. Navigate DOM Tree

    DOM Overview

    1. Browser Window Object, Document Object Model
    2. Intro to Event-Based Programing
    3. JavaScript Load Order
    4. What is Live Object
    5. NodeList vs HTMLCollection
    6. DOM: Whitespace Nodes

    Basic DOM Methods

    1. Basic DOM Methods
    2. Node Type, Name, Value
    3. Navigate DOM Tree

    HTML Form

    1. HTML Form
    2. Visit URL in a New Window
    3. Instant Field Validation
    4. Input Field Validation
    5. HTML: Input Range Slider

    DOM How To

    1. Encode URL, Escape String
    2. Browser Info, Navigator Object
    3. Get URL (window.location)
    4. Web Cookies
    5. Web Storage
    6. Find Window Width
    7. Find Element Width
    8. WebSocket

    Web Scripting Examples

    1. Disable Right Click
    2. document.write
    3. Image Rollover
    4. Pop-up New Window
    5. Digital Clock
    6. Stopwatch
    7. Fade a Element
    8. Fade a Element Using CSS Transition
    9. Shake Element
    10. How to Create Tooltip
    11. Falling Snow Effect
    12. JavaScript: Floating Box Following Scroll

    DOM Misc

    1. Value of “this” in Event Handler
    2. Event Delegation
    3. Get Current Script Tag
    4. insertAfter Element
    5. Randomize List
    6. create Document Fragment
    7. innerHTML, nodeValue, textContent, innerText?

    jQuery

    1. jQuery Basics
    2. jQuery() vs querySelectorAll()
    3. Write JQuery Plugin

    node.js