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

 

1) 내부 슬롯과 내부 메서드

ECMAScript 사양에 등장하는 이중 대괄호([[…]])로 감싼 이름들이 내부 슬롯과 내부 메서드다.

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

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

• ex) [[Prototype]] 내부 슬롯의 경우, __proto__를 통해 간접적으로 접근 가능

 

---

 

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

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

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

const person = {
	name: 'Lee'
};

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

 

getOwnPropertyDescriptor 메서드를 호출할 때 첫 번째 매개변수에는 객체의 참조(person)을 전달하고, 두 번째 매개변수에는 프로퍼티 키를 문자열(’name’)로 전달한다.

이때 getOwnPropertyDescriptor 메서드는 프로퍼티 어트리뷰트 정보를 제공하는 프로퍼티 디스크립터 객체를 반환한다.

 

const person = {
	name: 'Lee'
};

person.age = 20;

console.log(Object.getOwnPropertyDescriptors(person));
/*
name : {value: "Lee", writable: true, enumerable: true, configurable: true}, 
age : {value: 20, writable: true, enumerable: true, configurable: true}
*/

 

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

 

---

 

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

 

데이터 프로퍼티 (data property)

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

 

프로퍼티가 생성될 때 [[Value]]의 값은 프로퍼티 값으로 초기화되며 [[Writable]], [[Enumerable]], [[Configurable]]의 값은 true로 초기화된다. (프로퍼티를 동적으로 추가해도 동일)

프로퍼티 어트리뷰트	프로퍼티 디스크립터 객체의 프로퍼티	설명
[[Value]]	value	▫ 프로퍼티 키를 통해 프로퍼티 값에 접근하면 반환되는 값이다. ▫ 프로퍼티 키를 통해 프로퍼티 값을 변경하면 [[Value]]에 값을 재할당한다. 이때 프로퍼티가 없으면 프로퍼티를 동적 생성하고 생성된 프로퍼티의 [[Value]]에 값을 저장한다.
[[Writable]]	writable	▫ 프로퍼티의 값의 변경 가능 여부를 나타내며 불리언 값을 갖는다. ▫ [[Writable]]의 값이 false인 경우 해당 프로퍼티의 [[Value]]의 값을 변경할 수 없는 읽기 전용 프로퍼티가 된다.
[[Enumerable]]	enumarable	▫ 프로퍼티의 열거 가능 여부를 나타내며 불리언 값을 갖는다. ▫ [[Enumerable]]의 값이 false인 경우 해당 프로퍼티는 for…in문이나 Object.keys 메서드 등으로 열거할 수 없다.
[[Configurable]]	configurable	▫ 프로퍼티의 재정의 가능 여부를 나타내며 불리언 값을 갖는다. ▫ [[Configurable]]의 값이 false인 경우 해당 프로퍼티의 삭제, 프로퍼티 어트리뷰트 값의 변경이 금지된다. 단, [[Writable]]이 true인 경우 [[Value]]의 변경과 [[Writable]]을 false로 변경하는 것은 허용된다.

 

 

 

접근자 프로퍼티 (accessor property)

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

프로퍼티 어트리뷰트	프로퍼티 디스크립터 객체의 프로퍼티	설명
[[Get]]	get	접근자 프로퍼티를 통해 데이터 프로퍼티의 값을 읽을 때 호출되는 접근자 함수다. 즉, 접근자 프로퍼티 키로 프로퍼티 값에 접근하면 프로퍼티 어트리뷰트 [[Get]]의 값, 즉 getter 함수가 호출되고 그 결과가 프로퍼티 값으로 반환된다.
[[Set]]	set	접근자 프로퍼티를 통해 데이터 프로퍼티의 값을 저장할 때 호출되는 접근자 함수다. 즉, 접근자 프로퍼티 키로 프로퍼티 값을 저장하면 프로퍼티 어트리뷰트 [[Set]]의 값, 즉 setter 함수가 호출되고 그 결과가 프로퍼티 값으로 저장된다.
[[Enumerable]]	enumarable	데이터 프로퍼티와 동일
[[Configurable]]	configurable	데이터 프로퍼티와 동일

 

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

