setter

The set syntax binds an object property to a function to be called when there is an attempt to set that property.

Syntax

{set prop(val) { . . . }}
{set [expression](val) { . . . }}

Parameters

prop
The name of the property to bind to the given function.
val
An alias for the variable that holds the value attempted to be assigned to prop.
expression
Starting with ECMAScript 2015, you can also use expressions for a computed property name to bind to the given function.

Description

In JavaScript, a setter can be used to execute a function whenever a specified property is attempted to be changed. Setters are most often used in conjunction with getters to create a type of pseudo-property. It is not possible to simultaneously have a setter on a property that holds an actual value.

Note the following when working with the set syntax:

Examples

Defining a setter on new objects in object initializers

The following example define a pseudo-property current of object language. When current is assigned a value, it updates log with that value:

const language = {
  set current(name) {
    this.log.push(name);
  },
  log: []
}

language.current = 'EN';
console.log(language.log); // ['EN']

language.current = 'FA';
console.log(language.log); // ['EN', 'FA']

Note that current is not defined, and any attempts to access it will result in undefined.

Removing a setter with the delete operator

If you want to remove the setter, you can just delete it:

delete language.current;

Defining a setter on existing objects using defineProperty

To append a setter to an existing object, use Object.defineProperty().

const o = {a: 0};

Object.defineProperty(o, 'b', {
  set: function(x) { this.a = x / 2; }
});

o.b = 10;
//  Runs the setter, which assigns 10 / 2 (5) to the 'a' property

console.log(o.a)
//  5

Using a computed property name

const expr = 'foo';

const obj = {
  baz: 'bar',
  set [expr](v) { this.baz = v; }
};

console.log(obj.baz);
//  "bar"

obj.foo = 'baz';
//  run the setter

console.log(obj.baz);
//  "baz"

Specifications

Specification
ECMAScript (ECMA-262)
The definition of 'Method definitions' in that specification.

Browser compatibility

DesktopMobileServer
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung InternetNode.js
setChrome Full support 1Edge Full support 12Firefox Full support 1.5IE Full support 9Opera Full support 9.5Safari Full support 3WebView Android Full support 1Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support 14Safari iOS Full support 1Samsung Internet Android Full support 1.0nodejs Full support Yes
Computed property namesChrome Full support 46Edge Full support 12Firefox Full support 34IE No support NoOpera Full support 47Safari No support NoWebView Android Full support 46Chrome Android Full support 46Firefox Android Full support 34Opera Android Full support 33Safari iOS No support NoSamsung Internet Android Full support 5.0nodejs Full support Yes

Legend

Full support
Full support
No support
No support

See also