JS Object.frezee() 함수 알아보기

 

Object.frezee..?

1. Object.freeze란?

Object.freeze() 메소드는 자바스크립트에서 객체의 변경을 방지하는 메소드입니다. 이 메소드를 사용하면 객체의 속성을 추가하거나, 삭제하거나, 변경할 수 없게 됩니다. 또한, 속성 값이 객체인 경우 해당 객체는 얕은(freeze의 깊이가 1단계만 적용됨) 동결이 되며, 중첩된 객체는 여전히 변경될 수 있습니다.

const obj = { name: 'John' };
Object.freeze(obj);

obj.name = 'Doe';  // 무시됨, 값은 'John' 그대로 유지
console.log(obj.name);  // 'John'

Object.freeze()는 데이터가 예기치 않게 변경되는 것을 방지하는 데 매우 유용합니다. 특히 애플리케이션에서 상태 관리가 중요한 경우 상태 불변성을 유지하기 위해 많이 사용됩니다.

2. Object.freeze()의 용도

• 데이터 무결성 유지: 객체의 속성을 실수로 변경하는 것을 방지해 코드 안정성을 높입니다.
• 불변성 관리: 상태 관리 라이브러리나 함수형 프로그래밍에서 불변 객체를 유지하는 데 필수적입니다.
• 디버깅 용이성: 객체가 의도하지 않게 수정되는 문제를 줄여 디버깅을 쉽게 할 수 있습니다.

3. deepFreeze 메소드 구현

Object.freeze()는 얕은 동결만 지원하기 때문에 객체가 중첩되어 있을 때는 중첩된 객체까지 모두 동결하려면 재귀를 통해 모든 객체를 순차적으로 동결해야 합니다. 이를 해결하기 위해 deepFreeze 메소드를 만들어 중첩된 객체들까지도 완전히 동결시킬 수 있습니다.

function deepFreeze(obj) {
    Object.freeze(obj);

    Object.keys(obj).forEach(key => {
        if (typeof obj[key] === 'object' && obj[key] !== null && !Object.isFrozen(obj[key])) {
            deepFreeze(obj[key]);
        }
    });

    return obj;
}

const nestedObj = {
    level1: {
        level2: {
            name: 'Nested'
        }
    }
};

deepFreeze(nestedObj);
nestedObj.level1.level2.name = 'Changed';  // 무시됨
console.log(nestedObj.level1.level2.name);  // 'Nested'

 

deepFreeze()는 특히 복잡한 데이터 구조를 사용할 때 유용합니다. 리액트 같은 상태 관리 라이브러리에서 사용하면 상태 변이가 의도하지 않게 발생하는 것을 방지하여 안정적인 상태 관리를 할 수 있습니다.

4. 추가

• Object.isFrozen() 메소드를 통해 객체가 동결되었는지 확인할 수 있습니다.
• Object.seal() 메소드는 객체의 속성 추가/삭제는 불가능하게 하지만, 기존 속성 값 변경은 허용합니다. Object.freeze()와는 다른 동작을 합니다.

const obj2 = { a: 1 };
Object.seal(obj2);
obj2.a = 2; // 가능
delete obj2.a; // 불가능

 

 

Object.freeze()와 Object.seal()의 차이는 상황에 따라 적절히 사용될 수 있습니다. Object.seal()은 값을 변경하되 새로운 속성을 추가하지 않으려는 경우 유용하며, Object.freeze()는 객체 자체를 완전히 고정하려는 경우에 더 적합합니다.