Using Getters and Setters in JavaScript

In JavaScript, getters and setters are used to define object properties that have custom logic for getting and setting their values. They allow you to define the behavior of a property while also keeping the interface for accessing the property the same.

Creating a Getter in TypeScript

In TypeScript, you can create a getter using the get keyword followed by the name of the property. Here is an example:

class MyClass {
  private _myProperty: string = 'default value';

  get myProperty(): string {
    return this._myProperty;
  }
}

const myObject = new MyClass();

console.log(myObject.myProperty); // Output: 'default value'

In this example, myProperty is a getter that returns the value of _myProperty, which is a private property of the MyClass class. When the myProperty property is accessed on an instance of MyClass, the getter is called and the value of _myProperty is returned.

Creating a Setter in TypeScript

In TypeScript, you can create a setter using the set keyword followed by the name of the property. Here is an example:

class MyClass {
  private _myProperty: string = 'default value';

  get myProperty(): string {
    return this._myProperty;
  }

  set myProperty(value: string) {
    this._myProperty = value;
  }
}

const myObject = new MyClass();

myObject.myProperty = 'new value';
console.log(myObject.myProperty); // Output: 'new value'

In this example, myProperty is both a getter and a setter. When the property is set on an instance of MyClass, the setter is called with the new value. The setter then updates the value of _myProperty with the new value.

Common Use Cases for Getters and Setters

One common use case for getters and setters is to validate or transform property values. For example, you might use a setter to ensure that a property value is always in a certain range:

class MyClass {
  private _myProperty: number = 0;

  get myProperty(): number {
    return this._myProperty;
  }

  set myProperty(value: number) {
    if (value < 0) {
      this._myProperty = 0;
    } else if (value > 100) {
      this._myProperty = 100;
    } else {
      this._myProperty = value;
    }
  }
}

const myObject = new MyClass();

myObject.myProperty = -10;
console.log(myObject.myProperty); // Output: 0

myObject.myProperty = 200;
console.log(myObject.myProperty); // Output: 100

myObject.myProperty = 50;
console.log(myObject.myProperty); // Output: 50

In this example, the setter for myProperty ensures that the property value is always between 0 and 100. If a value outside of that range is set, the setter clamps the value to the nearest limit.

Another common use case for getters and setters is to compute or derive property values. For example, you might use a getter to compute the length of an array property:

class MyClass {
  private _myArray: number[] = [];

  get myArrayLength(): number {
    return this._myArray.length;
  }

  addValueToMyArray(value: number) {
    this._myArray.push(value);
  }
}

const myObject = new MyClass();

myObject.addValueToMyArray(1);
myObject.addValueToMyArray(2);
myObject.addValueToMyArray(3);

console.log(myObject.myArrayLength) // Output: 3