JavaScript Object Getter and Setter
Tags: javascript, getter, setter, object
Published: 2020-04-04 21:00:49

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)

```js
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.

```js
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 

```js

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 :

```js
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.

```js
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'

```

Thank you :)