[typescript] 프로퍼티 셋터/게터와 객체 분해 할당의 관계 이해하기

12 Dec 2023

typescript

이번에는 타입스크립트에서 프로퍼티 셋터와 게터를 사용하는 방법과 이와 관련된 객체 분해 할당에 대해 알아보겠습니다.

프로퍼티 셋터와 게터

프로퍼티 셋터와 게터는 클래스 내에서 멤버변수에 접근하는데 사용됩니다. 프로퍼티 셋터는 값을 할당할 때 호출되고, 게터는 값을 가져올 때 호출됩니다. 이를 통해 객체 내부의 속성을 제어할 수 있습니다.

다음은 프로퍼티 셋터와 게터를 사용한 예제입니다.

class Circle {
  private _radius: number = 0;

  get radius(): number {
    return this._radius;
  }

  set radius(value: number) {
    if (value < 0) {
      throw new Error('Radius should be greater than 0');
    }
    this._radius = value;
  }
}

const c = new Circle();
c.radius = 10; // 프로퍼티 셋터 호출
console.log(c.radius); // 프로퍼티 게터 호출

객체 분해 할당

객체 분해 할당은 객체의 프로퍼티를 해체하여 개별 변수로 할당하는 것을 말합니다. 이를 통해 간단히 객체의 속성을 추출하여 다룰 수 있습니다.

다음은 객체 분해 할당을 사용한 예제입니다.

const circle = { radius: 5, color: 'blue' };
const { radius, color } = circle; // 객체 분해 할당
console.log(radius); // 5
console.log(color); // blue

프로퍼티 셋터/게터와 객체 분해 할당의 활용

프로퍼티 셋터와 게터를 함께 사용하면 객체 분해 할당과 연계하여 데이터의 유효성을 검사하거나 가공할 수 있습니다. 예를 들어, 사용자가 반지름을 변경하면 해당 값에 대한 유효성을 프로퍼티 셋터에서 검사하고, 프로퍼티 게터를 통해 해당 값을 가져와 사용할 수 있습니다.

class Circle {
  private _radius: number = 0;

  get radius(): number {
    return this._radius;
  }

  set radius(value: number) {
    if (value < 0) {
      throw new Error('Radius should be greater than 0');
    }
    this._radius = value;
  }

  get area(): number {
    return Math.PI * this._radius ** 2;
  }
}

const c = new Circle();
c.radius = 10; // 프로퍼티 셋터 호출
console.log(c.area); // 프로퍼티 게터를 활용한 면적 계산

프로퍼티 셋터와 게터와 객체 분해 할당은 유연하게 객체를 다루고, 데이터의 유효성을 확인하며, 가독성을 높이는데 활용될 수 있습니다.

이상으로, 프로퍼티 셋터/게터와 객체 분해 할당에 대해 알아보았습니다. 해당 기능들을 효과적으로 활용하여 다양한 상황에서 유용하게 활용해보시기 바랍니다!