프로퍼티 어트리뷰트

MinSeok Kim·2024년 8월 25일
0
post-thumbnail

내부 슬롯과 내부 메서드

자바스크립트 엔진의 구현 알고리즘을 설명하기 위한 의사 프로퍼티와 의사 메서드 : 이중 대괄호로 감싼 이름

**내부 슬롯과 내부 메서드는 자바스크립트 엔진의 내부 로직이므로 원칙적으로 자바스크립트는 내부 슬롯과 내부 메서드에 직접 접근하거나 호출할 수 있는 방법을 제공하지 않음 / 일부 내부 슬롯과 내부 메서드에 간접적으로 접근할 수 있는 방법 제공

const o = {};

o.[[prototype]] // Uncaught SyntaxError

o.__proto__ // object.prototype

자바스크립트 엔진은 프로퍼티를 생성할 때 프로퍼티의 상태를 나타내는 프로퍼티 어트리뷰트를 기본값으로 자동 정의한다.

프로퍼티 상태

  • 프로퍼티 값의 갱신 가능 여부
  • 프로퍼티 값의 열거 가능 여부
  • 프로퍼티 값의 재정의 가능 여부

프로퍼티 어트리뷰트

  • 내부슬롯 [[Writable]], [[Enumerable]], [[configurable]]
  • 직접 접근은 불가능하나 Object.getOwnPropertyDescriptor 메서드를 사용하여 간접적으로 확인 가능

Object.getOwnPropertyDescriptor

  • 첫 번째 매개변수에는 객체의 참조 전달
  • 두 번쨰 매개변수에는 프로퍼티 키를 문자열로 전달
  • 프로퍼티 디스크립터 객체 반환
  • 존재하지 않는 프로퍼티나 상속받은 프로퍼티에 대한 프로퍼티 디스크립터를 요구하면 undefined 반환

Object.getOwnPropertyDescriptor 메서드는 하나의 프로퍼티에 대해 프로퍼티 디스크립터 객체를 반환하지만 ES8에서 도입된 Object.getOwnPropertyDescriptors는 모든 프로퍼티의 프로퍼티 어트리뷰트 정보를 제공하는 프로퍼티 디스크립터 객체들을 반환

데이터 프로퍼티

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

데이터 프로퍼티의 어트리뷰트

프로퍼티 어트리뷰트프로퍼티 디스크릡터 객체의 프로퍼티설명
[[Value]]value-프로퍼티 키를 통에 값에 접근하면 반환됨
- 프로퍼티 키를 통해 프로퍼티 값을 변경하면 [[Value]]에 값을 재할당
[[Writable]]writable- 프로퍼티 값의 변경 가능 여부(불리언 값)
- [Writable] 값이 false인 경우 읽기 전용 프로퍼티로 변경
[[Enumerable]]enumerable- 프로퍼티 값의 열거 가능 여부(불리언 값)
-값이 false인 경우 열거 불가
[[Configurable]]configurable-프로퍼티 값의 재정의 가능 여부
- 값이 false인 경우 프로퍼티의 어트리뷰트 값 변경 불가

프로퍼티가 생성될 때 [[Value]]의 값은 프로퍼티 값으로 초기화되며 [[Writable]],[[Enumerable]], [[Configurable]]의 값은 true로 초기화 된다.

접근자 프로퍼티

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

프로퍼티 어트리뷰트프로퍼티 디스크릡터 객체의 프로퍼티설명
[[Get]]get-접근자 프로퍼티를 통해 데이터 프로퍼티의 값을 읽을 때 호출되는 접근자 함수
-접근자 프로퍼티 키로 프로퍼티 값에 접근하면 getter 함수 호출
[[Set]]set-접근자 프로퍼티를 통해 데이터 프로퍼티의 값을 저장할 때 호출되는 접근자 함수
-접근자 프로퍼티 키로 프로퍼티 값을 저장하면 setter 함수 호출
  • 접근자 프로퍼티는 getter와 setter 함수를 모두 정의할 수 도 있고 하나만 정리할 수도 있다.
  • 접근자 프로퍼티는 자체적으로 값을 가지지 않으며 데이터 프로퍼티의 값을 읽거나 저장할 때 관여할 뿐이다

접근자 프로퍼티와 데이터 프로퍼티 구별 방법

// 일반 객체와 __proto__는 접근자 프로퍼티이다
Object.getOwnPropertyDescriptor(Object.prototype,'__proto__');
// get: f set: f enumerable: false, configurable: true

// 함수 객체의 prototype은 데이터 프로퍼티다.
Object.getOwnPropertyDescriptor(function() {}, 'prototype');
// value: {...}, writable: true, enumerable: false, configurable: false

프로퍼티 정의

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

ObjectdefineProperty 메서드 사용

  • 인수로 객체의 참조와 데이터 프로퍼티의 키인 문자열, 프로퍼티 디스크립터 객체 전달
  • 한 번에 하나의 프로퍼티만 정의 가능 / Object.defineProperties 메서드 사용 시 여러개의 프로퍼티를 한 번에 정의 가능
프로퍼티 디스크립터 객체의 프로퍼티대응하는 프로퍼티 어트리뷰트생략했을 때의 기본 값
value[[Value]]undefined
get[[Get]]undefined
set[[Set]]undefined
writable[[Writable]]false
enumerable[[Enumerable]]false
configurable[[Configurable]]false

객체 변경 방지 (얕은 변경 방지)

객체는 변경 가능한 값이므로 재할당 없이 변경 가능 -> 자바스크립트에서 객체의 변경을 방지하는 다양한 메서드 제공

  • 객체 확장 금지
    • Object.preventExtensions
    • 프로퍼티 추가 금지
  • 객체 밀봉
    • Object.seal
    • 프로퍼티 추가 및 삭제, 프로퍼티 어트리뷰트 재정의 금지
    • 밀봉된 객체는 읽기와 쓰기만 가능
  • 객체 동결
    • Object.freeze
    • 프로퍼티 추가 및 삭제, 프로퍼티 어트리뷰드 재정의 금지, 프로퍼티 값 갱신 금지
    • 동결된 객체는 읽기만 가능
profile
개념 정리 & 궁금한 것 파헤치기

0개의 댓글