[Programming] - 모던자바스크립트 16. 프로퍼티 어트리뷰트


여기서부터 생소한 내용들이라 정리하려고 한다.

ECMAScript 사양에서는 내부 슬롯과 내부 메서드가 있다.

해당 내용은 자바스크립트 엔진에서 실제로 동작하지만 개발자가 직접 접근하도록 외부로 공개된 객체 프로퍼티는 아니다.

prototype은 .__proto__를 통해 간접 접근할 수 있다.

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


데이터 프로퍼티

값(value) , 갱신 가능 여부 (writable), 열거 가능 여부(enumerable), 재정의 가능 여부(configurable)이 있다.

const person = {
	name: 'Lee'
};

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

ES8부터는 getOwnPropertyDescriptors를 통해 모든 프로퍼티 어트리뷰트를 확인 할 수 있다.

값은 말그대로 해당 객체의 값이고

갱신 가능 여부는 덮어 쓸수 있는지 여부이다. false가 되면 불변이 된다.

열거가능여부는 상위 객체에서 for…in이나 Object.keys등으로 열거 가능 여부이다.

const person = {};

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

Object.defineProperty(person, 'lastName', {
	value: 'kim',
	writable: true,
	// enumerable: false, 생략하면 기본값이 false이다.
	// configurable: false
});

console.log(Object.keys(person)); // ["firstName"]; lastName은 빠졌다. 열거가능여부 false라서

재정의 가능 여부는 위의 프로퍼티를 수정여부를 결정한다.

여기서 재정의는 값 재정의가 아니라 프로퍼티 재정의로 대표적으로 삭제가 불가능해진다.

여기서 재정의 가능 여부만 False일때 정의하려고 하면 Error가 발생한다. 갱신 가능 여부, 열거 가능 여부 모두 error없이 무시된다.

접근자 프로퍼티

접근자 함수로 구성되어있다.

get(getter 함수), set(setter 함수), 열거 가능 여부(enumerable), 재정의 가능 여부(configurable)이 있다.

const person = {
	firstName: 'Teddy',
	lastName: 'Kim',

	get fullName() {
		return `${this.firstName} ${this.lastName}`;	
	} 

	set fullName(name) {
		[this.firstName, this.lastName] = name.split(" ");
	}
};

console.log(Object.getOwnPropertyDescriptor(person, 'fullName');
// {get: f, set: f, enumerable: true, configurable: true }

객체 변경 방지


Object.preventExtensions : 객체 확장 금지 (프로퍼티 추가만 막힘)

Object.seal : 객체 밀봉 (프로퍼티 추가, 삭제, 재정의 막힘)

Object.freeze : 객체 동결 : (값 읽기만 가능) ⇒ 불변 객체 만들때 좋음

하지만 내부 객체는 불변화하려면 재귀로 다 freeze해줘야함.