Getters and setters in JavaScript classes?

Javascript Web Development Front End Technology

In this article we are going to discuss about the getters and setters in JavaScript classes with suitable examples in JavaScript.

In JavaScript, getters and setters are the methods that are used to get or set the value for properties. When using getters and setters, you can ensure higher data quality. Getters and Setters provide a simplified syntax for an object's properties and methods. Getters and Setters are used for Data Encapsulation. To add getters and setters in the class, use the get and set keywords.

To get a better understanding let’s look into the syntax and usage of both getters and setters method in JavaScript.

Using Getters method

Getter is a method that is used to retrieve a value of a property. The syntax for the getter method is −

get methodName(){…}

The return type for this method is a value which can be any primitive data type.

Example 1

This is an example program defining the usage of getter method in JavaScript.

<html>
<head>
   <title>Getters in JavaScript</title>
</head>
<body style="text-align: center;">
   <p>Getters in JavaScript</p>
   <p id="result"></p>
   <script>
      const student = {
         student1 : ['Ram', 'Computer Science', 022],
         get details() {
            return this.student1[0]+' has registered for the course '+this.student1[1]+' with the roll no. '+this.student1[this.student1.length-1];
         }
      }
      document.getElementById("result").innerHTML = student.details;
   </script>
</body>
</html>

On executing the above code, the below output is generated.

Example 2

This is an example program defining use of getter method and deleting a particular getter method.

<html>
<head>
   <title>Getters in JavaScript</title>
</head>
<body style="text-align: center;">
   <p>Getters in JavaScript</p>
   <p id="result"></p>
   <p id="result2"></p>
   <script>
      class Maths {
         static get PIvalue() {
            return 3.14;
         }
      }
      Maths.PIvalue = 3.14159265; // Cannot update static method values
      document.getElementById("result").innerHTML = Maths.PIvalue;
      delete Maths.PIvalue; // Deleting a getter method object.
      document.getElementById("result2").innerHTML = Maths.PIvalue;
   </script>
</body>
</html>

On executing the above code, the below output is generated.

Using Setters method

Setter is a method that is used to set the value for a property. The syntax to represent a setter method is −

set MethodName(value){…}

Tha parameter value can be of any primitive data type.

Example 1

This is an example program defining the use of setter methods in JavaScript.

<html>
<head>
   <title>Setters in JavaScript</title>
</head>
<body style="text-align: center;">
   <p>Setters in JavaScript</p>
   <p id="text1"></p>
   <script type="text/javascript">
      var Employee = {
         Name: "Rahul",
         desg : 'Software Engineer',
         Company : "Google",
         set setName(Name) {
            this.Name = Name;
         },
         set setDesignation(desg) {
            this.Designation = desg;
         },
         get getname() {
            return this.Name;
         },
         get getDesignation() {
            return this.desg;
         }
      };
      Employee.setName = 'Mohan';
      Employee.setDesignation = 'Web Developer';
      document.getElementById("text1").innerHTML ='The Employee details are as follows : ' + '<br/>' +'Employee Name : ' + Employee.getname + '<br/>' + 'Designation : ' + Employee.getDesignation; + '<br/>';
   </script>
</body>
</html>

On executing the above code, the below output is generated.

Example 2

This is an example program for the usage of setter method and to delete a particular setter method.

<html>
<head>
   <title>Setters in JavaScript</title>
</head>
<body style="text-align: center;">
   <p>Setters in JavaScript</p>
   <p>Deleting a setter method</p>
   <p id="text1"></p>
   <script type="text/javascript">
      var Employee = {
         set setName(Name) {
            this.Name = Name;
         },
         set setDesignation(desg) {
            this.Designation = desg;
         },
         get getname() {
            return this.Name;
         },
         get getDesignation() {
            return this.desg;
         }
      };
      Employee.setName = 'Mohan';
      Employee.setDesignation = 'Web Developer';
      delete Employee.setDesignation; //Deleting a setter method.
      document.getElementById("text1").innerHTML ='The Employee details are as follows : ' + '<br/>' +'Employee Name : ' + Employee.getname + '<br/>' + 'Designation : ' + Employee.getDesignation; + '<br/>';
   </script>
</body>
</html>

On executing the above code, the below output is generated.