내부 슬롯과 내부 메서드는 자바스크립트 엔진의 구현 알고리즘을 설명하기 위해 ECMAScript 사양에서 사용하는 의사 프로퍼티와 의사 메서드. 이중 괄호[[]]로 감싼 이름들이 내부 슬롯과 내부 메서드임.
내부 슬롯과 내부 메서드는 자바스크립트 엔진에서 실제로 동작하지만 개발자가 직접할 수 있도록 외부로 공개된 객체의 프로퍼티는 아님. 내부 로직이므로 원칙적으로 자바스크립트는 내부 슬롯과 내부 메서드에 직접 접근하거나 호출할 수 있는 방법을 제공하지 않음. 단 일부 내부 슬롯과 메서드에 한하여 간접적으로 접근 가능.
자바스크립트 엔진은 프로퍼티를 생성할 때 프로퍼티의 상태를 나타내는 프로퍼티 어트리뷰트를 기본값으로 자동 정의함. 프로러티 상태란 프로퍼티의 값, 값의 갱신 가능 여부, 열거 가능 여부, 재정의 가능 여부를 말함.
const person ={
name : 'Lee'
};
//프로퍼티 어트리뷰트 정보를 제공하는 프로퍼티 디스크립터 객체를 반환.
console.log(Object.getOwnPropertyDescriptor(person, 'name'));
// {value: "Lee", writable: true, enumerable: true, configurable: true}
Object.getOwnPropertyDescriptor 메서드는 프로퍼티 어트리뷰트 정보를 제공하는 프로퍼티 디스크립터 객체를 반환. 존재하지 않으면 undefined.
ES8에 도입된 Object.getOwnPropertyDescriptors는 모든 프로퍼티의 프로퍼티 어트리뷰트 정보를 제공하는 프로퍼티 디스크립터 객체를 반환.
const person ={
name : 'Lee',
age : 20
};
console.log(Object.getOwnPropertyDescriptors(person));
/*
{
{value: "Lee", writable: true, enumerable: true, configurable: true}
{value: 20, writable: true, enumerable: true, configurable: true}
}
*/
프로퍼티는 데이터 프로퍼티와 접근자 프로퍼티로 구분.
데이터 프로퍼티 : 키와 값으로 구성된 일반적인 프로퍼티
프로퍼티 어트리뷰트 | 프로퍼티 디스크립터 객체의 프로퍼티 | 설명 |
---|---|---|
[[Value]] | value | 프로퍼티 키를 통해 프로퍼티 값에 접근하면 반환되는 값. |
[[Writable]] | writable | 프로퍼티 값의 변경 가능 여부를 나타내며 불리언 값을 가짐. false인 경우 읽기 전용 |
[[Enumerable]] | enumerabl | 프로퍼티의 열거 가능 여부를 나타내며 불리언 값을 가짐 . false인 경우 for ... in문이나 Object.keys 메서드 등으로 열거할 수 없음 |
[[Configurable]] | configurable | 프로퍼티의 재정의 가능 여부를 나타내며 불리언 값을 가짐. false인 경우 해당 프로퍼티의 삭제, 프로퍼티 어트리뷰트 값의 변경이 금지. 단 [[Writable]]이 true인 경우 [[Value]], [[Writable]]을 false로 변경하는 것은 허용 |
접근자 프로퍼티 : 자체적으로 값을 갖지 않고 다른 데이터 프로퍼티값을 읽거나 저장할 때 호출되는 접근자 함수로 구성된 프로퍼티.
프로퍼티 어트리뷰트 | 프로퍼티 디스크립터 객체의 프로퍼티 | 설명 |
---|---|---|
[[Get]] | get | 접근자 프로퍼티를 통해 데이터 프로퍼티의 값을 읽을 때 호출하는 접근자 함수 |
[[Set]] | set | 접근자 프로퍼티를 통해 데이터 프로퍼티의 값을 저장할 때 호출되는 접근자 함수. |
[[Enumerable]] | enumerable | 데이터 프로퍼티의 [[Enumerable]]과 같음 |
[[Configurable]] | configurable | 데이터 프로퍼티의 [[Configurable]]]과 같음 |
const person = {
firstName : 'Ungmo',
lastName : 'Lee',
// fullName은 접근자 함수로 구성된 접근자 프로퍼티
// getter 함수
get fullName(){
return `${this.firstName} ${this.lastName}`;
},
// setter 함수
set fullName(name){
// 배열 디스트럭처링 할당
[this.firstName, this.lastName] = name.split(' ');
}
};
// 접근자 프로퍼티를 통한 프로퍼티 값의 저장
// 접근자 프로퍼티 fullName에 값을 저장하면 setter 함수가 호출
person.fullName = 'jaemin Lee'
console.log(person); // {firstName: "jaemin", lastName: "Lee"}
// 접근자 프로퍼티를 통한 프로퍼티 값의 참조
// 접근자 프로퍼티 fullName에 접근하면 getter 함수가 호출됨
console.log(person.fullName); // jaemin Lee
// fullName 접근자 프로퍼티
// 접근자 프로퍼티는 [[Get]], [[Set]], [[Enumerable]], [[Configurable]]
// 프로퍼티 어트리뷰트를 가짐
let descriptor = Object.getOwnPropertyDescriptors(person, 'fullName');
console.log(descriptor);
// {get: f, set: f, enumerable: true, configurable: true}
접근자 프로퍼티 fullName으로 프로퍼티 값에 접근하면 내부적으로 [[Get]] 내부 메서드가 호출되어 다음과 같이 동작
프로토타입 : 어떤 객체의 상위(부모) 객체의 역할을 하는 객체. 프로토타입은 하위(자식) 객체에게 자신의 프로퍼티와 메서드를 상속.
프로토타입 체인 : 프로토타입이 단방향 링크드 리스트 형태로 연결되어 있는 상속 구조. 객체의 프로퍼티나 메서드에 접근하려고 할 때 해당 객체에 접근하려는 프로퍼티 또는 메서드가 없다면 프로토타입 체인을 따라 프로토타입의 프로퍼티나 메서드를 차례로 검색.
접근자 프로퍼티와 데이터 프로퍼티를 구별하는 방법
// 일반 객체의 __proto__는 접근자 프로퍼티.
Object.getOwnPropertyDescriptor(Object.prototype, '__proto__');
// {get: f, set: f, enumerable: true, configurable: true}
// 함수 객체의 prototype은 데이터 프로퍼티.
Object.getOwnPropertyDescriptor(function() {}, 'prototype');
// {value: {...}, writable: true, enumerable: false, configurable: false}
const person = {};
// 데이터 프로퍼티의 정의
Object.defineProperty(person, 'firstName',{
value: 'jaemin',
writable: true,
enumerable: true,
configurable: true
});
Object.defineProperty(person, 'lastName',{
value: 'Lee'
});
// 디스크립터 객체의 프로퍼티를 누락시키면 undefined, false가 기본값임.
//[[Enumerable]]의 값이 false인 경우
// 해당 프로퍼티는 for...in 문이나 Object.keys 등으로 열거 x.
// lastName은 false로 열거되지 않음.
console.log(Object.keys(person)); // ["firstName"]
//[[Writable]]의 값이 false인 경우 해당 프로퍼티의 goekd 프로퍼티의 [[Value]]의 값을 변경 x
// 이때 값을 변경하면 에러는 발생하지 않고 무시됨
person.lastName = 'Kim';
// [[Configurable]]의 값이 false인 경우 해당 프러퍼티를 삭제할 수 없음
// 이때 프로퍼티를 삭제하면 에러는 발생하지 않고 무시
delete person.lastName;
// [[Configurable]]의 값이 false인 경우 해당 프러퍼티를 재정의할 수 없음.
// Object.defineProperty(person, 'lastName', {enumerable: true});
// Uncaught TypeError : Cannot redefine property: lastName
프로퍼티 디스크립터 객체의 프로퍼티 | 대응하는 프로퍼티 어트리뷰트 | 생략했을 때의 기본값 |
---|---|---|
value | [[Value]] | undefined |
get | [[Get]] | undefined |
set | [[Set]] | undefined |
writable | [[Writable]] | false |
enumerable | [[Enumerable]] | false |
configurable | [[Configurable]] | false |
Object.defineProperty 메서드는 한번에 하나의 프로퍼티 정의.
Object.defineProperties 메서드를 사용하면 여러 개의 프로퍼티를 한 번에 정의.
const person = {};
Object.defineProperties(person,{
// 데이터 프로퍼티 정의
firstName: {
value: 'jaemin',
writable: true,
enumerable: true,
configurable: true
},
lastName: {
value: 'Lee',
writable: true,
enumerable: true,
configurable: true
},
// 접근자 프로퍼티 정의
fullName: {
//getter 함수
get(){
return `${this.firstName} ${this.lastName}`;
},
set(name){
[this.firstName, this.lastName] = name.split(' ');
},
enumerable: true,
configurable: true
}
});
person.fullName = 'jaemin Lee';
console.log(person); // {firstName: "jaemin", lastName: "Lee"}
객체 확장 금지
Object.preventExtensions 메서드는 객체의 확장을 금지함. 확장이 금지된 객체는 프로퍼티 추가가 금지됨
const person = {name: 'Lee'};
// person 확장 금지된 객체가 아님
console.log(Object.isEXtensilbe(person)); // true
//person 객체의 확장을 금지
Object.preventExtensions(person);
console.log(Object.isEXtensilbe(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
객체 밀봉
Object.seal 매서드는 객체를 밀봉함. 밀봉된 객체는 읽기와 쓰기만 가능.
const person = {name: 'Lee'};
// person 객체는 밀봉된 객체가 아님
console.log(Object.isSealed(person)); // false
// person 객체를 밀봉(seal)하여 프로퍼티 추가, 삭제, 재정의 금지
Object.seal(person);
console.log(Object.isSealed(person)); // true
// 밀봉된 객체는 confiqurable이 false임
console.log(Object.getOwnPropertyDescriptor(person));
/*
{
name: {value: "Lee", writable: true, enumerable: true, configurable: false}
}
*/
//추가 금지
person.age = 20; // 무시. strict mode에서는 에러
//삭제 금지
delete person.name; // 무시. strict mode에서는 에러
//값의 갱신은 가능
person.name = 'Kim';
console.log(person); // {name: "Kim"}
// 프로퍼티 어트리뷰트 재정의가 금지됨
Object.defineProperty(person, 'name', {configurable: true});
//TypeError
객체 동결
Object.freeze 메서드는 객체를 동결. 동결된 객체는 읽기만 가능.
const person = {name: 'Lee'};
// person 객체는 동결된 객체가 아님
console.log(Object.isFrozen(person)); // false
// person 객체를 동결하여 프로퍼티 추가, 삭제, 재정의, 쓰기를 금지
Object.freeze(person);
console.log(Object.isFrozen(person)); // true
// 동결된 객체는 writable과 confiqurable이 false임
console.log(Object.getOwnPropertyDescriptor(person));
/*
{
name: {value: "Lee", writable: false, enumerable: true, configurable: false}
}
*/
// 프로퍼티 추가 금지
// 프로퍼티 삭제 금지
// 프로퍼티 값 갱신이 금지
// 프로퍼티 어트리뷰트 재정의가 금지
불변 객체
Object.freeze 메서드로 객체를 동결하여도 중첩 객체까지 동결 x
const person = {
name: 'Lee',
address: {city: 'Seoul'}
};
// 얕은 객체 동결
Object.freeze(person);
// 직속 프로퍼티만 동결
console.log(Object.isFrozen(person)); // true
// 중첩 객체까지 동결하지 못함.
console.log(Object.isFrozen(person.address)); // false
// 객체의 중첩 객체까지 동결하여 변경이 불가능한 읽기 전용의 불변 객체를 구현하려면 객체를 값으로 갖는 모든 프로퍼티에 대해 재귀적으로 Object.freeze 메서드를 호출
function deepFreeze(target){
// 객체가 아니거나 동결된 객체는 무시. 객체이고 동결되지 않은 객체만 동결
if(target && typeof target === 'object' && !Object.isFrozen(target)){
Object.freeze(target);
/*
모든 프로퍼티를 순회하며 재귀적으로 동결.
Object.keys 메서드는 객체 자신의 열거 가능한 프로퍼티 키를 배열로 반환.
forEach 메서드는 배열을 순회하며 배열의 각 요소에 대하여 콜백 함수를 실행.
*/
Object.keys(target).forEach(key => deepFreeze(target[key]));
}
return target
}
// 깊은 객체 동결
deepFreeze(person);
// 직속 프로퍼티만 동결
console.log(Object.isFrozen(person)); // true
// 중첩 객체까지 동결
console.log(Object.isFrozen(person.address)); // true