프로퍼티 어트리뷰트

솜사탕·2023년 5월 13일
0

JavaScript

목록 보기
12/23

내부 슬롯과 내부 메서드

프로퍼티 어트리뷰트를 이해하기 위해
내부 슬롯, 내부 메서드에 대한 개념이 필요로하다.

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

([[..]]) 이중대괄호로 감싼 이름들이 내부 슬롯과 내부 메서드다.

내부 슬롯과 내부 메서드는 ECMAScript 사양에 정의된 대로 구현되어
자바스크립트 엔진에서 실제로 동작 하지만
개발자가 직접 접근할 수 있도록 외부로
공개된 객체의 프로퍼티는 아니다.

즉 엔진의 내부 로직이지만 직접적으로 접근 및 호출 방법을 제공하지 않는다.

단. 일부 내부 슬롯, 내부 메서드에 한하여 간접적으로 접근 할 수 있는 수단을 제공함

모든 객체는 [[Prototype]] 내부 슬롯을 가지며 원칙적으로 접근할순 없으나, proto를 통해 간접적으로 접근이 가능


const o = {};

// 내부 슬롯은 자바스크립트 엔진의 내부 로직이므로 직접 접근 X
o.[[Prototype]] // Uncaught SyntaxError : Unexpected token '['

// 단, 일부 내부 슬롯과 내부 메서드에 한하여 접근 할 수단을 제공
o.__proto__ // Object.prototype

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

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

프로퍼티의 상태란 ?

프로퍼티 값
값의 갱신 가능 여부
열거 가능 여부
재정의가능 여부를 말한다.

프로퍼티 어트리뷰트는 자바스크립트 엔진이 관리하는 내부 상태 값인 내부 슬롯 [[value]], [[Writeable]], [[Enumerable]], [[Configurable]]이다.

해당 어트리뷰트에 접근 할순 없으나,
Object.getOwnPropertyDescriptor 메서드를 사용하여 간접적으로 확인이 가능하다.


const person = {
  name: "Lee"
};

// 프로퍼티 어트리뷰트 정보를 제공하는 프로퍼티 디스크립터 객체를 반환한다.
console.log(Object.getOwnPropertyDescriptor(person, 'name'));

// {value: "Lee", writeable: true, enumerable: ture, Configurable: true}

해당 메서드를 호출할땐 첫 번째 매개변수에는 객체의 참조를 전달하고, 두번쨰 매개변수에는 프로퍼티 키를 문자열로 전달하고
이때 프로퍼티 어트리뷰트 정보를 제공하는
"프로퍼티 디스크립터 객체를 반환" 한다.
존재하지 않는 디스크립터를 요구하면 undefined를 반환한다.

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

프로퍼티는 데이터 프로퍼티와 접근자 프로퍼티로 구분할 수 있다.

데이터 프로퍼티 : 키 와 값으로 구성된 일반적인 프로퍼티며
지금까지 살펴본 모든 프로퍼티는 데이터 프로퍼티다.

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

데이터 프로퍼티

데이터 프로퍼티는 아래의 사진처럼 프로퍼티 어트리뷰트를 가지며, 자바스크립트 엔진이 프로퍼티를 생성할 때 기본값으로 자동 정의 된다.

접근자 프로퍼티

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


접근자 함수는 getter/setter 함수라고 불리며
접근자 프로퍼티는 getter와, setter 함수를 모두 정의할 수도 있고 하나만 정의할 수도 있다.

객체 변경 방지

객체의 변경을 방지하는 다양한 메서드를 제공하며
객해당 메서드들은 객체의 변경을 금지하는 강도가 다르다.

객체 확장 금지

OBject.preventExtensions 메서드는 객체의 확장을 금지한다.
확장이 금지된 객체는 프로퍼티 추가가 금지된다.

확장이 가능한 객체 여부는 Object.isExtensible 메서드로 확인이 가능하다.


const person = {name:"lee"};

console.log(Object.isExtensible(person)); // true

// 객체 확장 금지
Object.preventExtensions(person);

console.log(Object.isExtensible(person)) // false

객체 밀봉

Object.seal 메서드는 객체를 밀봉하고
밀봉된 객체는 읽기 및 쓰기만 가능하다.

const person = {name:"lee"};

console.log(Object.isSealed(person)); // false

// 객체 밀봉
Object.seal(person);

console.log(Object.isSealed(person)); // true

객체 동결

Object.freeze 메서드는 객체를 동결하고
동결된 객체는 읽기만 가능하다.

const person = {name:"lee"};

console.log(Object.isFrozen(person)); // false

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

console.log(Object.isFrozen(person)); / true
profile
공부공부공부공부공부공부

0개의 댓글