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 6, 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:
- It can have an identifier which is either a number or a string;
- It must have exactly one parameter (see Incompatible ES5 change: literal getter and setter functions must now have exactly zero or one arguments for more information);
- It must not appear in an object literal with another
set
or with a data entry for the same property.
({ set x(v) { }, set x(v) { } }
and{ x: ..., set x(v) { } }
are forbidden )
A setter can be removed using the delete
operator.
Examples
Defining a setter on new objects in object initializers
This will define a pseudo-property current
of object o
that, when assigned a value, will update log
with that value:
var o = { set current (str) { this.log[this.log.length] = str; }, log: [] }
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 o.current;
Defining a setter on existing objects using defineProperty
To append a setter to an existing object later at any time, use Object.defineProperty()
.
var 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
Note: Computed properties are experimental technology, part of the ECMAScript 6 proposal, and are not widely supported by browsers yet. This will trigger a syntax error in non-supporting environments.
var expr = "foo"; var 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 | Status | Comment |
---|---|---|
ECMAScript 5.1 (ECMA-262) The definition of 'Object Initializer' in that specification. |
Standard | Initial definition. |
ECMAScript 6 (ECMA-262) The definition of 'Method definitions' in that specification. |
Release Candidate | Added computed property names. |
Browser compatibility
Based on Robert Nyman's page. No support (notably in IE6-8) means that the script will trigger a syntax error.
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
Basic support | 1 | 2.0 (1.8.1) | 9 | 9.5 | 3 |
Computed property names | Not supported | 34 (34) | Not supported | Not supported | Not supported |
Feature | Android | Chrome for Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|
Basic support | (Yes) | (Yes) | 1.0 (1.8.1) | (Yes) | (Yes) | (Yes) |
Computed property names | Not supported | Not supported | 34.0 (34.0) | Not supported | Not supported | Not supported |
SpiderMonkey-specific notes
- Starting with JavaScript 1.8.1, setters are no longer called when setting properties in object and array initializers.
- From SpiderMonkey 38 on, a setter with a rest parameter is a
SyntaxError
as per the ES6 specification.
See also
- getter
delete
Object.defineProperty()
__defineGetter__
__defineSetter__
- Defining Getters and Setters in JavaScript Guide