Javascript-Object Accessors:
There are two keywords that define the accessor’s functions: getter and setter. The getter and setter keywords are used for accessing the objects. The getter return value is used when a property is being accessed and the setter takes an argument and sets the property value inside the object to that passed argument.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.sample {
font-size: 18px;
font-weight: 500;
color: red;
}
</style>
</head>
<body>
<h1>JavaScript Object Accessors</h1>
Enter a number <input class="num" type="number" />
<div class="sample"></div>
<button class="Btn">CLICK HERE</button>
<h3>
Click on the above button to set the age value and display it
</h3>
<script>
let sampleEle = document.querySelector(".sample");
let testObj = {
age: "",
set AGE(val) {
this.age = val;
},
get AGE() {
return this.age;
},
};
document.querySelector(".Btn").addEventListener("click", () => {
let number = document.querySelector(".num").value;
testObj.AGE = number;
sampleEle.innerHTML = "AGE = " + testObj.AGE;
});
</script>
</body>
</html>
OUTPUT:
JavaScript Getter (The get Keyword):
Use of lang() property to get the value of language property.
Example:
<!DOCTYPE html>
<html>
<head>
<title>
JavaScript i2tutorials
</title>
</head>
<body style="text-align:center;">
<div style="background-color: yellow;">
<h1>
Welcome to I2tutorials!.
</h1>
<h2>
JavaScript I2tutorials
</h2>
<p id="i2"></p>
</div>
<script>
// Create an object:
var person = {
name: "i2tutorials",
get lang() {
return this.name;
}
};
// Display data from the object using a getter
document.getElementById("i2").innerHTML
= person.name;
</script>
</body>
</html>
OUTPUT:
JavaScript Setter (The set Keyword):
It provides the Use of lang() property to set the value of javascript 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="set"></p>
<script>
// Create an object:
var person = {
firstName: "John",
lastName : "Doe",
language : "NO",
set lang(value) {
this.language = value;
}
};
// Set a property using set:
person.lang = "Telugu";
// Display data from the object:
document.getElementById("set").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.
Telugu
Reasons to use Getters and Setters:
- The syntax for properties and methods are equal.
- Used for doing things behind-the-scenes.
- They can secure better data quality.
- The syntax of this is simpler.
Data Quality:
Getters and Setters are providing to securing better data quality.
Example:
<!DOCTYPE html>
<html>
<head>
<title>
Data Quality
</title>
</head>
<body style="text-align:center;">
<div style="background-color: yellow;">
<h1>I2tutorials !!</h1>
<b>
Data Quality : lower case
value is returned
</b>
<p id="i2"></p>
</div>
<script>
var person = {
language : "i2tutorials",
get lang() {
return this.language.toLowerCase();
}
};
// Display data from the object using a getter
document.getElementById("i2").innerHTML
= person.lang;
</script>
</body>
</html>
OUTPUT:
