Our volunteers haven't translated this article into ไทย yet. Join us and help get the job done!
You can also read the article in English (US).
The set syntax binds an object property to a function to be called when there is an attempt to set that property.
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
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:
- 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
setor with a data entry for the same property.
({ set x(v) { }, set x(v) { } }and{ x: ..., set x(v) { } }are forbidden )
Examples
Defining a setter on new objects in object initializers
This will define a pseudo-property current of object language that, when assigned a value, will update log with that value:
var 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 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
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 2015 (6th Edition, ECMA-262) The definition of 'Method definitions' in that specification. |
Standard | Added computed property names. |
| ECMAScript Latest Draft (ECMA-262) The definition of 'Method definitions' in that specification. |
Draft |
Browser compatibility
| Desktop | Mobile | Server | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
set | Chrome Full support 1 | Edge Full support Yes | Firefox Full support 2 | IE Full support 9 | Opera Full support 9.5 | Safari Full support 3 | WebView Android Full support 1 | Chrome Android Full support 18 | Firefox Android Full support 4 | Opera Android Full support Yes | Safari iOS Full support Yes | Samsung Internet Android Full support Yes | nodejs Full support Yes |
| Computed property names | Chrome Full support 46 | Edge Full support Yes | Firefox Full support 34 | IE No support No | Opera Full support 47 | Safari No support No | WebView Android Full support 46 | Chrome Android Full support 46 | Firefox Android Full support 34 | Opera Android Full support Yes | Safari iOS No support No | Samsung Internet Android Full support 5.0 | nodejs Full support Yes |
Legend
- Full support
- Full support
- No support
- No support
See also
- getter
deleteObject.defineProperty()__defineGetter____defineSetter__- Defining Getters and Setters in JavaScript Guide

