프로퍼티(Property)

자바스크립트 엔진은 프로퍼티를 생성할 때 프로퍼티의 상태(value, writable, enumerable, configurable)를 나타내는

프로퍼티 어트리뷰트를 기본값으로 자동 정의한다.

Object.getOwnPropertyDescriptor 메서드를 사용해서 PropertyDescriptor 객체를 통해 간접적으로 확인할 수 있다. 

 

프로퍼티는 데이터 프로퍼티와 접근자 프로퍼티로 구분할 수 있다.

 

데이터 프로퍼티 (data property)

위에서 살펴보았던 value, writable, enumerable, configurable 프로퍼티 어트리뷰트가 데이터 프로퍼티에 속한다.

Object.getOwnPropertyDescriptor 메서드를 사용해서 PropertyDescriptor 객체를 살펴보면 아래와 같다.

const obj = { a:1 };
console.log(Object.getOwnPropertyDescriptor(obj, 'a'));
// { value: 1, writable: true, enumerable: true, configurable: true }

value

- 프로퍼티 키를 통해 프로퍼티 값에 접근하면 반환되는 값

writable

- 프로퍼티 값의 변경 가능 여부 (불리언 값)

enumerable

- 프로퍼티의 열거 가능 여부 (불리언 값)

configurable

- 프로퍼티 재정의 가능 여부 (불리언 값)

 

접근자 프로퍼티 (accessor property)

자체적으로는 값을 갖지 않고 다른 데이터 프로퍼티의 값을 읽거나 저장할 때 사용하는 접근자 함수로 구성된 프로퍼티

get

- 접근자 프로퍼티를 통해 데이터 프로퍼티의 값을 읽을 때 호출되는 접근자 함수.

- getter 함수가 호출되고 프로퍼티 값으로 반환.

set

- 접근자 프로퍼티를 통해 데이터 프로퍼티의 값을 저장할 때 호출되는 접근자 함수.

- setter 함수가 호출되고 프로퍼티 값으로 저장.

enumerable

- 데이터 프로퍼티의 enumerable과 동일

configurable

- 데이터 프로퍼티의 configurable 과 동일

const person = {
    personName: 'yang',
    // getter 함수
    get getName(){
    	return this.personName;
    },
    // setter 함수
    set setName(name){
    	this.personName = name;
    }
}

 

프로퍼티 정의 (define property)

새로운 프로퍼티를 추가하면서 프로퍼티 어트리뷰트를 명시적으로 정의하거나, 기존 프로퍼티의 프로퍼티 어트리뷰트를 재정의

Object.defineProperty 메서드를 사용해서 정의

const person = {};

Object.defineProperty(person, 'personName',{
    value: 'yang',
    writable: true,
    enumerable: true,
    configurable: true
});

 

객체 변경 방지

객체는 const로 선언해도 객체 내부 프로퍼티를 추가하거나 삭제하거나 수정할 수 있다.

객체의 변경을 방지하는 메소드들이 강도에 따라 다르게 제공된다.

구분	메서드	프로퍼티 추가	프로퍼티 삭제	프로퍼티 읽기	프로퍼티 쓰기	프로퍼티 어트리뷰트 재정의
객체 확장 금지	Object.preventExtensions	X	O	O	O	O
객체 밀봉	Object.seal	X	X	O	O	X
객체 동결	Object.freeze	X	X	O	X	X

 

 

 

 

[참고 자료]

모던 자바스크립트 딥 다이브 책