# getter/setter

[JS](https://lochiwei.gitbook.io/web/js) ⟩ [value](https://lochiwei.gitbook.io/web/js/val) ⟩ [object](https://lochiwei.gitbook.io/web/js/val/obj) ⟩ [property](https://lochiwei.gitbook.io/web/js/val/obj/prop) ⟩ getter/setter

{% hint style="success" %}
([es5](https://lochiwei.gitbook.io/web/js/feature/es5 "mention"))

an accessor property (not a data property) that has a getter and/or a setter method.

```javascript
// defining "accessor properties"

// method 1:
let obj = {
    // data property
    _value: 0,
    // accessor property (pair of methods)
    get prop() { return this._value },
    set prop(value) { this._value = value },
};

// method 2:
Object.defineProperty(obj, 'prop', {
    get() { ... },         // getter
    set(value) { ... },    // setter
});

obj.prop;            // getting obj.prop
obj.prop = value;    // setting obj.prop
```

:u6307: <mark style="color:yellow;">**synonyms**</mark>： "<mark style="color:purple;">**accessor property**</mark>"
{% endhint %}

{% tabs %}
{% tab title="👥 相關" %}

* class [getter-setter](https://lochiwei.gitbook.io/web/js/val/class/member/getter-setter "mention")
* [arr.last](https://lochiwei.gitbook.io/web/js/val/builtin/arr/ext/arr.last "mention")
* [es6](https://lochiwei.gitbook.io/web/js/feature/es6 "mention") (shorthand method names)
* [helpers](https://lochiwei.gitbook.io/web/appendix/gas/app/helpers "mention")
  {% endtab %}

{% tab title="💈範例" %}

* replit：[define properties](https://replit.com/@pegasusroe/object-define-properties#index.js)

```javascript
// object
const obj = { _name: 'john doe' };
const _age = 38;

// 🔸 using `Object.defineProperty()`
Object.defineProperty(obj, 'age', {

    // shorthand method names (ES2015)
    // -------------------------------
    // ⭐️ 注意：這裡沒有 ":" 冒號❗️
    //   ↑
    get() { return _age; },
    set(value) { _age = value; },

    enumerable: true,
    configurable: true
});

// 🔸 using `Object.defineProperties()`
Object.defineProperties(obj, {

    // ⭐️ data property
    isMale: {
        value: true,
        writable: true,
    },

    // ⭐️ accessor property
    name: {
        get() { return this._name },
        set(value) { this._name = value },
    },

});

// test
obj.name = 'Joe';    // "setter" called

obj.name,            // 'Joe'
obj.isMale,          // true
obj.age,             // 38
```

* <mark style="color:yellow;">**more examples ...**</mark>
  * [window.name](https://lochiwei.gitbook.io/web/js/scope/global/object/window/window.name "mention")
  * [\_\_proto\_\_](https://lochiwei.gitbook.io/web/js/val/obj/extend/inheritance/__proto__ "mention")
    {% endtab %}

{% tab title="📗 參考" %}

* [ ] [javascript-the-definitive-guide](https://lochiwei.gitbook.io/web/master/ref/javascript-the-definitive-guide "mention") ⟩ 6.10.6 Property Getters & Setters
  {% endtab %}

{% tab title="📘 手冊" %}

* [ ] [Functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions) ⟩ [getter](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/get)
* [ ] [Object.defineProperty()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty)
  {% endtab %}
  {% endtabs %}