프로퍼티 getter와 setter

객체의 프로퍼티는 두 종류로 나뉜다.

첫 번째 종류는 데이터 프로퍼티(data property) 이다. 지금까지 만들었던 모든 프로퍼티들.

두 번째는 접근자 프로퍼티(accessor property)이다. 본질은 함수인데, 이 함수는 값을 획득(get)하고 설정(set)하는 역할을 담당한다.

getter와 setter

접근자 프로퍼티는 'getter(획득자)'와 ‘setter(설정자)’ 메서드로 표현된다.

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

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

이는 함수이므로, 계산된 값을 제공하거나 계산을 통해 내부의 데이터를 변경할 때 사용할 수 있다.

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

접근자 프로퍼티 설명자

• get – 인수가 없는 함수로, 프로퍼티를 읽을 때 동작함
• set – 인수가 하나인 함수로, 프로퍼티에 값을 쓸 때 호출됨
• enumerable – 데이터 프로퍼티와 동일함
• configurable – 데이터 프로퍼티와 동일함

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

Object.defineProperty(user, 'fullName', {
  get() {
    return `${this.name} ${this.surname}`;
  },

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

alert(user.fullName); // John Smith

for(let key in user) alert(key); // name, surname

getter와 setter 똑똑하게 활용하기

getter와 setter를 ‘실제’ 프로퍼티 값을 감싸는 래퍼(wrapper)처럼 사용하면, 프로퍼티 값을 원하는 대로 통제할 수 있다. (실제로 캡슐화할 때 사용하는 개념이다. )

호환성을 위해 사용하기

접근자 프로퍼티는 언제 어느 때나 getter와 setter를 사용해 데이터 프로퍼티의 행동과 값을 원하는 대로 조정할 수 있게 해준다는 점에서 유용하다.