ACCESS TO JAVASCRIPT OBJECTS
ECMAScript 5 (ES5 2009) introduced Getter and Setter.
They allow you to define access objects (calculated properties).
THE KEYWORD GET
This example uses a lang property to get the value of the language property.
// Create an object:
const 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;
THE KEYWORD SET
This example uses a lang property to set the value of the language property.
const 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;
FUNCTION OR GETTER?
const 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();
const 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;
The second example provides simpler syntax.
WHY USE GETTER AND SETTER?
- It gives simpler syntax
- It allows equal syntax for properties and methods
- It can secure better data quality
- It is useful for doing things behind-the-scenes
Leave A Comment