프로퍼티 어트리뷰트

내부 슬롯과 내부 메서드는 자바스크립트 엔진의 구현 알고리즘을 설명하기 위해 사용하는 의사 프로퍼티와 의사 메서드다.

예를 들어, 모든 객체는 [[Prototype]]이라는 내부 슬롯을 갖는다. 내부 슬롯은 자바스크립트 엔진의 내부 로직으므로 원칙적으로 직접 접근할 수 없지만, [[Prototype]] 내부 슬롯의 경우, _ __proto_ __를 통해 간접적으로 접근할 수 있다.

• 프로퍼티의 상태란 프로퍼티의 값, 값의 갱신 가능 여부, 열거 가능 여부, 재정의 가능 여부를 말한다. 직접 프로퍼티 어트리뷰트에 접근할 수 없지만 Object.getOwnPropertyDescriptor 메서드를 사용하여 간접적으로 확인할 수는 있다.

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

• 데이터 프로퍼티는 키와 값으로 구성된 일반적인 프로퍼티다. 지금까지 살펴본 모든 프로퍼티는 데이터 프로퍼티다.
• 접근적 프로퍼티는 자체적으로 값을 갖지 않고 다른데이터 프로퍼티의 값을 읽거나 저장할 때 호출되는 접근자 함수로 구성된 프로퍼티다.

데이터 프로퍼티

• value : 프로퍼티 키를 통해 프로퍼티 값에 접근하면 반환되는 값이다. 값을 변경하면 value에 값을 재할당한다.
• Writable : 프로퍼티 값의 변경 가능 여부를 나타내며 불리언 값을 갖는다.
• enumerable : 프로퍼티의 열거 가능 여부를 나타내며 불리언 값을 갖는다.
• configurable : configurable의 값이 false인 경우 해당 프로퍼티의 삭제, 프로퍼티 어트리뷰트 값의 변경이 금지된다.

접근자 프로퍼티

• get : 접근자 프로퍼티를 통해 데이터 프로퍼티의 값을 릭을 때 호출되는 접근자 함수다.
• set : 접근자 프로퍼티를 통해 데이터 프로퍼티의 값을 저장할 때 호출되는 접근자 함수다.

 

const person {
    
    // getter 함수
    get fullName() {}
    
    // setter 함수
    set fullName() {}
}

// 접근자 프로퍼티를 통한 프로퍼티 값의 저장
person,fullName = 'hyunsung';

// 접근자 프로퍼티를 통한 프로퍼티 값의 참조 getter 함수가 호출된다.
console.long(person.fullName);

 

프로퍼티 정의

프로퍼티 정의란 새로운 프로퍼티를 추가하면서 프로퍼티 어트리뷰트를 명시적으로 정의하거나, 기존 프로퍼티의 프로퍼티 어트리뷰트를 재정의하는 것을 말한다.

• Object.defineProperty 메서드를 사용하면 프로퍼티의 어트리뷰트를 정의할 수 있다.

 

// 데이터 프로퍼티 정의

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

 

Object.defineProperty 메서드는 한번에 하나의 프로퍼티만 정의할 수 있지만, Object.defineProperties 메서드를 사용하면 여러 개의 프로퍼티를 한 번에 정의할 수 있다.

 

 

객체 변경 방지

객체는 변경 가능한 값이므로 재할당 없이 직접 변경할 수 있다. 즉, 프로퍼티를 추가하거나 삭제할 수 있고, 프로퍼티 값을 갱신할 수 있으며, 어트리뷰트 재정의할 수도 있다.

• 객체 변경 방지 메서드들은 3가지가 있다.
  1. Object.preventExtensions : 객체 프로퍼티 추가 금지
  2. Object.seal : 객체 추가, 삭제 금지
  3. Object.freeze : 객체 읽기만 가능

이 중에서 Object.freeze에 대해 알아보자.

 

// 이런 식으로 사용할 수 있다. 상수 객체 동결

export const Reason = Object.freeze({
    win: 'win',
    lose: 'lose',
    cancel: 'cancel',
});

객체 동결은 불변 객체를 만드는 데 용이할 것으로 보이나, 객체를 동결해도 중첩 객체까지 동결할 수 없다.

 

const person = {
    name: 'Na',
    address: { city: 'Seoul' }
}

// 얕은 객체 동결
Object.freeze(person);

객체의 중첩 객체까지 동결하여 변경이 불가능한 읽기 전용의 불변 객체를 구현하려면 객체를 값으로 갖는 모든 프로퍼티에 대해 재귀적으로 Object.freeze 메서드를 호출해야 한다.

 

function deepFreeze(target) {
    
    // 객체가 아니거나 동결된 객체는 무시하고 객체이고 동결되지 않은 객체만 동결한다.
    
    if (target && typeof target === 'object' && !Object.isFrozen(target)) {
        Object.freeze(target);
        
        Object.keys(target).forEach(key => deepFreeze(target[key]));
    }
    
    return target;
}

 

 

모던 자바스크립트 Deep Dive를 바탕으로 정리한 내용입니다.

http://www.yes24.com/Product/Goods/92742567