객체 변경 방지

객체는 변경 가능한 값이므로 재할당 없이 직접 변경할 수 있다. 즉, 프로퍼티를 추가하거나 삭제할 수 있고, 프로퍼티 값을 갱신할 수 있으며, Object.defineProperty, Object.defineProperties 메서드를 사용하여 프로퍼티 어트리뷰트를 재정의할 수 있다.

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

 

 

객체 확장 금지

Object.preventExtensions 메소드는 객체의 확장을 금지한다. 이 의미는 프로퍼티 추가 금지를 의미한다. 삭제는 가능하다.

프로퍼티 추가는 동적으로 하는것과 Object.defineProperty 메서드로 추가할 수 있는데 이 방법이 모두 금지된다. 확장이 가능한 객체인지 여부는 Object.isExtensible 메서드로 확인할 수 있다.

 

 

객체 밀봉

Object.seal 메소드는 객체를 밀봉한다. 이 의미는 프로퍼티 추가와 삭제 및 어트리뷰트 재정의를 금지한다. 즉, 밀봉된 객체는 읽기와 쓰기만 가능하다. 밀봉된 객체인지 여부는 Object.isSealed 메서드로 확인할 수 있다.

 

 

객체 동결

Object.freeze 메소드는 객체를 동결한다. 객체 동결이란 프로퍼티 추가 및 삭제, 어트리뷰트 재정의 금지, 프로퍼티 값 갱신 금지를 의미한다. 즉 읽기만 가능하다. 동결된 객체인지 여부는 Object.isFrozen 메서드로 확인할 수 있다.

 

 

불변 객체

지금까지 살펴본 변경 방지 메서드 들은 얕은 변경 방지로써 직속 프로퍼티만 변경이 방지되고, 중첩 객체까지는 영향을 주지 못한다. 따라서 Object.freeze 메서드로 객체를 동결하여도 중첩 객체까지 동결할 수 없다.

 

const person = {
    name: 'Kang',
    address: { city: 'Dongtan' }
};

// 얕은 객체 동결
Object.freeze(person);

// 직속 프로퍼티만 동결한다.
console.log(Object.isFrozen(person)); // true

// 중첩 객체까지는 동결하지 못한다
console.log(Object.isFrozen(person.address)) // false

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

 

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


const person = {
    name: 'Kang',
    address: { city: 'Dongtan' }
};

// 깊은 객체 동결
deepFreeze(person);

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

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

person.address.city = 'Seoul';
console.log(person); // {name: "Kang", address: {city: "Dongtan"} }

---

참조 : 위키북스의 모던 자바스크립트 Deep Dive.