ES6(ECMAScript 2015) – 클래스 – 2 – getter와 setter

ES6(ECMAScript 2015) – 클래스 – 2 – getter와 setter

1. 소개

클래스의 두 번째 기능으로 getter와 setter를 알아보겠습니다. getter와 setter는 클래스의 속성 값을 가져오거나 설정할 때 사용되는 특별한 메서드입니다. 이를 통해 속성에 접근하고 값을 변경하는 과정을 컨트롤할 수 있습니다.

2. getter와 setter란?

getter와 setter는 일종의 중개자 역할을 합니다. 속성에 접근하거나 값을 변경하기 전에 getter와 setter를 거치게 되면 필요한 추가 동작을 수행할 수 있습니다. 이를 통해 속성에 대한 유효성 검사, 데이터의 가공 또는 보호 등을 할 수 있습니다.

3. getter와 setter 사용 예시

클래스 내부에서 getter와 setter를 정의하는 방법과 사용하는 예시를 살펴보겠습니다.

class Person {
  constructor(name) {
    this._name = name;
  }

  get name() {
    return this._name;
  }

  set name(value) {
    if (value.length < 2) {
      console.log("이름은 최소 2글자 이상이어야 합니다.");
      return;
    }
    this._name = value;
  }
}

const person = new Person("John");
console.log(person.name);  // 출력: John

person.name = "A";  // 이름은 최소 2글자 이상이어야 합니다.
person.name = "Alice";
console.log(person.name);  // 출력: Alice

위의 예시에서 Person 클래스의 속성 _name은 getter와 setter를 사용하여 접근하고 설정할 수 있습니다. get name()은 _name 속성 값을 반환하고, set name(value)은 _name 속성을 설정하기 전에 조건을 확인한 후 값을 변경합니다.

4. getter와 setter의 활용

getter와 setter를 사용하여 속성에 접근할 때 추가적인 동작을 수행할 수 있습니다. 이를 통해 속성에 대한 유효성 검사, 값의 가공, 보호 등 다양한 기능을 구현할 수 있습니다.

가상의 예시: 온도 변환기 클래스

가상의 TemperatureConverter 클래스를 통해 getter와 setter의 활용을 이해해보겠습니다. 이 클래스는 섭씨와 화씨를 변환하는 기능을 제공합니다.

class TemperatureConverter {
  constructor(celsius) {
    this._celsius = celsius;
  }

  get celsius() {
    return this._celsius;
  }

  set celsius(value) {
    if (value < -273.15) {
      console.log("올바른 온도 범위가 아닙니다.");
      return;
    }
    this._celsius = value;
  }

  get fahrenheit() {
    return this._celsius * 9 / 5 + 32;
  }

  set fahrenheit(value) {
    if (value < -459.67) {
      console.log("올바른 온도 범위가 아닙니다.");
      return;
    }
    this._celsius = (value - 32) * 5 / 9;
  }
}

const converter = new TemperatureConverter(25);
console.log(converter.celsius);     // 출력: 25
console.log(converter.fahrenheit);  // 출력: 77

converter.celsius = -300;     // 올바른 온도 범위가 아닙니다.
converter.fahrenheit = -500;  // 올바른 온도 범위가 아닙니다.
console.log(converter.celsius);     // 출력: 25
console.log(converter.fahrenheit);  // 출력: 77

위의 예시에서 TemperatureConverter 클래스는 celsius와 fahrenheit 속성을 가지고 있습니다. get celsius()와 set celsius(value)는 섭씨 값을 읽고 설정하며, get fahrenheit()와 set fahrenheit(value)는 화씨 값을 읽고 설정합니다. setter에서는 입력된 값에 대한 유효성 검사를 수행하여 올바른 범위의 값을 설정하도록 합니다.

5. 주의해야 할 점

• getter와 setter는 속성에 접근하는 과정에서 추가적인 로직을 실행하기 때문에 성능에 영향을 줄 수 있습니다. 따라서, 단순히 값을 가져오거나 설정하는 용도로 사용하는 경우에는 getter와 setter를 사용하지 않는 것이 좋습니다.
• getter와 setter는 속성명과 메서드명이 일치해야 합니다. 즉, get 속성명()과 set 속성명(value)의 형식을 지켜야 합니다.
• 속성명 앞에 언더스코어 _를 사용하여 private 속성임을 나타낼 수 있지만, 완전한 정보 은닉은 아니므로 주의가 필요합니다. 실제로 private 속성을 지원하는 프라이빗 필드(private fields) 문법이 ES2022에서 도입되었으니, 필요한 경우 해당 문법을 사용하는 것이 좋습니다.

이상으로 getter와 setter에 대한 설명이었습니다. getter와 setter는 클래스의 속성에 접근하고 값을 변경할 때 유용하게 사용될 수 있으며, 다양한 활용을 통해 유연하고 안전한 코드를 작성할 수 있습니다.