동적인 계산이 필요하거나, 프로퍼티 값을 변경할 경우, 접근자 프로퍼티인 getter/setter를 사용한다.
this는 객체안에서 자기자신을 가리키기에 setter 메서드에서 사용된다.
접근자 프로퍼티는 프로퍼티의 값을 갱신할 때 유효성을 검증하거나, 조건에 따라 다른 값을 반환하는 작업을 할 때 많이 사용한다.
const obj = {
count : 0,
// count가 null이 아니고 0보다 큰 경우만 값을 갱신한다.
set count(count){
if(count != null && count > 0){
this.count = count;
}
}
}
// obj.count 에 3을 넣으면
// maximum exceed error 72page
// 어떻게 사용하는가?
// Object.defineProperty()를 사용해서 변경해주어야 하는가?
// obj.count = 3 이런식으로는 안되는가?
const obj = {
count : 0,
// count가 null이 아니고 0보다 큰 경우만 값을 갱신한다.
set count(count){
if(count != null && count > 0){
this.count = count;
}
}
}
Object.defineProperty(obj,'count', {
writable: true,
value: 3
})
console.log(obj.count);
이렇게 하니까 값이 3 나옴.
getter와 setter 똑똑하게 활용하기
getter와 setter를 ‘실제’ 프로퍼티 값을 감싸는 래퍼(wrapper)처럼 사용하면, 프로퍼티 값을 원하는 대로 통제할 수 있다.
아래 예시에선 name을 위한 setter를 만들어 user의 이름이 너무 짧아지는 걸 방지하고 있다. 실제 값은 별도의 프로퍼티 _name에 저장된다.
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 = ""; // 너무 짧은 이름을 할당하려 함
user의 이름은 _name에 저장되고, 프로퍼티에 접근하는 것은 getter와 setter를 통해 이뤄진다.
기술적으론 외부 코드에서 user._name을 사용해 이름에 바로 접근할 수 있다.
그러나 밑줄 "_" 로 시작하는 프로퍼티는 객체 내부에서만 활용하고,
외부에서는 건드리지 않는 것이 관습이다.
(인프런 "코딩인터뷰를 저격하는 JS 스나이퍼 양성학교" 강의 참고, 모던 자바스크립트 튜토리얼 참고)