const person = {
	// 데이터 프로퍼티
	firstName: 'Ungmo',
	lastName: 'Lee',

	// getter 함수
	get fullName() {
		return `${this.firstName} ${this.lastName}`;
	},
	// setter 함수
	set fullName(name) {
		[this.firstName, this.lastName] = name.split(' ');   // 배열 디스트럭처링 할당
	}
};

// 데이터 프로퍼티를 통한 프로퍼티 값의 참조
console.log(person.firstName + ' ' + person.lastName);   // Ungmo Lee

// 접근자 프로퍼티를 통한 프로퍼티 값의 저장
// 접근자 프로퍼티 fullName에 값을 저장하면 setter 함수가 호출된다.
person.fullName = 'Heegun Lee';
console.log(person);   // {firstName: "Heegun", lastName: "Lee"}

// 접근자 프로퍼티를 통한 프로퍼티 값의 참조
// 접근자 프로퍼티 fullName에 접근하면 getter 함수가 호출된다.
console.log(person.fullName);   // Heegun Lee

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

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

 

접근자 프로퍼티는 자체적으로 값을 가지지 않으며 다만 데이터 프로퍼티의 값을 읽거나 저장할 때 관여할 뿐이다.

 

---

 

4) 프로퍼티 정의

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

 

 

데이터 프로퍼티 정의

const person = {};

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

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

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

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

• 디스크럽터 객체의 프로퍼티를 누락시키면 undefined, false가 기본값이다.

// [[Enumerable]]의 값이 false인 경우 
// 해당 프로퍼티는 for...in 문이나 Object.keys 등으로 열거할 수 없다.
console.log(Object.keys(person));   // ["firstName"]

// [[Writable]]의 값이 false인 경우 해당 프로퍼티의 [[Value]] 값을 변경할 수 없다.
// 이때 값을 변경하면 에러는 발생하지 않고 무시된다.
person.lastName = 'Kim';

// [[Configurable]]의 값이 false인 경우 해당 프로퍼티를 삭제할 수 없다.
// 이때 프로퍼티를 삭제하면 에러는 발생하지 않고 무시된다.
delete person.lastName;

// [[Configurable]]의 값이 false인 경우 해당 프로퍼티를 재정의할 수 없다.
Object.defineProperty(person, 'lastName', { enumerable: true });
// Uncaught TypeError: Cannot redefine property: lastName

 

 

접근자 프로퍼티 정의

Object.defineProperty(person, 'fullName', {
	// getter 함수
	get() {
		return `${this.firstName} ${this.lastName}`;
	},
	// setter 함수
	set(name) {
		[this.firstName, this.lastName] = name.split(' ');
	},
	enumerable: true,
	configurable: true
});

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

 

Object.defineProperty 메서드로 프로퍼티를 정의할 때 프로퍼티 디스크립터 객체의 프로퍼티를 일부 생략할 수 있다. (생략된 어트리뷰트는 기본값 undefined, false가 적용됨)

 

Object.defineProperties 메서드를 사용하면 여러 개의 프로퍼티를 한 번에 정의할 수 있다.

 

---

 

5) 객체 변경 방지

객체는 변경 가능한 값이므로 재할당 없이 직접 변경할 수 있다.

자바스크립트는 객체의 변경을 방지하는 다양한 메서드를 제공한다. 객체 변경 방지 메서드들은 객체의 변경을 금지하는 강도가 다르다.

구분	메서드	프로퍼티 추가	프로퍼티 삭제	프로퍼티 값 읽기	프로퍼티 값 쓰기	프로퍼티 어트리뷰트 재정의
객체 확장 금지	Object.preventExtensions	X	O	O	O	O
객체 밀봉	Object.seal	X	X	O	O	X
객체 동결	Object.freeze	X	X	O	X	X

 

 

객체 확장 금지 (Object.preventExtensions)

확장이 금지된 객체는 프로퍼티 추가가 금지된다.

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

const person = { name: 'Lee' };

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

