<모던 자바스크립트 Deep Dive> 16장 프로퍼티 어트리뷰트 요약

16. 프로퍼티 어트리뷰트

1) 내부 슬롯과 내부 메서드

- 자바스크립트 엔진의 구현 알고리즘을 설명하기 위해 ECMAScript에서 사양에서 사용하는 의사 프로퍼티와 의사 메서드를 내부 슬롯, 내부 메서드라 칭함('[[..]]'로 감싼 이름들)

- 기본적으로 직접 접근 불가

- 내부 슬롯 중 일부는 간접적으로 접근이 가능 ex. [[Prototype]]은 __proto__로 접근 가능

const o = {};

o.__proto__ // Object.prototype

 

 

2) 프로퍼티 어트리뷰트와 프로퍼티 디스크립터 객체

- 프로퍼티 생성 시 프로퍼티의 상태를 나타내는 프로퍼티 어트리뷰트를 기본값으로 자동 정의

- 프로퍼티 어트리뷰트란 프로퍼티 값, 값 갱신 가능여부, 열거 가능여부, 재정의 가능여부 나타냄

- 자바스크립트 엔진이 관리하는 내부 상태 값인 내부 슬롯으로는 [[Value]], [[Writable]], [[Enumerable]], [[Configurable]]이 있음

- 내부 슬롯은 마찬가지로 직접 접근이 불가하나, Object.getOwnPropertyDescriptor(s) 메서드로 간접 확인이 가능하며 매개변수로 객체 참조와 프로퍼티 키를 전달

- 간접 확인 시 프로퍼티 디스크립터 객체 반환됨

const person = {
	name: 'Lee'
};

console.log(Object.getOwnPropertyDescriptor(person, 'name'));
// {value: "Lee", writable: true, enumerable: true, configurable: true}

 

 

3) 데이터 프로퍼티와 접근자 프로퍼티

1. 데이터 프로퍼티

- 일반적 프로퍼티

- 데이터 프로퍼티가 갖는 프로퍼티 어트리뷰트로는 [[Value]](프로퍼티 값), [[Writable]](값의 변경 가능여부, 불리언 타입), [[Enumerable]](값의 열거 가능여부, 불리언 타입), [[Configurable]](값의 재정의 가능여부, 불리언 타입)이 있음

 

2. 접근자 프로퍼티

- 그 자체로 값을 갖지 않으며, 값을 읽거나 저장할 때 사용하는 접근자 함수로 구성된 프로퍼티

- 접근자 프로퍼티가 갖는 프로퍼티 어트리뷰트로는 [[Get]](값 읽을 때 호출), [[Set]](값 저장할 때 호출), [[Enumerable]], [[Configurable]]이 있음

- 접근자 함수는 getter/setter 함수로도 불림

- 일반 객체의 __proto__는 접근자 프로퍼티, 함수 객체의 prototype은 데이터 프로퍼티로, 두 프로퍼티를 구별 가능함

const person = {
    // 데이터 프로퍼티
    firstName: 'Jung',
    lastName: 'Lee',

    //접근자 프로퍼티 중 getter과 setter 함수
    get fullname() {
        return '${this.firstName} ${this.lastName}';
    }

    set fullname(name) {
        [this.firstName, this.lastName] = name.split(' ');
    }
};

 

*프로토타입

- 어떤 객체의 상위(부모) 객체의 역할을 하는 객체

- 하위(자식) 객체에게 자신의 프로퍼티, 메서드를 상속

- 프로토타입 체인을 통해 상속 구조를 알 수 있음

 

 

4) 프로퍼티 정의

- 새로운 프로퍼티 추가 시 프로퍼티 어트리뷰트를 명시적으로 정의하거나, 기존 프로퍼티의 프로퍼티 어트리뷰트를 재정의하는 것이 가능

- 프로퍼티가 어떻게 동작해야 하는지 정의할 수 있다는 데에 그 의의가 있음

- Object.defineProperty(ies) 메서드로 정의가 가능하며, 인수로는 객체 참조와 데이터 프로퍼티 키, 그리고 프로퍼티 디스크립터 객체(일부 생략 가능하며, 생략 시 기본값 적용됨)를 전달

 

 

5) 객체 변경 방지

- 자바스크립트에서는 객체의 변경을 방지하는 다양한 메서드를 제공하며, 이 메서드들은 객체의 변경을 금지하는 그 강도에서 차이점을 가짐

 

1. 객체 확장 금지

- 프로퍼티 추가 금지

- Object.preventExtensions 메서드

- 객체의 확장 여부 확인은 Object.isExtensible 메서드 사용

- 프로퍼티 삭제는 가능

 

2. 객체 밀봉

- 프로퍼티 추가 및 삭제, 프로퍼티 어트리뷰트 재정의 금지(읽기와 쓰기만 가능)

- Object.seal 메서드

- 객체의 밀봉 여부 확인은 Object.isSealed 메서드 사용

- 프로퍼티 값 갱신은 가능

 

3. 객체 동결

- 프로퍼티 추가 및 삭제, 프로퍼티 어트리뷰트 재정의, 프로퍼티 값 갱신 금지(읽기만 가능)

- Object.freeze 메서드

- 객체의 동결 여부 확인은 Object.isFrozen 메서드 사용

 

4. 불변 객체

- 객체 확장 금지, 객체 밀봉, 객체 동결에 사용되는 메서드들은 얕은 변경 방지라 할 수 있음

- 직속 프로퍼티 뿐만 아니라, 중첩 객체까지 동결하는 깊은 변경 방지를 하는 것이 불변 객체로 만드는 방법임

- 객체를 값으로 갖는 모든 프로퍼티에 대해 재귀적으로 Object.freeze 메서드를 호출

 

 

 

 

참고 : 도서 <모던 자바스크립트 Deep Dive>