자바스크립트 객체 프로퍼티 이해하기 2. [프로퍼티 정의]

 

 

프로퍼티 정의란, 프로퍼티 어트리뷰트를 정의하는 것을 의미한다.

 

혹시 프로퍼티 어트리뷰트가 무엇인지 모른다면 아래 포스팅을 통해 먼저 내부 슬롯/내부 메서드에 대해 훑어 보시길 바란다! 

자바스크립트 객체 프로퍼티 이해하기 1. [내부 슬롯 & 내부 메서드 ]

 

프로퍼티를 정의하는 상황에는 아래 두 가지 상황이 존재한다. 

 

   1. 새로운 프로퍼티를 추가하면서 프로퍼티 어트리뷰트를 명시적으로 정의

   2. 기존 프로퍼티의 프로퍼티 어트리뷰트를 재정의 

 

위의 상황에서 프로퍼티를 정의 또는 재정의함을 통해서, 프로퍼티 값을 갱신 가능하도록할 것인지([[Writable]]), 열거 가능([[Enumerable]])하도록 할 것인지, 재정의 가능하도록 할 것인지([[Configurable]]) 등을 명확하게 정의할 수 있게 되는 것이다. 

 

 

프로퍼티 정의 방법

프로퍼티 정의를 위해서는 Object.defineProperty 메서드를 사용한다.

프로퍼티에 대한 정의이기 때문에 이 메서드에는 객체의 참조와 함께 어떤 프로퍼티에 대한 정의인지 명시하기 위해 프로퍼티 키를 함께 전달하고, 해당 프로퍼티에 프로퍼티 어트리뷰터를 정의하기 위해 프로퍼티 디스크립터 객체를 전달한다. 

 

아래 예시 코드는 iphone12 라는 객체에 'color' 라는 키를 가진 프로퍼티를 새로 추가하면서 프로퍼티를 정의하고 있다. 

const iphone12 = {};

Object.defineProperty(
	iphone12,
        'color',
        {
            value: 'purple',
            writable: true, 
            enumerable: true, 
            configurable: true
        }
    );

 

위와 같이 프로퍼티를 정의한 후에 Object.getOwnPropertyDescriptor메서드를 통해 프로퍼티 디스크립터 객체를 확인해보면 아래와 같이 프로퍼티 어트리뷰트 값들이 잘 정의되어있는 것을 알 수 있다. 

 

 

위와 같이 Object.defineProperty 를 통해 프로퍼티를 정의할 때, 프로퍼티 디스크립터에서 일부 프로퍼티를 빠뜨리는 경우 (e.g. {size: 10.5} 처럼 value 만 전달하고 writable 등 다른 객체는 빠뜨리는 경우) 나머지 값들은 기본값으로 undefined, false 를 가진다. 

const iphone12 = {};

Object.defineProperty(
	iphone12,
        'color',
        {
            value: 'purple',  //value 이외의 다른 프로터티는 정의하지 않음
        }
    );

 

위와 같이 정의한 객체 iphone의 프로퍼티 color의 프로퍼티 디스크립터를 확인해보면 value 이외 모든 프로퍼티 값은 false 이다.

 

 

위와 같이 enumerable, configurable, writable 값이 false 인 경우 객체에는 어떤 제약이 생기는지를 살펴보자.

 

[[enumerable]]이 false 인 경우

[[enumerable]] 값이 false 인 프로퍼티는 열거 할 수 없다. 예를 들어 Object.keys 와 같이 객체의 프로퍼티들을 열거하는 메서드를 사용했을 때, [[enumerable]] 값이 false 인 프로퍼티는 제외된다. 

const iphone12 = {};

Object.defineProperty(iphone12, 'color',{value: 'purple'});
Object.defineProperty(iphone12,'storage',{ value: '256', enumerable: true});

iphone12 객체에서 color 프로퍼티는 enumerable: false, storage 프로퍼티는 enumerable: true 값을 가지고 있다.

 

Object.keys로 iphone12 객체의 key를 열거해보면 enumerable: false 값인 color 프로퍼티 키는 나타나지 않는 것을 알 수 있다. 

 

[[writab

le]]이 false 인 경우

[[Configurable]]이 false 인 경우

[[Configurable]] 값이 false 인 프로퍼티는 삭제할 수 없다. 삭제를 시도하더라도 에러가 발생하지 않고 무시된다. 

[[configurable]]이 false 인 경우

[[Writable]]이 false 인 경우

[[Writable]] 값이 false 인 프로퍼티의 [[Value]]값은 변경할 수 없다. 변경을 시도하더라도 에러가 발생하지 않지만 변경은 무시된다. 

 

 

끝.