Index
③ 객체 변경 방지
1. 프로퍼티 어튜리뷰트와 프로퍼티 디스크립터 객체
1.1 프로퍼티 어트리뷰트
자바스크립트에서 객체의 프로퍼티는 프로퍼티 어트리뷰트라고 불리는 네 가지 주요 속성을 가진다. 이 어트리뷰트는 각각 객체의 프로퍼티가 어떻게 동작할 지 정의하는 역할을 한다.
① value: 프로퍼티의 값입니다. 이 값은 데이터를 저장하고 표현하는 데 사용됩니다.
②writable: true일 경우, 프로퍼티의 value를 수정할 수 있습니다. false로 설정하면 수정이 불가능합니다.
③enumerable: true일 경우, 해당 프로퍼티가 for...in 반복문이나 Object.keys() 같은 메서드에 의해 열거됩니다. false로 설정하면 열거되지 않습니다.
④configurable: true일 경우, 해당 프로퍼티를 삭제하거나 프로퍼티 어트리뷰트를 수정할 수 있습니다. false로 설정하면 프로퍼티의 어트리뷰트 수정 및 삭제가 불가능합니다.
1.2 프로퍼티 디스크립터 객체
프로퍼티 어트리뷰트는 자바스크립트 엔진이 관리하는 내부 상태값(value, writable, enumerable, configurable)이다.
어트리뷰트에 직접 접근 할 수 없지만 Object.getOwnPropertyDescriptor 메서드를 사용하여 간접적 확인은 가능하다.
Object.getOwnPropertyDescriptor 메서드를 호출할 때 첫번째 매개변수에는 객체의 참조를 전달하고, 두번째 매개변수에는 프로퍼티 키를 문자열로 전달한다. 이때 Object.getOwnPropertyDescriptor 메서드는 프로퍼티 어트리뷰트 정보를 제공하는 프로퍼티 디스크립터 객체를 반환한다.
const person = {
name: "Lee",
};
person.age = 20;
console.log(Object.getOwnPropertyDescriptor(person));
/*
{
name: {value: "Lee", writable: true, enumerable: true, configurable: true},
age: {value: "20", writable: true, enumerable: true, configurable: true}
}
*/
2. 데이터 프로퍼티와 접근자 프로퍼티
데이터 프로퍼티(data property)
키와 값으로 구성된 일반적인 프로퍼티
접근자 프로퍼티(accessor property)
자체적으로 값을 갖지 않고 다른 데이터 프로퍼티의 값을 읽거나 저장할 때 호출되는 접근자 함수로 구성된 프로퍼티
Data & Accessor Property
Jay Tak.
3. 객체 변경 방지
자바스크립트는 객체의 변경을 방지하는 다양한 메서드를 제공한다. 객체 변경 방지 메서드들은 객체의 변경을 금지하는 강도가 다르다.
Intensity to prevent changes to objects in object change prevention methods
Jay Tak.
3.1 객체 확장 금지 (object.preventExtensions)
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; //
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
3.2 객체 밀봉 (object.seal)
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 proeprty: name
3.3 객체 동결 (object.freeze)
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.getOwnPropertyDescriptor(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
3.4 불변 객체
변경방지 메서드들은 얕은 변경 방지(shallow only)로 직속 프로퍼티만 변경이 방지되고 중첩 객체까지는 영향을 주지 못한다. 따라서 Object.freeze 메서드로 객체를 동결하여도 중첩 객체까지 동결할 수 없다.
객체의 중첩 객체까지 동결하여 변경이 불가능한 읽기 전용의 불변 객체를 구현하려면 객체를 값으로 갖는 모든 프로퍼티에 대해 재귀적으로 Object.freeze 메서드를 호출해야 한다.
const person = {
name: "Lee",
address: { city: "Seoul" },
};
// 얕은 객체 동결
Object.freeze(person);
// 직속 프로퍼티만 동결한다.
console.log(Object.isFrozen(person)); // true
// 중첩 객체까지 동결하지 못한다.
console.log(Object.isFrozen(person.address)); // false
person.address.city = "Busan";
console.log(person); // {name: "Lee", address: {city: "Busan"}}
function deepFreeze(target) {
// 객체가 아니거나 동결된 객체는 무시하고 객체이고 동결되지 않은 객체만 동결한다.
if (target && typeof target === "object" && !Object.isFrozen(target)) {
Object.freeze(target);
/*
모든 프로퍼티를 순회하며 재귀적으로 동결한다.
Objet.keys 메서드는 객체 자신의 열거 가능한 프로퍼티 키를 배열로 반환한다.
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"}}