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);//책

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);//책
    

const book = {
	point: 100,
	get getPoint(){
		return this.point;
	}
};
console.log(book.getPoint);

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: 자바스크립트}

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

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

• setter 삭제

  ⇒ delete 연산자로 setter를 삭제할 수 있습니다.

const name = "setPoint";
const book = {
	point: 100,
	set [name](param){
		this.point = param;
	}
};
delete book[name];
console.log(book[name]);//undefined