Understanding Getters and Setters in JavaScript

JavaScript is a versatile programming language that offers many powerful features for creating dynamic and interactive web applications. One of these features is the ability to define getters and setters for object properties. Getters and setters are functions that allow you to control the way that properties are accessed and modified, and they can be particularly useful in object-oriented programming.

getters and setters are special functions that allow you to control the way that object properties are accessed and modified. Getters are functions that are called when you try to access a property, and setters are functions that are called when you try to modify a property. They are often used in object-oriented programming to encapsulate and control the behavior of object properties.

The syntax for defining a getter or a setter is as follows:

const obj = {
  get propertyName() {
    // code to get the property value
  },
  set propertyName(value) {
    // code to set the property value
  }
};

The get keyword is used to define a getter, and the set keyword is used to define a setter. The name of the property being accessed or modified is used as the function name (in this example, propertyName). The getter function should return the value of the property, while the setter function should update the value of the property based on the argument passed to it.

Let's look at a couple of examples of how getters and setters work in JavaScript.

Example 1: Getters and Setters with Object Literals

In this example, we use an object literal to define a person object that has firstName and lastName properties. We then define a getter and a setter for a fullName property, which concatenates the first and last names together.

const person = {
firstName: 'Tutor',
lastName: 'Joes',
  get fullName() {
    return this.firstName + ' ' + this.lastName;
  },
  set fullName(name) {
    const parts = name.split(' ');
this.firstName = parts[0];
this.lastName = parts[1];
  }
};

console.log(person.fullName); // output: "Tutor Joes"
person.fullName = "Sam Sundar";
console.log(person.firstName); // output: "Sam"
console.log(person.lastName); // output: "Sundar"
console.log(person.fullName); // output: "Sam Sundar"

In this example, the get fullName() function is called when we access the fullName property, and the set fullName() function is called when we set the fullName property. This allows us to encapsulate the behavior of the fullName property and ensure that it is always formatted correctly.

Example 2: Getters and Setters with Classes

In this example, we use a class definition to define a Circle class that has a radius property and two getters (diameter and area) and one setter (diameter).

class Circle {
  constructor(radius) {
this.radius = radius;
  }

  get diameter() {
    return this.radius * 2;
  }

  set diameter(diameter) {
this.radius = diameter / 2;
  }

  get area() {
    return Math.PI * this.radius * this.radius;
  }
}

const myCircle = new Circle(5);
console.log(myCircle.radius); // output: 5
console.log(myCircle.diameter); // output: 10
console.log(myCircle.area); // output: 78.53981633974483

myCircle.diameter = 12;
console.log(myCircle.radius); // output: 6
console.log(myCircle.diameter); // output: 12
console.log(myCircle.area); // output: 113.09733552923254

In this example, the diameter setter allows us to set the radius property based on a given diameter value, while the diameter getter and the area getter allow us to retrieve information about the circle. This allows us to abstract away the details of how the circle is represented and focus on its properties and behavior.

In conclusion, getters and setters are a powerful tool in JavaScript that allow us to encapsulate and control the behavior of object properties. By using getters and setters, we can create more robust and maintainable code that is easier to work with and understand.