JavaScript Object.defineProperty()
Example
Add a property:
// Create an Object:
const person = {
firstName: "John",
lastName: "Doe",
language: "EN"
};
// Add a new Property
Object.defineProperty(person, "year", {value:"2008"})
Try it Yourself »
Change a property:
// Create an object:
const person = {
firstName: "John",
lastName: "Doe",
language: "EN"
};
// Change a property
Object.defineProperty(person, "language", {value:"NO"})
Try it Yourself »
More Examples Below !
Description
The Object.defineProperty()
method adds or changes an object property.
The Object.defineProperty()
method lets you change property metadata.
The Object.defineProperty()
method lets you add getters and setters.
See more example below.
Related Methods:
Object.defineProperty() adds or changes one property.
Object.defineProperties() adds or changes many properties.
Object.getOwnPropertyNames() returns the property names of an object.
Object.getOwnPropertyDescriptor() returns the descriptor of a property.
Object.getOwnPropertyDescriptors() returns the descriptors of all properties.
Syntax
Object.defineProperty(object, property, descriptor)
Parameters
Parameter | Description |
object | Required. The object. |
object | Required. The property name. |
descriptor | Required. A descriptor of the property to be added or changed: value: value writable : true|false enumerable : true|false configurable : true|false get : function set : function |
Return Value
Type | Description |
Object | The passed object with the changes made. |
More Examples
Example
// Create an Object:
const person = {
firstName:
"John",
lastName : "Doe",
language : "NO",
};
// Change a Property:
Object.defineProperty(person, "language", {
value: "EN",
writable : true,
enumerable : true,
configurable : true
});
//
Enumerate Properties
let txt = "";
for (let x in person) {
txt += person[x] + "<br>";
}
// Display Properties
document.getElementById("demo").innerHTML =
txt;
Try it Yourself »
Next example is the same code, except it hides the language property from enumeration:
Example
// Create an Object:
const person = {
firstName:
"John",
lastName : "Doe",
language : "NO",
};
// Change a Property:
Object.defineProperty(person, "language", {
value: "EN",
writable : true,
enumerable : false,
configurable : true
});
//
Enumerate Properties
let txt = "";
for (let x in person) {
txt += person[x] + "<br>";
}
document.getElementById("demo").innerHTML =
txt;
Try it Yourself »
Setters and Getters
This example creates a setter and a getter to secure upper case updates of language:
Example
// Create an Object:
const person = {
firstName: "John",
lastName : "Doe",
language : "NO"
};
// Change a Property:
Object.defineProperty(person, "language", {
get : function() { return
language },
set : function(value) { language = value.toUpperCase()}
});
// Change Language
person.language = "en";
// Display Language
document.getElementById("demo").innerHTML = person.language;
Try it Yourself »
This example uses a getter to join first name and last name:
Example
// Create an Object:
const person = {
firstName: "John",
lastName : "Doe"
};
// Define a Getter
Object.defineProperty(person, "fullName", {
get: function () {return this.firstName + " " + this.lastName;}
});
Try it Yourself »
JavaScript Getters and Setters are perfect for creating counters:
Example
// Define Setters and Getters
Object.defineProperty(obj, "reset", {
get : function () {this.counter = 0;}
});
Object.defineProperty(obj, "increment", {
get : function () {this.counter++;}
});
Object.defineProperty(obj, "decrement", {
get : function () {this.counter--;}
});
Object.defineProperty(obj, "add", {
set : function (value) {this.counter += value;}
});
Object.defineProperty(obj, "subtract", {
set : function (value) {this.counter -= value;}
});
Try it Yourself »
Browser Support
Object.defineProperty()
is an ECMAScript5 (ES5) feature.
ES5 (JavaScript 2009) is fully supported in all modern browsers since July 2013:
Chrome 23 |
IE/Edge 11 |
Firefox 21 |
Safari 6 |
Opera 15 |
Sep 2012 | Sep 2012 | Apr 2013 | Jul 2012 | Jul 2013 |