JS Tutorial
JS Version
JS Objects
JS Function
JS Classes
JS Async
JS HTML DOM
JS Browser BOM
JS Web API
JS AJAX
JS JSON
JS vs JQUERY
JS Graphics
Object Accessors
JavaScript Accessors (Getters and Setters)
ECMAScript 5 (ES5 2009) introduced Getter and Setters.
Getters and setters enable you to specify the Object Accessors (Computed Properties).
JavaScript Getter (The get Keyword)
This example uses a lang property to retrieve the value of the language property.
Example
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Getters and Setters</h2>
<p>Getters and setters allow you to get and set object properties via methods.</p>
<p>This example uses a lang property to get the value of the language property:</p>
<p id=”demo”></p>
<script>
// 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;
</script>
</body>
</html>
Output
JavaScript Getters and Setters
Getters and setters allow you to get and set object properties via methods.
This example uses a lang property to get the value of the language property:
en
JavaScript Setter (The set Keyword)
This example uses a lang property to set the value of the language property.
Example
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Getters and Setters</h2>
<p>Getters and setters allow you to get and set properties via methods.</p>
<p>This example uses a lang property to set the value of the language property.</p>
<p id=”demo”></p>
<script>
// Create an object:
const person = {
firstName: “John”,
lastName: “Doe”,
language: “NO”,
set lang(value) {
this.language = value;
}
};
// Set a property using set:
person.lang = “en”;
// Display data from the object:
document.getElementById(“demo”).innerHTML = person.language;
</script>
</body>
</html>
Output
JavaScript Getters and Setters
Getters and setters allow you to get and set properties via methods.
This example uses a lang property to set the value of the language property.
en
JavaScript Function or Getter?
What are the differences between these two examples?
Example
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Object Methods</h2>
<p>Object data can be accessed using property stored as a function.</p>
<p id=”demo”></p>
<script>
// Create an object:
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();
</script>
</body>
</html>
Output
JavaScript Object Methods
Object data can be accessed using property stored as a function.
John Doe
Data Quality
JavaScript can secure better data quality when using getters and setters.
The lang property, in this example, returns the value of the language property in the upper case:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Getters and Setters</h2>
<p>Getters and setters allow you to get and set properties via methods.</p>
<p id=”demo”></p>
<script>
// Create an object:
const 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;
</script>
</body>
</html>
Output
JavaScript Getters and Setters
Getters and setters allow you to get and set properties via methods.
EN
Why Using Getters and Setters?
- It provides a simpler syntax.
- It enables equal syntax for properties and methods.
- It can secure better data quality.
- It is useful for doing things behind the scenes.
Object.defineProperty()
The Object.defineProperty() method adds Getters and Setters:
A Counter Example
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Getters and Setters</h2>
<p>Perfect for creating counters:</p>
<p id=”demo”></p>
<script>
// Define an object
const obj = {counter : 0};
// 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;}
});
// Play with counter:
obj.reset;
obj.add = 5;
obj.subtract = 1;
obj.increment;
obj.decrement;
document.getElementById(“demo”).innerHTML = obj.counter;
</script>
</body>
</html>
Output
JavaScript Getters and Setters
Perfect for creating counters: