DEEP DIVE 16장 - 프로퍼티 어트리뷰트

Mudi·2022년 11월 3일
0

[Book] Deep Dive

목록 보기
4/5
post-thumbnail

프로퍼티 어트리뷰트


내부 슬롯과 내부 메서드

내부 슬롯과 내부 메서드는 자바스크립트 엔진의 구현 알고리즘을 설명하기 위해 ECMAScript 사양에서 등장하는 이중 대괄호로 감싸진 것들입니다.

자바스크립트 엔진의 내부 로직이기 때문에 자바스크립트에서 내부 슬롯과 내부 메서드에 직접적으로 접근하거나 호출할 수 있는 방법을 제공하지는 않지만, 일부 내부 슬롯과 내부 메서드에 한하여 간접적으로 접근할 수 있는 수단을 제공합니다.


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

프로퍼티 어트리뷰트란 프로퍼티 상태를 나타내는 것입니다.
자바스크립트 엔진은 프로퍼티를 생성할 때 프로퍼티 어트리뷰트를 기본값으로 자동 정의합니다. 프로퍼티 어트리퓨트는 다음 항목으로 이루어져있습니다. 모든 프로퍼티 어트리뷰트는 내부 슬롯이기 때문에 두개의 대괄호로 감싸져있습니다.

  • 프로퍼티의 값(Value)
  • 갱신 가능 여부(Writable)
  • 열거 가능 여부(Enumerable)
  • 재정의 가능 여부(Configurable)

프로퍼티 어트리뷰트는 자바스크립트 엔진이 관리하는 내부 상태 값인 내부 슬롯으로, 직접 접근할 수 없고 간접적으로 접근하기 위해서 아래 메서드를 사용해야합니다.

const person = {
	name: 'Lee'
};

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

Object.getOwnPropertyDescriptor 메서드 사용하기

첫 번째 매개변수에는 객체의 참조를 전달하고, 두 번째 매개변수에는 프로퍼티 키를 문자열로 전달합니다.
Object.getOwnPropertyDescriptor 메서드는 프로퍼티 어트리뷰트 정보를 제공하는 프로퍼티 디스크립터 객체를 반환합니다. 존재하지 않는 프로퍼티나 상속받은 프로퍼티에 대한 프로터피 디스크립터를 요구하면 undefined가 반환됩니다.

Object.getOwnPropertyDescriptor 와 Object.getOwnPropertyDescriptors 의 다른 점

마지막에 s가 붙은 Object.getOwnPropertyDescriptors는 프로퍼티를 따로 지정해주지 않아도 모든 프로퍼티 디스크립터를 하나로 묶어 반환해줍니다.


데이터 프로퍼티

키와 값으로 구성된 일반적인 프로퍼티입니다. 위의 Object.getOwnPropertyDescriptor 메서드로 반환되는 프로퍼티 디스크립터 객체가 이에 해당됩니다.

프로퍼티 어트리뷰트

[[Value]], [[Writable]], [[Enumerable]], [[Configurable]] 프로퍼티 어트리뷰트에 직접 접근할 수 없으므로 프로퍼티 어트리뷰트 디스크립터 메서드를 통하면 값들이 value, writable, enumerable, configurable로 맵핑됩니다.

value
프로퍼티 키를 통해 프로퍼티 값에 접근하면 반환되는 값입니다. 프로퍼티 키를 통해 프로퍼티 값을 변경하며 [[Value]]에 값을 재할당합니다. 이때 프로퍼티가 없으면 프로퍼티를 동적 생성하고 생성된 프로퍼티의 [[Value]]에 값을 저장합니다.

writable
프로퍼티 값의 변경 가능 여부를 불리언 값으로 나타냅니다. 값이 false인 경우 프로퍼티의 [[Value]]의 값을 변경할 수 없는 읽기 전용 프로퍼티가 됩니다.

enumerable
프로퍼티의 열거 가능 여부를 불리언 값으로 나타냅니다. 값이 true인 경우에는 for...in 또는 Object.keys 메서드로 열거할 수 있으나 false인 경우에는 열거할 수 없습니다.

configurable
재정의 가능 여부를 불리언 값으로 나타냅니다. 값이 false인 경우 프로퍼티의 삭제나 프로퍼티 어트리뷰트 값의 변경이 금지 됩니다.

접근자 프로퍼티

자체적으로는 값을 갖지 않고 다른 데이터 프로퍼티의 값을 읽거나 저장할 때 호출되는 접근자 함수로 구성된 프로퍼티입니다.

get
프로퍼티의 값을 읽을 때 호출되는 접근자 함수입니다. getter 함수가 호출되고 그 결과가 프로퍼티 값으로 반환됩니다.

set
접근자 프로퍼티를 통해 데이터 프로퍼티의 값을 저장할 때 호출되는 접근자 함수입니다. 접근자 프로퍼티 키로 프로퍼티 값을 저장하면 setter 함수가 호출되고 그 결과가 프로퍼티 값으로 저장됩니다.

enumerable
데이터 프로퍼티와 같습니다.

configurable
데이터 프로퍼티와 같습니다.


프로퍼티 정의

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

프로퍼티 정의 메서드
Object.defineProperty

프로퍼티 정의
디스크립터 객체의 프로퍼티를 누락시키면 undefined를 반환하고, value값만 넣는다면 나머지 프로퍼티 어트리뷰트는 false로 값이 입력됩니다.

  • [[Writable]] 값이 false이면 값을 재할당 하여도 무시됩니다.
  • [[Enumerable]] 값이 false이면 열거되지 않습니다.
  • [[Configurable]] 값이 false이면 삭제하여도 무시됩니다.

객체 변경 방지

객체는 변경이 가능한 값으로 재할당 없이 변경할 수 있습니다. 3가지 메서드를 사용하여 객체 변경 방지하는 방법에 대해 알아보겠습니다.

객체 확장 금지
Object.preventExtensions
프로퍼티의 추가를 금지합니다. 삭제는 가능합니다.

객체 밀봉
Object.seal
프로퍼티의 추가와 삭제를 금지하고 재정의도 금지합니다.
읽기와 쓰기만 가능합니다.

객체 동결
Object.freeze
프로퍼티의 추가와 삭제 금지, 재정의 금지, 프로퍼티 값 갱신 금지를 의미합니다.
읽기만 가능합니다.


불변 객체

변경 방지 메서드들은 얕은 변경 방지로, 중첩된 객체까지는 영향을 주지는 못합니다. 즉, Object.freeze 메서드로 객체를 동결하여도 중첩 객체까지 동결할 수는 없습니다.

객체의 중첩 객체까지 동결하여 불변 객체를 만들려면 객체를 값으로 갖는 모든 프로퍼티에 대해 재귀적으로 Object.freeze 메서드를 호출해야 합니다.

0개의 댓글