JavaScript Object.defineProperty()

Definition and usage

Object.defineProperty() Method is used to add or modify the properties of the object.

Object.defineProperty() Method allows you to change the metadata of the property.

Object.defineProperty() Method allows you to add getter and setter.

Related methods:

Object.defineProperty() Add or modify properties.

Object.defineProperties() Add or modify multiple properties.

Object.getOwnPropertyNames() Returns all property names of the object.

Object.getOwnPropertyDescriptor() Returns the descriptor of the property.

Object.getOwnPropertyDescriptors() Returns a description of all properties of the object.

Instance

Example 1

Add attribute:

// Create an object
const person = {
  firstName: "Bill",
  lastName: "Gates"
  language: "EN"
};
// Add a new attribute
Object.defineProperty(person, "year", {value:"2008"});

Try it yourself

Example 2

Modify attribute:

// Create an object
const person = {
  firstName: "Bill",
  lastName: "Gates"
  language: "EN"
};
// Modify a property
Object.defineProperty(person, "language", {value:"NO"});

Try it yourself

Example 3

// Create an object
const person = {
  firstName: "Bill",
  lastName: "Gates"
  language: "NO"
};
// Modify 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 attribute
document.getElementById("demo").innerHTML = txt;

Try it yourself

Example 4

The next example is the same as the previous example code, but the language attribute is hidden to make it non-enumerable:

// Create an object
const person = {
  firstName: "Bill",
  lastName: "Gates"
  language: "NO"
};
// Modify 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

Example 5

In this example, a setter and getter are created to ensure that the language property is updated in uppercase:

// Create an object
const person = {
  firstName: "Bill",
  lastName: "Gates"
  language: "NO"
};
// Modify a property
Object.defineProperty(person, "language", {
  get: function() { return language },
  set: function(value) { language = value.toUpperCase() }
});
// Modify language
person.language = "en";
// Display language
document.getElementById("demo").innerHTML = person.language;

Try it yourself

Example 6

In this example, getter is used to concatenate firstName and lastName:

// Create an object
const person = {
  firstName: "Bill",
  lastName: "Gates"
};
// Define a Getter
Object.defineProperty(person, "fullName", {
  get: function () { return this.firstName + " " + this.lastName; }
});

Try it yourself

Example 7

JavaScript's getters and setters are very suitable for creating counters:

// Define Setter and Getter
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

Syntax

Object.defineProperty(object, property, descriptor)

parameters

Return value

Browser support

Object.defineProperty() Is a feature of ECMAScript5 (ES5).

Since July 2013, all modern browsers have fully supported ES5 (JavaScript 2009):