[자바스크립트 ES6+ 기본] 9. getter/setter

getter

• getter로 선언된 함수를 자동으로 호출

  • 값을 반환하는 시맨틱을 갖고 있으므로 getter 함수에서 값을 반환해야 함

• ES5 형태

/*
1. book.title을 실행하면 title 프로퍼티에서 get 속성의 존재를 체크
2. 있으면, get() 함수를 호출하며 "책"이 반환되어 출력됨
3. book.title.get()처럼 함수로 호출하면 에러 발생
4. ES5의 Descriptor를 참조
*/
var book = {};
Object.defineProperty(book, "title", {
  get: function(){
    return "책";
  }
});
log(book.title);

// 책

• ES6 형태

/*
1. get getPoint(){}처럼 getPoint() 앞에 get을 작성하면 getter로 선언됨
2. getPoint() 함수가 자동으로 호출됨
*/
const book = {
  point: 100,
  get getPoint(){
    return this.point;
  }
};
log(book.getPoint);

// 100

• ES6 장점
  • ES5처럼 프로퍼티의 속성 구조가 아님
  • 작성 편리
  • 다수의 getter 사용 가능

const book = {
  get getPoint(){
    return "포인트";
  },
  get getTitle(){
    return "제목";
  }
};
log(book.getPoint);
log(book.getTitle);

// 포인트
// 제목

setter

• 프로퍼티에 값을 할당하면

  • setter로 선언된 함수 자동 호출
  • 값을 설정하는 시맨틱을 갖고 있으므로 setter 함수에서 값을 설정해야 함

• ES5 형태

/*
1. book.change = "자바스크립트";를 실행하면 change 프로퍼티에서 set 속성의 존재 여부를 체크
2. 있으면, set() 함수를 호출
3. "자바스크립트"를 파라미터 값으로 넘겨 줌
*/
var book = {title: "HTML"};
Object.defineProperty(book, "change", {
  set: function(param){
    this.title = param;
  }
});
book.change = "자바스크립트";
log(book);

// {title: 자바스크립트}

• ES6 형태

/*
1. setPoint() 앞에 set을 작성하면 setter로 선언됨
2. book.setPoint = 200; => setPoint에 값을 할당하면 setPoint()가 자동으로 호출됨
3. 파라미터 값으로 200을 넘겨줌
*/
const book = {
  point: 100,
  set setPoint(param){
    this.point = param;
  }
};
book.setPoint = 200;
log(book.point);

// 200

• 변수값을 함수 이름으로 사용

/*
1. name 변수값인 "setPoint"가 함수 이름으로 사용됨
2. getter도 같은 방법으로 사용 가능
*/
const name = "setPoint";
const book = {
  point: 100,
  set [name](param){
    this.point = param;
  }
};
book[name] = 200;
log(book.point);

// 200

• setter 삭제

// delete 연산자로 setter 삭제
const name = "setPoint";
const book = {
  set [name](param){
    this.point = param;
  }
};
delete book[name];
debugger;
log(book[name]);

// undefined