JavaScript Object Accessors

There are two keywords which define the accessors functions: a getter and setter for the fullName property. When the property is accessed, the return value from the getter is used. When a value is set, the setter is called and passed the value that was set.

The getter and setter keyword 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.

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:

Why Using Getters and Setters?

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

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>