// person 객체의 확장을 금지하여 프로퍼티 추가를 금지한다.
Object.preventExtensions(person);

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

// 프로퍼티 추가가 금지된다.
person.age = 20;   // 무시. strict mode에서는 에러
console.log(person);   // {name: "Lee"}

// 프로퍼티 삭제는 가능하다.
delete person.name;
console.log(person);   // {}

// 프로퍼티 정의에 의한 프로퍼티 추가도 금지된다.
Object.defineProperty(person, 'age', { value: 20 });
// TypeError: Cannot define property age, object is not extensible

 

 

객체 밀봉 (Object.seal)

객체 밀봉이란 프로퍼티 추가 및 삭제와 프로퍼티 어트리뷰트 재정의 금지를 의미한다.

즉, 밀봉된 객체는 읽기와 쓰기만 가능하다.

밀봉된 객체인지 여부는 Object.isSealed 메서드로 확인할 수 있다.

const person = { name: 'Lee' };

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

// person 객체를 밀봉하여 프로퍼티 추가, 삭제, 재정의를 금지한다.
Object.seal(person);

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

// 밀봉된 객체는 configurable이 false다.
console.log(Object.getOwnPropertyDescriptors(person));
/*
{
	name: {value: "Lee", writable: true, enumeratable: true, configurable: false},
}
*/

// 프로퍼티 추가가 금지된다.
person.age = 20;   // 무시. strict mode에서는 에러
console.log(person);   // {name: "Lee"}

// 프로퍼티 삭제가 금지된다.
delete person.name;   // 무시. strict mode에서는 에러
console.log(person);   // {name: "Lee"}

// 프로퍼티 값 갱신은 가능하다. 
person.name = 'Kim';
console.log(person);   // {name: "Kim"}

// 프로퍼티 어트리뷰트 재정의가 금지된다. 
Object.defineProperty(person, 'name', { configurable: true });
// TypeError: Cannot redefine property: name

 

 

객체 동결 (Object.freeze)

객체 동결이란 프로퍼티 추가 및 삭제와 프로퍼티 어트리뷰트 재정의 금지, 프로퍼티 값 갱신 금지를 의미한다.

즉, 동결된 객체는 읽기만 가능하다.

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

const person = { name: 'Lee' };

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

// person 객체를 동결하여 프로퍼티 추가, 삭제, 재정의, 쓰기를 금지한다.
Object.freeze(person);

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

// 동결된 객체는 writable, configurable이 false다.
console.log(Object.getOwnPropertyDescriptors(person));
/*
{
	name: {value: "Lee", writable: false, enumeratable: true, configurable: false},
}
*/

// 프로퍼티 추가가 금지된다.
person.age = 20;   // 무시. strict mode에서는 에러
console.log(person);   // {name: "Lee"}

// 프로퍼티 삭제가 금지된다.
delete person.name;   // 무시. strict mode에서는 에러
console.log(person);   // {name: "Lee"}

// 프로퍼티 값 갱신이 금지된다. 
person.name = 'Kim';   // 무시. strict mode에서는 에러
console.log(person);   // {name: "Lee"}

// 프로퍼티 어트리뷰트 재정의가 금지된다. 
Object.defineProperty(person, 'name', { configurable: true });
// TypeError: Cannot redefine property: name

 

 

불변 객체

위의 변경 방지 메서드들은 얕은 변경 방지로 직속 프로퍼티만 변경이 방지되고 중첩 객체까지는 영향을 주지는 못한다.

const person = {
	name: 'Lee',
	address: { city: 'Seoul' }
};

Object.freeze(person);

console.log(Object.isFrozen(person));   // true
console.log(Object.isFrozen(person.address));   // fasle

person.address.city = 'Busan';
console.log(person); // {name: "Lee", address: {city: "Busan"}}

 

객체의 중첩 객체까지 동결하여 변경이 불가능한 읽기 전용의 불변 객체를 구현하려면 객체를 값으로 갖는 모든 프로퍼티에 대해 재귀적으로 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;
}

 

 

---

출처: 이웅모, 『모던 자바스크립트 Deep Dive』 - 위키북스