Getter

In JavaScript, a getter is a method that allows you to retrieve the value of an object's property. Getters are often used to provide read-only access to an object's properties while keeping the properties themselves private and inaccessible from outside the object.

To create a getter in JavaScript, you use the get keyword followed by the name of the property you want to create the getter for, like this:

const obj = {
  get myProperty() {
    return 'This is the value of myProperty';
  }
};

console.log(obj.myProperty); // This is the value of myProperty

In the example above, we've created an object obj with a getter for the myProperty property. The getter simply returns a string, but you could use it to perform more complex operations, such as accessing other properties or performing calculations.

Note that the syntax for creating a getter is similar to that for creating a method, but with the get keyword instead of the function keyword. Also, when you call the getter, you don't need to use parentheses, since it behaves like a property and not a method.

Setter

In JavaScript, a setter is a method that allows you to set the value of an object's property. Setters are often used to provide controlled write access to an object's properties while keeping the properties themselves private and inaccessible from outside the object.

To create a setter in JavaScript, you use the set keyword followed by the name of the property you want to create the setter for, like this:

const obj = {
  _myProperty: '',
  set myProperty(value) {
    this._myProperty = value;
  }
};

obj.myProperty = 'This is the value of myProperty';

console.log(obj._myProperty); // This is the value of myProperty

In the example above, we've created an object obj with a setter for the myProperty property. The setter sets the value of a private property _myProperty to the value passed in as an argument. Note that the private property is named with an underscore convention to indicate that it should not be accessed directly from outside the object.

To call the setter, you simply assign a value to the property, as if it were a regular property of the object. The setter function is automatically called with the value you provided.

Note that the syntax for creating a setter is similar to that for creating a method or a getter, but with the set keyword instead of get or the function keyword.

Function vs Getters

Functions and getters are both ways to define behavior for accessing and manipulating properties in JavaScript, but they have different use cases and syntax.

The prime difference between the function and getters is that in the function call we are accessing the function whereas, in the getter call, we are accessing the property. Thus the getter syntax turns out simpler and more readable than the function.

Example

Accessing object attribute using the function:

//Creating Student object
const Student = {
   firstName   : "John",
   lastName    : "Doe",
   rollNo      : 10,

   //displaying name using function 
   displayName : function() {
       return this.firstName+" "+this.lastName;
   }
};

console.log(player.myFunc());

Output:

"John Doe"

Accessing object attribute using getter:

//Creating Student object
const Student = {
   firstName   : "John",
   lastName    : "Doe",
   age      : 10,

   //displaying name using function 
   get displayName : function() {
       return this.firstName+" "+this.lastName;
   }
};

console.log(player.myFunc);

Output:

"John Doe"

Explanation of the example:

In the above example, we have created an object Student with properties like firstName, lastName, and age. Now the 'displayName method' and 'displayName getter' are respectively used to access the name of the student. We can observe that the 'displayName method' is returning player.myFunc() which is a function whereas 'displayName getter' is returning player.myFunc which can be used as a property.

Summary

• Getter is a method that allows you to retrieve the value of an object's property

• Setter is a method that allows you to set the value of an object's property

• A function in JavaScript is a block of code that can take arguments and perform a specific task. It can be defined using the function keyword, and can be called by its name followed by parentheses. A function can return a value using the return keyword

I hope my article was helpful to you. 😉