JavaScript Object Accessors

JavaScript Accessors (Getter and Setter)

ECMAScript 5 (2009) introduced Getter and Setter.

Getter and Setter allow you to define object accessors (computed properties).

JavaScript Getter (get keyword)

This example uses lang Properties to get language The value of the property.

Instance

// Create an object:
var person = {
  firstName: "Bill",
  lastName : "Gates",
  language : "en",
  get lang() {
    return this.language;
  }
};
// Use a getter to display data from the object:
document.getElementById("demo").innerHTML = person.lang;

Try It Yourself

JavaScript Setter (set keyword)

This example uses lang Properties to set language The value of the property.

Instance

var person = {
  firstName: "Bill",
  lastName : "Gates",
  language : "",
  set lang(lang) {
    this.language = lang;
  }
};
// Use a setter to set the object property:
person.lang = "en";
// Display data from the object:
document.getElementById("demo").innerHTML = person.language;

Try It Yourself

JavaScript function or Getter?

Where is the difference between the following two examples?

Example 1

var person = {
  firstName: "Bill",
  lastName : "Gates",
  fullName : function() {
    return this.firstName + " " + this.lastName;
  }
};
// Use methods to display data from an object:
document.getElementById("demo").innerHTML = person.fullName();

Try It Yourself

Example 2

var person = {
  firstName: "Bill",
  lastName : "Gates",
  get fullName() {
    return this.firstName + " " + this.lastName;
  }
};
// Use a getter to display data from the object:
document.getElementById("demo").innerHTML = person.fullName;

Try It Yourself

Example 1 accesses fullName as a function: person.fullName().

Example 2 accesses fullName as a property: person.fullName.

The second example provides a more concise syntax.

Data quality

When using getter and setter, JavaScript can ensure better data quality.

In this example, using lang Properties are returned in uppercase form language The value of the property:

Instance

// Create an object:
var person = {
  firstName: "Bill",
  lastName : "Gates",
  language : "en",
  get lang() {
    return this.language.toUpperCase();
  }
};
// Use a getter to display data from the object:
document.getElementById("demo").innerHTML = person.lang;

Try It Yourself

In this example, using lang The property stores uppercase values in language In properties:

Instance

var person = {
  firstName: "Bill",
  lastName : "Gates",
  language : "",
  set lang(lang) {
    this.language = lang.toUpperCase();
  }
};
// Use a setter to set the object property:
person.lang = "en";
// Display data from the object:
document.getElementById("demo").innerHTML = person.language;

Try It Yourself

Why use Getters and Setters?

  • It provides a more concise syntax
  • It allows the syntax of properties and methods to be the same
  • It ensures better data quality
  • Beneficial for background work

An instance of a counter

Instance

var obj = {
  counter : 0,
  get reset() {
    this.counter = 0;
  },
  get increment() {
    this.counter++;
  },
  get decrement() {
    this.counter--;
  },
  set add(value) {
    this.counter += value;
  },
  set subtract(value) {
    this.counter -= value;
  }
};
// Operation Counter:
obj.reset;
obj.add = 5;
obj.subtract = 1;
obj.increment;
obj.decrement;
Object.defineProperty()

Try It Yourself

Object.defineProperty() Methods can also be used to add Getters and Setters:

Instance

// Define the object
var obj = {counter : 0};
// Define setters
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;}
});
// Operation Counter:
obj.reset;
obj.add = 5;
obj.subtract = 1;
obj.increment;
obj.decrement;

Try It Yourself

Browser Support

Internet Explorer 8 and earlier versions do not support getters and setters:

Yes 9.0 Yes Yes Yes