얕은 동결과 깊은 동결

yujin·2023년 11월 27일

목록 보기

17/48

얕은 동결과 깊은 동결 이해하기

1. 얕은 동결과 깊은 동결이란?

얕은 동결(Shallow Freeze)과 깊은 동결(Deep Freeze)은 객체의 불변성을 보장하는 방법 중 하나다. 얕은 동결은 객체의 최상위 프로퍼티만을, 깊은 동결은 객체의 모든 중첩 프로퍼티까지 불변하게 만든다.

2. 얕은 동결과 깊은 동결의 특징

얕은 동결(Shallow Freeze)

JavaScript의 Object.freeze() 메서드를 사용하면 객체를 얕게 동결할 수 있다. 이는 객체의 최상위 프로퍼티만을 변경할 수 없게 만든다. 하지만 중첩된 객체는 여전히 변경 가능하다.

깊은 동결(Deep Freeze)

깊은 동결은 객체의 모든 중첩 프로퍼티까지 변경할 수 없게 만든다. JavaScript에 내장된 메서드로는 깊은 동결을 할 수 없으므로, 재귀적으로 Object.freeze() 메서드를 호출하는 함수를 작성하여 사용해야 한다.

3. 얕은 동결과 깊은 동결의 활용 사례

얕은 동결과 깊은 동결은 객체의 불변성을 보장해야 하는 경우에 활용된다. 예를 들어, Redux와 같은 상태 관리 라이브러리에서는 상태 객체를 불변하게 유지해야 하므로, 이러한 동결 기법이 사용된다.

4. 얕은 동결과 깊은 동결의 장점과 단점

장점

데이터의 안정성 객체를 불변하게 만듦으로써, 의도치 않은 데이터 변경을 방지할 수 있다.
예측 가능한 코드 데이터의 변화가 제한되므로, 코드의 동작을 예측하기 쉬워진다.

단점

성능 이슈 특히 깊은 동결은 객체의 모든 프로퍼티를 순회하므로, 대규모 객체에는 성능 이슈가 발생할 수 있다.

5. 얕은 동결과 깊은 동결의 구현

얕은 동결(Shallow Freeze) 예제

JavaScript의 내장 메서드인 Object.freeze()를 사용해서 간단하게 얕은 동결을 할 수 있다.

let obj = { a: 1, b: { c: 2 } };
Object.freeze(obj);

// 이제 'obj'는 수정할 수 없음
obj.a = 10; // 무시
obj.b.c = 20; // 중첩된 객체는 수정할 수 있음
console.log(obj.b.c); // 20

깊은 동결(Deep Freeze) 예제

깊은 동결을 구현하기 위해서는 재귀적인 함수를 작성해야 한다.

function deepFreeze(obj) {
    const propNames = Object.getOwnPropertyNames(obj);
    for (let name of propNames) {
        let value = obj[name];
        obj[name] = value && typeof value === "object" ? deepFreeze(value) : value;
    }
    return Object.freeze(obj);
}

let obj = { a: 1, b: { c: 2 } };
deepFreeze(obj);

// 이제 'obj'는 수정할 수 없음
obj.a = 10; // 무시
obj.b.c = 20; // 중첩된 객체도 수정할 수 없음
console.log(obj.b.c); // 2