https://ko.javascript.info/property-accessors
프로퍼티 getter 와 setter
객체의 프로퍼티는 두 종류로 나뉜다.
- 데이터 프로퍼티(data property)
: 지금까지 사용한 모든 프로퍼티는 데이터 프로퍼티이다. 데이터 프로퍼티 조작 장법에 대해선 모두 알고 있을 것이다. - 접근자 프로퍼티(accessor property)
: 새로운 종류의 프로퍼티. 접근자 프로퍼티의 본질은 함수인데, 이 함수는 값을 획득(get)하고 설정(set)하는 역할을 담당한다.
외부 코드에서는 함수가 아닌 일반적인 프로퍼티처럼 보인다.
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 – 데이터 프로퍼티와 동일함
생일 정보를 이용하여 나이 get 하기
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 역시 사용할 수 있습니다.
'웹공부 > JS' 카테고리의 다른 글
자바스크립트 - 일반 함수와 화살표 함수의 차이점 (0) | 2021.10.24 |
---|---|
자바스크립트 - 데이터 타입 확인하기 (0) | 2021.10.24 |
프로토타입 - 상속 (0) | 2021.10.13 |
객체 프로퍼티 설정 - 프로퍼티 플래그와 설명자 (0) | 2021.10.10 |
러닝 자바스크립트 - 표현식과 연산자 (0) | 2021.09.08 |