1. 프로퍼티의 종류
객체에서 잠깐 언급했지만, 객체 안에서 생성 되는 키와 값 한 쌍을 우리는 프로퍼티라고 정의합니다.
그리고 이러한 프로퍼티에도 두 종류가 있는데, 우리가 기본적으로 객체에서 생성해내는 프로퍼티들은 데이터 프로퍼티(data property)라고 부르고,
이러한 데이터 프로퍼티의 상태 정보를 나타내는 프로퍼티 어트리뷰트에 접근하여 수정 및 제어하는 접근자 프로퍼티(accessor property) 이렇게 두 가지 프로퍼티 종류가 존재합니다.
2. 프로퍼티 어트리뷰트란?
프로퍼티 어트리뷰트(Property Attribute)란 객체 내의 각 데이터 프로퍼티(속성)의 상태를 나타내는 메타 정보를 의미하며, 여기서 프로퍼티의 상태란 [값[[Value]], 값의 갱신 가능 여부[[Writable]], 열거 가능 여부[[Enumerable]], 재정의 가능 여부[[Configurable]]]를 말하며 이 어트리뷰트들의 기본 default 값은 true로 설정됩니다.
이러한 데이터 프로퍼티의 상태 정보를 담고 있는 프로퍼티 어트리뷰트의 각각의 특성은 다음과 같습니다.
- [[Value]] : 프로퍼티 키를 통해 값에 접근하면 반환되는 값을 의미합니다.
- [[Writable]] : 프로퍼티 값의 변경 가능 여부를 나타내며 불리언 값을 가집니다. 값이 false인 값 변경이 불가능한 읽기 전용의 프로퍼티가 됩니다.
- [[Enumerable]] : 열거 가능 여부를 나타내며 불리언 값을 가지고 값이 false인 경우 값의 열거 효과를 가지는 for, Object.keys 등의 메서드나 함수로 열거될 수 없습니다.
- [[Configurable]] : 프로퍼티의 재정의 가능 여부를 나타내며 불리언 값을 가지고 있고 값이 false인 경우 해당 프로퍼티의 삭제, 값의 변경이 금지됩니다. 단 [[Writable]]이 true인 상태에서 [[Configurable]] 값이 false로 변경될 시 [[Value]]의 변경 및 [[Writable]]을 false로 변경 하는 것은 허용됩니다.
이러한 프로퍼티 어트리뷰트에 사용자가 직접적으로 접근하는 행위에 대해서는 자바스크립트에서 허용되지 않지만, 오브젝트 빌트인 객체(Object)의 메서드들인 getOwnPropertyDescriptor(ES5)와 getOwnPropertyDescriptors(ES8)를 이용해 특정 객체의 프로퍼티 어트리뷰트의 부분, 혹은 전부를 접근 및 수정 할 수 있습니다.
다음은 데이터 프로퍼티에 대한 프로퍼티 어트리뷰트의 출력 및 제어 방법입니다.
// ① 특정 프로퍼티 어트리뷰트 확인 예시) Object.getOwnPropertyDescriptor 사용. const person = { //객체 생성 name : "Re_Go", age : 30, marriage : false }; console.log(Object.getOwnPropertyDescriptor(person, "name")); // 다음 메서드의 첫번째 인자로 객체를, 두번째 인자로 그 객체에 확인하고 싶은 프로퍼티를 문자열 형태로 입력합니다. { // 콘솔에는 다음과 같이 해당 프로퍼티의 값과 읽기, 열거, 재정의 여부에 대해 출력될 것입니다. value: 'Re_Go', writable: true, enumerable: true, configurable: true } // ② 객체의 모든 프로퍼티 어트리뷰트 확인 예시) const person = { name : "Re_Go", age : 30, marriage : false }; console.log(Object.getOwnPropertyDescriptors(person)); // 확인하고자 하는 객체를 해당 메서드의 인자로 전달합니다. // 출력값은 다음과 같이 프로퍼티들과 어트리뷰트들이 프로퍼티당 한 쌍씩 묶여 이중 객체 형태로 출력됩니다. { name: { value: 'Re_Go', writable: true, enumerable: true, configurable: true }, age: { value: 30, writable: true, enumerable: true, configurable: true }, marriage: { value: false, writable: true, enumerable: true, configurable: true } }
3. 어트리뷰트의 수정
이처럼 프로퍼티 어트리뷰트는 접근을 통한 확인이 가능할 뿐 만 아니라 수정 또한 가능합니다. 이때 쓰이는 메서드들은 defineProperties(ES5), defineProperty(ES5)인데요, 하지만 앞서 말씀 드렸던 각각의 어트리뷰트에 대한 특징을 숙지하여 수정에 주의를 요해야 하며
잘못된 수정은 자칫 객체의 동작이나 상호 작용에 예상치 못한 동작이 발생될 수 있기 때문에 수정은 가급적 하지 않는 것이 좋습니다.
덧붙여 해당 메서드들을 사용할 때 객체의 신규 프로퍼티 또한 생성이 가능하며 이때 굳이 모든 어트리뷰트를 작성하지 않아도 됩니다(두 메서드 동일). 즉 value 어트리뷰트를 생략시 기본값은 undefined로, 나머지 어트리뷰트를 생략시 기본값인 true로 값이 설정되죠.
// ① 데이터 프로퍼티의 프로프티 어트리뷰트의 상태를 제어하는 예시) const person = { // 객체 생성 및 프로퍼티 정의 name : "Re_Go", age : 30, marriage : false }; Object.defineProperty(person, 'name', {writable: false}); // 어트리뷰트를 부분적으로 수정할 수 있습니다. Object.defineProperties(person, { age: { value: 30, writable: false, enumerable: true, configurable: false }, name: { value: "Park_jongmin", writable: false, }, newProp: { // 새로운 프로퍼티 또한 추가가 가능하며 이 부분 또한 부분 작성이 가능합니다. value: "newValue", writable: true enumerable: true, } });
