10.5 Object Accessors

JavaScript Getter (The get Keyword)

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

Example 1: JS Getters and Setters - The get Keyword

// Create an object:
var person = {
  firstName: "John",
  lastName : "Doe",
  language : "en",
  get lang() {
    return this.language;
  }
};

// Display data from the object using a getter:
document.getElementById("demo").innerHTML = person.lang;

JavaScript Setter (The set Keyword)

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

Example 2: JS Getters and Setters - The set Keyword

var person = {
  firstName: "John",
  lastName : "Doe",
  language : "",
  set lang(lang) {
    this.language = lang;
  }
};

// Set an object property using a setter:
person.lang = "en";

// Display data from the object:
document.getElementById("demo").innerHTML = person.language;

JavaScript Function or Getter?

What is the differences between these two examples?

Example 3a: JS Object Methods part 1

var person = {
  firstName: "John",
  lastName : "Doe",
  fullName : function() {
    return this.firstName + " " + this.lastName;
  }
};

// Display data from the object using a method:
document.getElementById("demo").innerHTML = person.fullName()

Example 3b: JS Object Methods part 2

var person = {
  firstName: "John",
  lastName : "Doe",
  get fullName() {
    return this.firstName + " " + this.lastName;
  }
};

// Display data from the object using a getter:
document.getElementById("demo").innerHTML = person.fullName;

• Example 1 access fullName as a function: person.fullName().
• Example 2 access fullName as a property: person.fullName.
• The second example provides simpler syntax.

Data Quality

• JavaScript can secure better data quality when using getters and setters.
• Using the lang property, in this example, returns the value of the language property in upper case:

Example 4: JS Getters and Setters - Data Quality part 1

// Create an object:
var person = {
  firstName: "John",
  lastName : "Doe",
  language : "en",
  get lang() {
    return this.language.toUpperCase();
  }
};

// Display data from the object using a getter:
document.getElementById("demo").innerHTML = person.lang;

Using the lang property, in this example, stores an upper case value in the language property:

Example 5: JS Getters and Setters - Data Quality part 2

var person = {
  firstName: "John",
  lastName : "Doe",
  language : "",
  set lang(lang) {
    this.language = lang.toUpperCase();
  }
};

// Set an object property using a setter:
person.lang = "en";

// Display data from the object:
document.getElementById("demo").innerHTML = person.language;

Object.defineProperty()

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

Example 6: JS Getters and Setters - Object.defineProperty()

// Define 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;}
});

// Play with the counter:
obj.reset;
obj.add = 5;
obj.subtract = 1;
obj.increment;
obj.decrement;