# JS Tip of the Day: Accessor Properties (Getter/Setter)

**URL:** <https://forum.kirupa.com/t/js-tip-of-the-day-accessor-properties-getter-setter/643141>\
**Category:** web dev\
**Created:** [March 26, 2020, 1:50pm UTC](https://forum.kirupa.com/t/js-tip-of-the-day-accessor-properties-getter-setter/643141 "2020-03-26T13:50:11Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![senocular](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/senocular/32/7217_2.png) [@senocular](https://forum.kirupa.com/u/senocular)\
**Post date:** [March 26, 2020, 1:50pm UTC](https://forum.kirupa.com/t/js-tip-of-the-day-accessor-properties-getter-setter/643141/1 "2020-03-26T13:50:11Z")

</div>

**Accessor Properties (Getter/Setter)**  
Level: Intermediate

There are two kinds of properties in JavaScript, data properties and accessor properties. Data properties are your normal, every-day properties with no special behavior (unless exotic, I’m looking at you array `length`). They’re often defined using the `=` operator (or `:` in object literals) and are easily accessed by name through the `.` or `[]` operators.

Accessor properties work the same way on the outside, but internally each time you access or assign a value using an accessor property, a function gets executed. The access function is called a “getter” while the assignment function is called a “setter” and they’re responsible for providing or assigning the value of that property. Because of this, you may hear accessor properties referred to as “getter-setter” properties.

You can create accessor properties in object literals and classes using the `get` and `set` keywords before your method names. Instead of becoming a method callable as a function, the method instead becomes an accessor property. Getter methods should be defined without parameters while setter methods should be defined with a single parameter, the value the property is being assigned to.

```javascript
let obj = {
    data: 1, // data property
    get accessor () { // accessor get
        console.log('get called');
        return 2;
    },
    set accessor (value) { // accessor set
        console.log('set called: ' + value);
    },
}

obj.data = 0;
obj.accessor; // get called (evaluates to 2)
obj.accessor = 3; // set called: 3

```

You don’t have to include both a getter and a setter for an accessor property. You can include only one or the other. Having just a getter makes the property read-only while having just a setter (far less common) means you can set a property but not have a way to get it. Note that if in strict mode, trying to use a setter when one is not defined will result in an error. Getting an accessor property without a getter will simply return `undefined`.

```javascript
let time = {
    get current () {
        return new Date().toLocaleTimeString();
    }
};
console.log(time.current); // 10:30:00 AM
time.current = 'yesterday'; // ignored or TypeError if strict mode
// (time travel not yet possible)

```

The `get` and `set` syntax only works with object literals and `class` definitions; they do not work with existing objects. If you want to add an accessor property to an existing object you can use `Object.defineProperty()`. In the property descriptor object given to `Object.defineProperty()`, you use methods named `get` and `set` which will be used as the getter and setter methods respectively.

```javascript
let rect = { width: 10, height: 5 };
Object.defineProperty(rect, 'area', {
    get () {
        return this.width * this.height;
    },
    set (value) {
        throw new TypeError('Property area cannot be set');
    }
});
console.log(rect.area); // 50
rect.area = 100; // TypeError: Property area cannot be set

```

Accessor properties are a great way to give added functionality to normal property usage. This can be used for computed properties (seen above with `rect`), input validation, triggering renders on state changes, or any number of other things. One thing to keep in mind, though, is that when working with accessor properties, your options are limited. A setter, for example, only ever receives one argument, the value being assigned. If you think you might want more, you might want to consider using a normal method instead.

More info:

- [get on MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/get)
- [set on MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/set)
- [Object.defineProperty on MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty)