티스토리 뷰

메서드 설명
get 인수가 없는 함수로, 프로퍼티를 읽을 때 동작함
set 인수가 하나인 함수로, 프로퍼티에 값을 쓸 때 호출됨

접근자 프로퍼티의 본질은 함수인데, 'getter(획득자)'와 ‘setter(설정자)’를 메서드로 설정한다. 

getter와 setter 메서드를 구현하면 객체엔 '가상’의 프로퍼티가 생긴다.

가상의 프로퍼티는 읽고 쓸 순 있지만 실제로는 존재하지 않는다.

let obj = {
  get propName(){
    //getter, obj.propName을 실핼할 때 실행되는 코드
  },
  set propName(value){
  	//setter, obj.propName = value를 실핼할 때 실행되는 코드
  }
};
  • getter: 프로퍼티를 읽으려고 할 때 실행
  • setter: 프로퍼티에 값을 할당하려 할 때 실행

[예제]

아래의 코드의 경우, fullName이 '가상'의 프로퍼티이다.

let user = {
  name : '존',
  surname : '스미스',
  get fullName(){
    return this.name + ' ' + this.surname;
  },
  set fullName(value){
    [this.name, this.surname] = value.split(' ');
  }
};

바깥 코드에선 접근자 프로퍼티를 일반 프로퍼티처럼 사용할 수 있다.

user.fullName = 'mill 블로그';
user.fullName //"mill 블로그"

//일반적인 메서드를 실행하는 것처럼 사용하면 에러가 난다.
user.fullName()


접근자 프로퍼티 설명자

아래와 같은 설명자를 갖는다.

  • get – 접근자 프로퍼티
  • set – 접근자 프로퍼티
  • enumerable – 데이터 프로퍼티(기능 동일)
  • configurable – 데이터 프로퍼티(기능 동일)

Q. 데이터 프로퍼티 설명자와 다른 점은?

접근자 프로퍼티 데이터 프로퍼티
get 메서드 value 플래그
set 메서드 writable 플래그
데이터 프로퍼티인 enumerable 플래그, configurable 플래그는 접근자와 데이터 공통으로 사용한다.

접근자 프로퍼티나 데이터 프로퍼티 중 한 종류만 프로퍼티에 속할수 있다는 점을 항상 유의하자!

*예를 들어 get과 value를 동시에 설정하면 에러가 발생한다.


[공부 좌표]

프로퍼티 getter과 setter

getter과 setter 활용하는 방법

 

[참고]

데이터 프로퍼티(data property) 플래그 - writable, enumerable, configurable

댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
«   2025/03   »
1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31
글 보관함