JavaScript Object Getter and Setter

#javascript #getter #setter #object

JavaScript object may have multiple properties and methods to deal with static data along with dynamic calculation. There are many ways to achieve these functionality and we are going to explore some of them here.

Using Object Literals (Old School way and most popular)

const student ={
  _name:'Ram',
  getName:function(){
    return this._name;
  },
  setName:function(nameParam){
    this._name = nameParam
  }
}

const name = student.getName();
console.log(name); // should return =>  Ram

Now lets set the name and get later with the same example.

const student ={
  _name:'shrijan',
  getName:function(){
    return this._name;
  },
  setName:function(nameParam){
    this._name = nameParam
  }
}

student.setName('Shyam');

const name = student.getName();
console.log(name); // should return => Shyam

There is no doubt that we can simply can get with student._name as well, we are considering that we are not exposing properties publicly. Please help me finding use cases below in comment whether we don't have to expose properties like in above.

Using `get` and `set` syntax

According to MDN get and set syntax binds an object property to a function that will be called when that property is looked up.

Sometimes we want to access the property with dynamically calculated value without implementing explicit method calls. Where getter and setter comes in play.

Let us take the same example of student


const student = {

  _firstName : 'Ram',
  _lastName : 'Shrestha',

  get fullName(){
    return `${this._firstName} ${this._lastName}`;
  }
}

console.log(student.fullName); // should return 'Ram Shrestha'

Whats new here ?

get keyword is used to define or bind fullName
accessing fullName as property not as the function.

You might be thinking what if we want to set the first name and last name with providing full name. Yes, your guess is correct we will be using set keyword to set property. Lets expand the example :

const student = {

  _firstName : 'Ram',
  _lastName : 'Shrestha',

  get fullName(){
    return `${this._firstName} ${this._lastName}`;
  },

  set fullName(fullName){
    const splittedNames = fullName.split(' ');
    const [_first, _second] = splittedNames;
    this._firstName = _first;
    this._lastName = _second;
  }
}

console.log(student.fullName); // should return 'Ram Shrestha'

student.fullName = "Shyam Sundar";

console.log(student.fullName); // should return 'Shyam Sundar'

Again What's new here ?

set keyword to define setter
accessing with fullName property to set data not function.

Wait, why are we doing so much calculating for simply setting up first name and last name why not fullName(firstName, lastName) at a same time? I was thinking same but

Remember: get can not have any parameter and set can have only one.

Using Object.defineProtpery method

According to MDN : The static method Object.defineProperty() defines a new property directly on an object, or modifies an existing property on an object, and returns the object.

lets try to achieve same functionality with following example.

const student = {
  _firstName: "Ram",
  _lastName: "Shrestha",
};
Object.defineProperty(student, "fullName", {
  get: function () {
    return `${this._firstName} ${this._lastName}`;
  },
  set: function (fullName) {
    const splittedNames = fullName.split(" ");
    const [_first, _second] = splittedNames;
    this._firstName = _first;
    this._lastName = _second;
  },
});

console.log(student.fullName); // should return 'Ram Shrestha'

student.fullName = "Shyam Sundar";

console.log(student.fullName); // should return 'Shyam Shrestha'