모던 자바스크립트 (객체 프로퍼티 설정) 5-2. 프로퍼티 getter와 setter

객체 프로퍼티의 종류

- 데이터 프로퍼티

: writable, enumerable 등의 현재까지 다뤘던 프로퍼티

 

- 접근자 프로퍼티

: 본질은 함수인 get과 set을 담당하는 프로퍼티

: 외부 코드에서는 일반적인 프로퍼티로 보임

 

 

 

 

 

getter와 setter

: 객체 리터럴 안에서 get과 set으로 표현

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

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

 

- getter 사용의 예시

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

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

alert(user.fullName); // John Smith

let user = {
  get fullName() {
    return `...`;
  }
};

user.fullName = "Test"; // Error (프로퍼티에 getter 메서드만 있어서 에러가 발생합니다.)

 

- setter 예시

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

 

 

 

 

 

접근자 프로퍼티 설명자

: 설명자 value와 writable이 없는 대신 get과 set이라는 함수를 가짐

 

- 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

// Error: Invalid property descriptor.
Object.defineProperty({}, 'prop', {
  get() {
    return 1
  },

  value: 2
});

: 프로퍼티는 접근자 프로퍼티나 데이터 프로퍼티 중 한 종류에만 속할 수 있음

 

 

 

 

 

 

getter와 setter의 활용 방법

let user = {
  get name() {
    return this._name;
  },

  set name(value) {
    if (value.length < 4) {
      alert("입력하신 값이 너무 짧습니다. 네 글자 이상으로 구성된 이름을 입력하세요.");
      return;
    }
    this._name = value;
  }
};

user.name = "Pete";
alert(user.name); // Pete

user.name = ""; // 너무 짧은 이름을 할당하려 함

 

 

 

 

호환성을 위한 활용

function User(name, birthday) {
  this.name = name;
  this.birthday = birthday;

  // age는 현재 날짜와 생일을 기준으로 계산됩니다.
  Object.defineProperty(this, "age", {
    get() {
      let todayYear = new Date().getFullYear();
      return todayYear - this.birthday.getFullYear();
    }
  });
}

let john = new User("John", new Date(1992, 6, 1));

alert( john.birthday ); // birthday를 사용할 수 있습니다.
alert( john.age );      // age 역시 사용할 수 있습니다.

 

 

 

 

 

Refference

프로퍼티 getter와 setter