[JS] 프로퍼티 어트리뷰트

CheolHyeon Park·2021년 9월 7일
0

JavaScript

목록 보기
6/23
post-custom-banner

16.1 내부 슬롯과 내부 메서드

[[]]를 통해 내부 슬롯과 내부 메서드를 표현한다.

이 내부 슬롯과 내부 메서드는 ECMAScript 사양에 정의된 대로 구현되어 자바스크립트 엔진에서 실제로 동작하지만 직접적으로 개발자가 접근할 수 없다.

[[ProtoType]] 과 같은 내부 슬롯은 __proto__ 로 간접적으로 접근 가능하다.

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

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

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

직접 접근할 수 없지만 Object.getOwnPropertyDescriptor 메서드를 통해 간접적으로 확인할 수 있다.
Object.getOwnPropertyDescriptor 는 프로퍼티 디스크립터 객체를 반환한다.

const person = {
	name: 'Lee'
};

console.log(Object.getOwnPropertyDescriptor(person, 'name'));

ES8에서 도입된 Object.getOwnPropertyDescriptors() 메서드는 모든 프로퍼티의 어트리뷰트 정보를 제공하는 프로퍼티 디스크립터 객체를 반환한다.

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

16.3.1 데이터 프로퍼티

이 프로퍼티 어트리뷰트는 자바스크립트 엔진이 프로퍼티를 생성할 때 기본값으로 자동 정의된다.

데이터 프로퍼티

16.3.2 접근자 프로퍼티

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

접근자 프로퍼티

접근자 프로퍼티와 데이터 프로퍼티를 구별하는 방법은 다음과 같다.

// 일반 객체의 __proto__는 접근자 프로퍼티이다.
Object.getOwnPropertyDescriptor(Object.prototype, '__proto__');
// 함수 객체의 prototype은 데이터 프로퍼티다.
Object.getOwnPropertyDescriptor(function() {}, 'prototype');

16.4 프로퍼티 정의

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

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

const person = {};

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

Object.defineProperty(person, 'lastName', {
	value: 'lee',
});

// 디스크립터 객체의 프로퍼티를 누락시키면 undefined, false가 기본값이다.
console.log(Object.getOwnPropertyDescriptor(person, 'lastName'));
// 삭제 불가 ([[Configurable]] false)
delete person.lastName;
// 변경 불가 ([[Writable]] false) 
person.lastName = 'Kim';
// 프로퍼티 정의 재정의 불가 ([[Configurable]])) false)
Object.defineProperty(person, 'lastName', { enumerable: true });

Object.defineProperty(person, 'fullName', {
	get() {
		return `${this.firstName} ${this.lastName}`;
	}

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

})

여러개의 프로퍼티를 정의하기 위해서는

Object.defineProperties 메서드를 이용한다.

16.5 객체 변경 방비

16.5.1 객체 확장 금지 Object.preventExtensions

객체 확장 금지란 프로퍼티 추가 금지를 의미한다. (동적 추가 및 Object.defineProperty를 통한 추가 금지)

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

16.5.2 객체 밀봉 Object.seal

Object.seal 메서드는 읽기와 쓰기만 가능하다. (configurable이 false이다.)

가능 여부는 Object.isSealed 메서드로 확인할 수 있다.

16.5.3 객체 동결 Object.freeze

읽기만 가능하다.

동결 여부는 Object.isFrozen 메서드로 확인할 수 있다.

16.5.4 불변 객체

Object.freeze 메서드는 얕은 변경 방지만 지원한다.

중첩 객체에 대해서도 모두 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;
}

출처: 모던 자바스크립트 - 이웅모 (16장 프로퍼티 어트리뷰트)

책의 깊이가 깊다. 추천

profile
나무아래에 앉아, 코딩하는 개발자가 되고 싶은 박철현 블로그입니다.
post-custom-banner

0개의 댓글