How to add getters and setters to an object in JavaScript?

'getter' is a method that is used to get the value of a property.

Syntax

{get prop() { ... } }

{get [expression]() { ... } }

'setter' is a method used to set the value of a property.

Syntax

{set prop(val) { . . . }}

{set [expression](val) { . . . }}

When to use setters and getters?

'setters' and 'getters' are mainly used to get the computed values based on the existing properties of an object and set the existing properties of an object using given value.

HelloWorld.js

function print_employee_info(emp){
  console.log("firstName : " + emp.firstName);
  console.log("lastName : " + emp.lastName);
  console.log("fullName : " + emp.fullName);
}

var employee = {
  firstName : "krishna",
  lastName : "Majety",
  
  /*Full name is computed by combining firstName and lastName*/
  get fullName(){
    return this.firstName + "," + this.lastName;
  },
  
  /*firstName and lastName are set based on given name*/
  set fullName(name){
    var names = name.toString().split(",");
    this.firstName = names[0];
    this.lastName = names[1];
  }
}

print_employee_info(employee);

console.log("Setting employee full name to 'Menon,HariKrishnan'");
employee.fullName = "Menon,HariKrishnan";

print_employee_info(employee);

Output

firstName : krishna

lastName : Majety

fullName : krishna,Majety

Setting employee full name to 'Menon,HariKrishnan'

firstName : Menon

lastName : HariKrishnan

fullName : Menon,HariKrishnan

You can rewrite the above script using constructor function like below.

HelloWorld.js

function print_employee_info(emp){
  console.log("firstName : " + emp.firstName);
  console.log("lastName : " + emp.lastName);
  console.log("fullName : " + emp.fullName);
}

function Employee(firstName, lastName){
  this.firstName = firstName;
  this.lastName = lastName;
}

Employee.prototype = {
  /*Full name is computed by combining firstName and lastName*/
  get fullName(){
    return this.firstName + "," + this.lastName;
  },
  
  /*firstName and lastName are set based on given name*/
  set fullName(name){
    var names = name.toString().split(",");
    this.firstName = names[0];
    this.lastName = names[1];
  }  
}

var employee = new Employee("Krishna", "Majety");

print_employee_info(employee);

console.log("Setting employee full name to 'Menon,HariKrishnan'");
employee.fullName = "Menon,HariKrishnan";

print_employee_info(employee);

a.   Getters and setters are used for defining computed properties. In the above example, I used getter to get the fullName based on firstName and lastName properties of employee. I used setter to set the firstName and lastName properties of the employee.

b.   Getter methods do not expect a parameter.

c.   Setter methods expect exactly one parameter

d.   Getters and setters can also be added to an object at any time after creation using the Object.defineProperties method. For example, below snippet adds fullName getter and setter methods for the employee object.

Object.defineProperties(employee, {

    'name': { get: function() { return this.firstName + "," + this.lastName; } },

 

    'fullName': { set: function(name) {

        var names = name.toString().split(",");

        this.firstName = names[0];

        this.lastName = names[1];

      }

    }

});

HelloWorld.js

function print_employee_info(emp){
  console.log("firstName : " + emp.firstName);
  console.log("lastName : " + emp.lastName);
  console.log("fullName : " + emp.name);
}

function Employee(firstName, lastName){
  this.firstName = firstName;
  this.lastName = lastName;
}

var employee = new Employee("Krishna", "Majety");

Object.defineProperties(employee, {
    'name': { get: function() { return this.firstName + "," + this.lastName; } },
  
    'fullName': { set: function(name) {
        var names = name.toString().split(",");
        this.firstName = names[0];
        this.lastName = names[1];
      }
    }
});

print_employee_info(employee);

console.log("Setting employee full name to 'Menon,HariKrishnan'");
employee.fullName = "Menon,HariKrishnan";

print_employee_info(employee);

Previous                                                 Next                                                 Home