getter, setter

객체의 property(속성)는 두 종류로 나뉜다.

첫번째는 data property 이다. 지금까지 사용한 모든 프로퍼티는 데이터 프로퍼티라고 볼 수 있다.
두번째는 accessor property(접근자 속성) 이다.
접근자 속성의 본질은 함수인데, 값을 획득(get)하고 설정(set)라는 역할을 담당한다.

let obj = {
  get propName() {
    // getter, obj.propName을 실행할 때 실행되는 코드
  },

  set propName(value) {
    // setter, obj.propName = value를 실행할 때 실행되는 코드
  }
};

getter 메서드는 obj.propName을 사용해 프로퍼티를 읽으려고 할 때 실행되고, setter 메서드는 obj.propName = value으로 프로퍼티에 값을 할당하려 할 때 실행된다.

여기에 fullName이라는 값을 얻을 수 있는 접근자 프로퍼티를 구현한다면,

let user = {
  name: "John",
  surname: "Smith",

  get fullName() {
    return `${this.name} ${this.surname}`;
  }
};

alert(user.fullName); // John Smith

하지만 외부 스코프에서는 함수가 아닌 일반적인 속성처럼 보인다. 접근자 프로퍼티는 이런 아이디어에서 출발했다.

즉, 접근자 프로퍼티를 사용하면 함수처럼 호출 하지 않고, 일반 프로퍼티에서 값에 접근하는 것처럼 평범하게 user.fullName을 사용해 프로퍼티 값을 얻을 수 있다. 나머지 작업은 getter 메서드가 뒷단에서 처리해준다.

그러나, 위 예시의 fullName은 getter 메서드만 가지고 있기 때문에 user.fullName= 을 사용해 값을 할당하려고 하면 에러가 발생한다.

let user = {
  name: "John",
  surname: "Smith",

  get fullName() {
    return `${this.name} ${this.surname}`;
  },

  set fullName(value) {
    [this.name, this.surname] = value.split(" ");
  }
};

// 주어진 값을 사용해 set fullName이 실행됩니다.
user.fullName = "Alice Cooper";

alert(user.name); // Alice
alert(user.surname); // Cooper

다음과 같이 setter 메소드를 추가함으로서 에러를 없앨 수 있다.

이렇게 getter와 setter 메서드를 구현하면 객체엔 fullName이라는 '가상’의 프로퍼티가 생기게 된다. 가상의 프로퍼티는 읽고 쓸 순 있지만 실제로는 존재하지 않는다.




참고자료