/    /  Javascript-Object Accessors:

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-Object Accessors

 

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-Object Accessors

 

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:

 

Javascript-Object Accessors