B13 : 접근자 프로퍼티 (Accessor Property)

목차

1. 접근자 프로퍼티란?

2. 프로퍼티 서술자 getter와 setter

3. Object.defineProperty()

4. 프로퍼티 서술자 (Property Descriptor)

---

1. 접근자 프로퍼티란?

앞서 봤던 일반적인 프로퍼티(데이터 프로퍼티)는 단순히 값을 저장하고 꺼내는 용도이다.

 

접근자 프로퍼티는 단순한 값이 아닌 함수(getter, setter)를 통해 정의된다.

• 값을 읽을 때(get) 특정 계산을 수행하고 반환하거나
• 값을 쓸 때(set) 특정 검증이나 로직을 실행할 수 있다.

즉, 프로퍼티 접근/할당을 함수 호출처럼 제어하는 방법이다.

---

2. 프로퍼티 서술자 getter와 setter

어떤 프로퍼티에 접근할 때마다 동적인 계산이 필요하거나, 프로퍼티 값이 변경될 때마다 별도의 처리 코드가 필요할 때 사용한다.

• getter : 접근자 프로퍼티의 값에 접근할 때 호출되며, getter 메서드의 반환 값이 접근 표현식의 결과값
• setter : 접근자 프로퍼티의 값을 변경할 때 호출

const obj = {
  myName: 'javascript',
    set name(name) {	// obj.name = "..." 할당 시 실행
      if (name !== null) {
        this.myName = name;	// name이 빈 문자열이 아니라면 이름으로 지정
      }
    },
    get name() {	// obj.name 호출 시 실행
      return this.myName;
    }
}

 

---

3. Object.defineProperty()

getter, setter는 객체 리터럴 뿐 아니라 정적 메서드 Object.defineProperty로도 정의할 수 있다.

이 메서드는 객체의 프로퍼티를 새로 정의하거나 기존 것을 수정할 때 사용한다.

const obj = {
  myName = 'javascript'
};

Object.defineProperty(obj, 'name', {
  set(value) {
    if(value !== null {
      this.myName = value;
    }
  },
  enumerable: true,	// for...in, Object.keys()에 보일지 여부
  configurable: true,	// 삭제나 재정의 가능 여부
});

• 첫 번째 인자 : 대상이 되는 객체 (정의/수정)
• 두 번째 인자 : 추가/갱신하려는 프로퍼티명
• 세 번째 인자 : 프로퍼티 서술자를 정의한 객체

---

4. 프로퍼티 서술자 (Property Descriptor)

Object.defineProperty로 정의했을 때는 프로퍼티에 대한 속성을 세밀하게 제어할 수 있다.

위에서 사용해본 getter, setter를 포함해서 아래의 것들이 더 있다.

키	설명	기본값
value	프로퍼티 값	undefined
writable	값 수정 가능 여부	false
enumerable	열거(for…in, Object.keys)에 포함 여부	false
configurable	삭제나 속성 재정의 가능 여부	false
get	getter 함수	undefined
set	setter 함수	undefined

 

 

 

 

 

참고

참고자료링크