[JavaScript] 프로퍼티 어트리뷰트 : 프로퍼티의 세부설정

프로퍼티 어트리뷰트란?

자바스크립트 엔진은 우리가 프로퍼티를 생성하면 자동적으로 프로퍼티 어트리뷰트를 정의한다. 

프로퍼티 어트리뷰트란 프로퍼티의 내부의 상태를 나타내는 로직들이다.

프로퍼티 값[Value], 값의 갱신 여부 [Writable], 열거 가능 여부[Enumerable], 재정의가능여부[Configurable]이 있다.

어트리튜브를 확인하는 방법은 Object.getOwnPropertyDescripter 메서드를 사용하면 된다.

참고로 ES8에서 도입된 getOwnPropertyDescripters 메서드는 모든 프로퍼티의 프로퍼티 디스크립터 객체를 반환한다.

let person = {
    name: 'Lee'
}
//프로퍼티 디스크립터 객체 반환
console.log(Object.getOwnPropertyDescriptor(person, 'name'));
//{ value: 'Lee', writable: true, enumerable: true, configurable: true }

프로퍼티 디스크립터 객체란 프로퍼티 어트리뷰트 정보를 제공하는 객체이다.

 

데이터 프로퍼티

 

[[Value]]	프로퍼티 값에 접근하면 반환되는 값, 값을 변경하면 여기에 값을 재할당한다. 프로퍼티가 없을 경우 프로퍼티를 동적으로 생성하고, 값을 저장한다.
[[Writable]]	프로퍼티 값의 변경 가능 여부, 불리언 값이다. 해당 값이 false일 경우 해당 프로퍼티의 값을 변경할 수 없는 읽기 전용 프로퍼티가 됨
[[Enumerable]]	프로퍼티의 열거가능 여부, 불리언 값이다. 해당 값이 false일 경우 해당 프로퍼티는 for ...in Object.keys 메서드 등으로 열거할 수 없다.
[[Configurable]]	프로퍼티의 재정의 가능 여부, 불리언 값이다. false일 경우 프로퍼티의 삭제, 값의 변경이 금지된다. 단, Writable이 true일 경우에는 [[Value]]의 변경과 [[Writable]]을 false로 변경하는 것은 허용

일반적인 프로퍼티. 키와 값으로 구성된 프로퍼티이다.

 

접근자 프로퍼티

 

[[Get]]	프로퍼티의 값을 읽을 때 호출되는 접근자함수 getter 함수, 결과는 프로퍼티 값으로 반환된다.
[[Set]]	프로퍼티의 값을 저장할 때 호출되는 접근자함수 setter 함수, 결과가 프로퍼티 값으로 저장된다.
[[Enumerable]]	프로퍼티의 열거가능 여부, 불리언 값이다. 해당 값이 false일 경우 해당 프로퍼티는 for ...in Object.keys 메서드 등으로 열거할 수 없다.
[[Configurable]]	프로퍼티의 재정의 가능 여부, 불리언 값이다. false일 경우 프로퍼티의 삭제, 값의 변경이 금지된다. 단, Writable이 true일 경우에는 [[Value]]의 변경과 [[Writable]]을 false로 변경하는 것은 허용

접근자 프로퍼티란 자체적으로 값을 갖지 않으며 다른 데이터 프로퍼티의 값을 읽거나 저장할 때 사용하는 접근자 함수로 구성된 프로퍼티이다. getter/setter는 자주 사용되는 접근자함수이다. 아래의 코드는 접근자 프로퍼티를 활용하여 프로퍼티 값을 참조/저장 하는 예시이다.

let data = {
    //데이터 프로퍼티
    name: 'Lee',
    age: 20,
 
    //getter 함수는 접근자 프로퍼티
    get getData () {
        return `${this.name} ${this.age}`;
    },
    //setter 함수는 접근자 프로퍼티
    set setData (item) {
        [this.name, this.age] = item
    }
}
//데이터 프로퍼티를 통한 프로퍼티 값 참조
console.log(data.name, data.age);
//setter함수 호출, 접근자 프로퍼티를 통한 프로퍼티 값 저장
data.setData = ['Kim', 25];
//getter함수 호출, 접근자 프로퍼티를 통한 프로퍼티 값 참조
console.log(data.getData);
 
//data 객체의 데이터 프로퍼티의 프로퍼티 어트리뷰트
let dataProperty = Object.getOwnPropertyDescriptor(data, 'name');
console.log(dataProperty);
//{ value: 'Kim', writable: true, enumerable: true, configurable: true }
 
//data 객체의 접근자 프로퍼티의 프로퍼티 어트리뷰트
let accessorProperty = Object.getOwnPropertyDescriptor(data, 'getData');
console.log(accessorProperty);
//{get: [Function: get getData],set: undefined,enumerable: true,configurable: true}
//데이터 프로퍼티/ 접근자 프로퍼티의 어트리뷰트가 다른 것을 알 수 있다.