[JS] getter, setter를 알아보자

그 전에 Object.defineProperty를 알아보자

객체에 새로운 속성을 직접 정의하거나 이미 존재하는 속성을 수정해 객체를 반환한다.

 

해당 메서드를 사용해 객체 o에 속성 'a'를 정의하고 있다.

 

value: 속성 'a'의 값으로 37이 할당됐다.

writable: 속성 'a'의 값을 변경할 수 있도록 허용한다. true면 속성 값은 수정 가능하다.

enumerable: 속성 'a'가 열거 가능하도록 설정한다. true면 for...in 루프나 Object.keys() 등 메서드를 사용할 수 있다.

configurable: 속성 'a'의 구성을 변경할 수 있도록 허용한다.

 

아래와 같이 코드를 작성하면 console.log(o.a) 에서 37이 반환된다.

var o = {}; // 새로운 객체 생성

Object.defineProperty(o, 'a', {
  value: 37,
  writable: true,
  enumerable: true,
  configurable: true
});

---

getter

객체의 속성 값을 가져올 때 호출되는 함수

이 함수는 속성 이름 앞에 get 키워드와 함께 정의된다.

 

get 키워드를 붙여 getter로 선언된다.

getter로 선언된 함수를 자동호출하며, getter 함수에서 값을 반환해야 한다.

 

book.getPoint를 호출하면 getter 함수인 getPoint가 실행된다.

이 때 this, 즉 함수를 호출한 놈은 book 객체이기 때문에 book.point에 접근해 100이 반환된다.

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

console.log(book.getPoint) // 100

---

setter

객체의 속성 값을 설정할 때 호출되는 함수

이 함수는 속성에 값을 할당할 때 특정한 동작을 수행하거나 유효성 검사를 수행할 수 있다.

 

set 키워드를 붙여 setter로 선언된다.

setter로 선언된 함수를 자동호출하며, setter 함수에서 값을 설정해야 한다.

 

book.setPoint에서 파라미터 200이 전달되어 setter 함수가 실행된다.

마찬가지로 함수를 부른 것은 this = book이므로 book.point = 200으로 설정된다.

const book = {
	point: 100,
    set setPoint(param){
    	this.point = param;
    }
};

book.setPoint = 200;
console.log(book.point) // 200

 

변숫값을 함수 이름으로 사용할 수도 있다.

 

book[name]은 객체 book에서 name 속성에 접근한 것이며, 여기에 200을 할당한 것이다.

setter의 매개변수인 param이 200으로 설정되면서 setter가 실행되고, 호출한 this = book의 point가 200으로 설정된다.

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

book[name] = 200;
console.log(book.point); // 200

 

getter든 setter든 delete 연산자로 삭제할 수 있다.