getter
getter로 선언된 함수를 자동으로 호출합니다. getter는 값을 반환하는 시맨틱을 가지고 있기에 getter 함수에서 값을 반환해야 합니다.
1.
ES5형태
⇒ book.title을 실행하면 title 프로퍼티에서 get속성의 존재를 체크합니다. 이때 프로퍼티가 있으면 get()함수를 호출합니다.
여기서 book.title.get()으로호출하면 에러가 발생합니다. 이는 ES5의 Descriptor를 참고하시면 됩니다.
var book = {};
Object.defineProperty(book, "title", {
get: function(){
return "책";
}
});
console.log(book.title);//책
JavaScript
복사
2. ES6형태
⇒get getPoint(){ }와 같이 getPoint() 앞에 get을 작성하면 getter로 선언됩니다. 그래서 getPoint()함수가 자동으로 호출됩니다.
•
ES6장점
◦
ES5처럼 프로퍼티의 속성 구조가 아닙니다.
◦
작성이 편리하며 다수의 getter사용도 가능합니다.
const book = {
point: 100,
get getPoint(){
return "포인트";
},
get getTitle(){
return "제목";
}
};
console.log(book.getPoint);//포인트
console.log(book.getTitle);//책
JavaScript
복사
const book = {
point: 100,
get getPoint(){
return this.point;
}
};
console.log(book.getPoint);
JavaScript
복사
setter
•
프로퍼티에 값을 할당하면 setter로 선언된 함수가 자동으로 호출되는데 이는 setter가 값을 설정하는 시맨틱을 가지고 있기에 setter함수에서 값을 설정해줘야 합니다.
1.
ES5형태
⇒ book.change = "자바스크립트"를 실행하면 change프로퍼티에서 set 속성의 존재 여부를 체크합니다. 있을 경우 set()함수를 호출하고 "자바스크립트"를 파라미터 값으로 넘겨줍니다.
var book = {title: "HTML"};
Object.defineProperty(book, "change", {
set: function(param){
this.title = param;
}
});
book.change = "자바스크립트";
console.log(book);//{title: 자바스크립트}
JavaScript
복사
2. ES6형태
⇒ setPoint()앞에 set을 작성하면 setter로 선언됩니다.
⇒ book.setPoint = 200;
setPoint에 값을 할당하면 setPoint()가 자동으로 호출되어 파라미터값으로 200을 넘겨줍니다.
const book = {
point: 100,
set setPoint(param){
this.point = param;
}
};
book.setPoint = 200;
console.log(book.point);//200
JavaScript
복사
3. 변수값을 함수 이름으로 사용
⇒ name 변수값인 "setPoint"가 함수이름으로 사용됩니다.
getter역시 같은 방법으로 사용이 가능합니다.
const name = "setPoint";
const book = {
point: 100,
set [name](param){
this.point = param;
}
};
book[name] = 200;
console.log(book.point);//200
JavaScript
복사
•
setter 삭제
⇒ delete 연산자로 setter를 삭제할 수 있습니다.
const name = "setPoint";
const book = {
point: 100,
set [name](param){
this.point = param;
}
};
delete book[name];
console.log(book[name]);//undefined
JavaScript
복사
