-
[JavaScript] 프로퍼티 어트리뷰트JavaScript 2022. 7. 10. 21:53728x90
내부 슬롯과 내부 메서드
- 내부 슬롯 : ECMAScript 사양에서 이용하는 의사 프로퍼티이다.
- 내부 메서드 : ECMAScript 사양에서 이용하는 의사 메서드이다.
이중 대괄호([[..]])로 감싼 이름이 내부 슬록과 내부 메서드이다.
내부 슬롯과, 내부 메서드는 자바스크립트 엔진의 내부 로직이므로 원칙적으로는 직접적으로 접근하거나 호출할 수 있는 방법을 제공하지 않는다.
예를 들어, 모든 객체는 [[Prototype]]이라는 내부 슬롯을 갖는다. [[Prototype]]의 내부 슬롯은 proto를 통해 간접적으로 접근할 수 있다.
const o = {}; // 내부 슬롯은 자바스크립트 엔진의 내부 로직이므로 직접 접근할 수 없다. o.[[Prototype]] // -> Uncaught SyntaxError: Unexpected token '[' // 단, 일부 내부 슬롯과 내부 메서드에 한하여 간접적으로 접근할 수 있는 수단을 제공하기는 한다. o.__proto__ // -> Object.prototype
프로퍼티 어트리뷰트와 프로퍼티 디스크립터 객체
자바스크립트 엔진은 프로퍼티를 생성할 때 프로퍼티의 상태를 나타내는 어트리뷰트를 기본값으로 자동 정의한다.
프로퍼티 상태란? 다음과 같습니다.
[[Value]]
: 프로퍼티의 값[[Writable]]
: 값의 갱신 가능 여부[[Enumerable]]
: 열거 가능 여부[[Configurable]]
: 재정의 여부
저희는 Object.getOwnPropertyDescriptor 메서드를 이용해 간접적으로 확인 가능합니다.
이 때 첫 번째 매개변수에 객체의 참조, 두 번째 매개변수에는 프로퍼티 키를 문자열로 전달하면 프로퍼티 디스크립터 객체를 반환합니다.
const person = { name: 'Lee' }; // 프로퍼티 어트리뷰트 정보를 제공하는 프로퍼티 디스크립터 객체를 반환한다. console.log(Object.getOwnPropertyDescriptor(person, 'name')); // {value: "Lee", writable: true, enumerable: true, configurable: true}
데이터 프로퍼티의 접근자 프로퍼티
- 데이터 프로퍼티 : 키와 값으로 구성된 일반적인 프로퍼티다.
- 접근자 프로퍼티 : 자체적으로는 값을 갖지 않고 다른 데이터 프로퍼티의 값을 읽거나 저장할 때 호출되는 접근자 함수로 구성된 프로퍼티다.
1) 데이터 프로퍼티
[[Value]]
: 프로퍼티의 값[[Writable]]
: 값의 갱신 가능 여부false
이면[[Value]]
값 변경 불가능
[[Enumerable]]
: 열거 가능 여부false
라면for
문이나Object.keys
메서드 등으로 열거 불가능.
[[Configurable]]
: 재정의 여부fale
라면 삭제, 변경이 불가능하다. 단,[[Writable]]
이true
면[[Value]]
의 변경과 [[Writable]]을false
로 변경할 수 있다.
프로퍼티를 생성하면
[[Value]]
는 프로퍼티 값으로,[[Writable]]
,[[Enumerable]]
,[[Configurrable]]
의 값은true
로 초기화된다.2) 접근자 프로퍼티
값을 갖지 않고 다른 데이터 프로퍼티의 값을 읽고 저장할 때 사용하는 프로퍼티이다.
[[Get]]
: 값을 읽을 때 사용한다.- getter 함수가 호출되고 그 결과가 프로퍼티 값으로 반환된다.
- 작동방식
- 프로퍼티 키가 유효한지 확인한다.(키는 문자열 또는 심벌)
- 프로토타입 체인에서 프로퍼티를 검색한다.
- 검색된 프로퍼티가 데이터 프로퍼티인지 접근자 프로퍼티인지 확인한다.
- getter 함수를 호출하여 반환한다.
[[Set]]
: 값을 저장할 때 사용한다.- setter 함수가 호출되고 결과가 프로퍼티 값으로 저장한다.
[[Enumerable]]
: 데이터 프로퍼티와 동일[[Configurable]]
: 데이터 프로퍼티와 동일
const person = { // 데이터 프로퍼티 firstName: 'Ungmo', lastName: 'Lee', // fullName은 접근자 함수로 구성된 접근자 프로퍼티다. // getter 함수 get fullName() { return `${this.firstName} ${this.lastName}`; }, // setter 함수 set fullName(name) { // 배열 디스트럭처링 할당: "31.1 배열 디스트럭처링 할당" 참고 [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 // firstName은 데이터 프로퍼티다. // 데이터 프로퍼티는 [[Value]], [[Writable]], [[Enumerable]], [[Configurable]] 프로퍼티 어트리뷰트를 갖는다. let descriptor = Object.getOwnPropertyDescriptor(person, 'firstName'); console.log(descriptor); // {value: "Heegun", writable: true, enumerable: true, configurable: true} // fullName은 접근자 프로퍼티다. // 접근자 프로퍼티는 [[Get]], [[Set]], [[Enumerable]], [[Configurable]] 프로퍼티 어트리뷰트를 갖는다. descriptor = Object.getOwnPropertyDescriptor(person, 'fullName'); console.log(descriptor); // {get: ƒ, set: ƒ, enumerable: true, configurable: true}
- 접근자 프로퍼티와 데이터 프로퍼티를 구별하는 방법
// 일반 객체의 __proto__는 접근자 프로퍼티다. Object.getOwnPropertyDescriptor(Object.prototype, '__proto__'); // {get: ƒ, set: ƒ, enumerable: false, configurable: true} // 함수 객체의 prototype은 데이터 프로퍼티다. Object.getOwnPropertyDescriptor(function() {}, 'prototype'); // {value: {...}, writable: true, enumerable: false, configurable: false}
프로퍼티 정의
const person = {}; // 데이터 프로퍼티 정의 Object.defineProperty(person, 'firstName', { value: 'Ungmo', writable: true, enumerable: true, configurable: true }); Object.defineProperty(person, 'lastName', { value: 'Lee' }); let descriptor = Object.getOwnPropertyDescriptor(person, 'firstName'); console.log('firstName', descriptor); // firstName {value: "Ungmo", writable: true, enumerable: true, configurable: true} // 디스크립터 객체의 프로퍼티를 누락시키면 undefined, false가 기본값이다. descriptor = Object.getOwnPropertyDescriptor(person, 'lastName'); console.log('lastName', descriptor); // lastName {value: "Lee", writable: false, enumerable: false, configurable: false} // [[Enumerable]]의 값이 false인 경우 // 해당 프로퍼티는 for...in 문이나 Object.keys 등으로 열거할 수 없다. // lastName 프로퍼티는 [[Enumerable]]의 값이 false이므로 열거되지 않는다. console.log(Object.keys(person)); // ["firstName"] // [[Writable]]의 값이 false인 경우 해당 프로퍼티의 [[Value]]의 값을 변경할 수 없다. // lastName 프로퍼티는 [[Writable]]의 값이 false이므로 값을 변경할 수 없다. // 이때 값을 변경하면 에러는 발생하지 않고 무시된다. person.lastName = 'Kim'; // [[Configurable]]의 값이 false인 경우 해당 프로퍼티를 삭제할 수 없다. // lastName 프로퍼티는 [[Configurable]]의 값이 false이므로 삭제할 수 없다. // 이때 프로퍼티를 삭제하면 에러는 발생하지 않고 무시된다. delete person.lastName; // [[Configurable]]의 값이 false인 경우 해당 프로퍼티를 재정의할 수 없다. // Object.defineProperty(person, 'lastName', { enumerable: true }); // Uncaught TypeError: Cannot redefine property: lastName descriptor = Object.getOwnPropertyDescriptor(person, 'lastName'); console.log('lastName', descriptor); // lastName {value: "Lee", writable: false, enumerable: false, configurable: false} // 접근자 프로퍼티 정의 Object.defineProperty(person, 'fullName', { // getter 함수 get() { return `${this.firstName} ${this.lastName}`; }, // setter 함수 set(name) { [this.firstName, this.lastName] = name.split(' '); }, enumerable: true, configurable: true }); descriptor = Object.getOwnPropertyDescriptor(person, 'fullName'); console.log('fullName', descriptor); // fullName {get: ƒ, set: ƒ, enumerable: true, configurable: true} person.fullName = 'Heegun Lee'; console.log(person); // {firstName: "Heegun", lastName: "Lee"}
- Object.defineProperty 메서드 : 한번에 하나의 프로퍼티만 정의할 수 있다.
- Object.defineProperties 메서드 : 여러 개의 프로퍼티를 한 번에 정의할 수 있다.
const person = {}; Object.defineProperties(person, { // 데이터 프로퍼티 정의 firstName: { value: 'Ungmo', writable: true, enumerable: true, configurable: true }, lastName: { value: 'Lee', writable: true, enumerable: true, configurable: true }, // 접근자 프로퍼티 정의 fullName: { // getter 함수 get() { return `${this.firstName} ${this.lastName}`; }, // setter 함수 set(name) { [this.firstName, this.lastName] = name.split(' '); }, enumerable: true, configurable: true } }); person.fullName = 'Heegun Lee'; console.log(person); // {firstName: "Heegun", lastName: "Lee"}
객체 변경 방지
| 구분 | 메서드 | 프로퍼티
추가 | 프로퍼티
삭제 | 프로퍼티
값 읽기 | 프로퍼티
값 쓰기 | 프로퍼티 어트리뷰트 재정의 |
| --- | --- | --- | --- | --- | --- | --- |
| 객체 확장 금지 | Object.preventExtensions | X | O | O | O | O |
| 객체 밀봉 | Object.seal | X | X | O | O | X |
| 객체 동결 | Object.freeze | X | X | O | X | X |1) 객체 확장 금지
프로퍼티 추가가 금지된다.
확장 가능한 객체인지 여부는
Ovject.isExtensible 메서드
로 확인할 수 있다.const person = { name: 'Lee' }; // person 객체는 확장이 금지된 객체가 아니다. console.log(Object.isExtensible(person)); // true // person 객체의 확장을 금지하여 프로퍼티 추가를 금지한다. Object.preventExtensions(person); // 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
2) 객체 밀봉
Object.seal 메서드
는 객체를 밀봉한다.- 객체 밀봉 : 프로퍼티 추가 및 삭제와 프로퍼티 재정의를 금한다는 뜻(읽기 쓰기만 가능)
여부는
Object.isSealed 메서드
로 확인할 수 있다.const person = { name: 'Lee' }; // person 객체는 밀봉(seal)된 객체가 아니다. console.log(Object.isSealed(person)); // false // person 객체를 밀봉(seal)하여 프로퍼티 추가, 삭제, 재정의를 금지한다. Object.seal(person); // person 객체는 밀봉(seal)된 객체다. console.log(Object.isSealed(person)); // true // 밀봉(seal)된 객체는 configurable이 false다. console.log(Object.getOwnPropertyDescriptors(person)); /* { name: {value: "Lee", writable: true, enumerable: 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
3) 객체 동결
Object.freeze 메서드
는 객체를 동결한다. 동결된 객체는 읽기만 가능하다.Obejct.isFrozen 메서드
로 확인할 수 있다.const person = { name: 'Lee' }; // person 객체는 동결(freeze)된 객체가 아니다. console.log(Object.isFrozen(person)); // false // person 객체를 동결(freeze)하여 프로퍼티 추가, 삭제, 재정의, 쓰기를 금지한다. Object.freeze(person); // person 객체는 동결(freeze)된 객체다. console.log(Object.isFrozen(person)); // true // 동결(freeze)된 객체는 writable과 configurable이 false다. console.log(Object.getOwnPropertyDescriptors(person)); /* { name: {value: "Lee", writable: false, enumerable: 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
4) 불변 객체
지금까지 살펴본 메서드들은 얕은 변경 방지로 직속 프로퍼티만 변경이 방지되고 중첩 객체까지는 영향을 주지 못한다. 따라서 불변 객체를 만들기 위해서는
Object.freeze 메서드
를 재귀적으로 호출해야 한다.function deepFreeze(target) { // 객체가 아니거나 동결된 객체는 무시하고 객체이고 동결되지 않은 객체만 동결한다. if (target && typeof target === 'object' && !Object.isFrozen(target)) { Object.freeze(target); /* 모든 프로퍼티를 순회하며 재귀적으로 동결한다. Object.keys 메서드는 객체 자신의 열거 가능한 프로퍼티 키를 배열로 반환한다. ("19.15.2. Object.keys/values/entries 메서드" 참고) forEach 메서드는 배열을 순회하며 배열의 각 요소에 대하여 콜백 함수를 실행한다. ("27.9.2. Array.prototype.forEach" 참고) */ Object.keys(target).forEach(key => deepFreeze(target[key])); } return target; } const person = { name: 'Lee', address: { city: 'Seoul' } }; // 깊은 객체 동결 deepFreeze(person); console.log(Object.isFrozen(person)); // true // 중첩 객체까지 동결한다. console.log(Object.isFrozen(person.address)); // true person.address.city = 'Busan'; console.log(person); // {name: "Lee", address: {city: "Seoul"}}
728x90'JavaScript' 카테고리의 다른 글
[JavaScript] 생성자 함수에 의한 객체 생성 (0) 2022.11.23 [백준]1132 : 합(javascript) (0) 2022.07.25 [JavaScript] let, const 키워드와 블록 레벨 스코프 (0) 2022.07.09 [JavaScript] 전역 변수의 문제점 (0) 2022.07.08 [JavaScript] 스코프 (0) 2022.07.07