얕은 동결과 깊은 동결
동결이 어느 범위까지 적용되는지 이해합니다.
얕은 동결과 깊은 동결은(는) CoddyKit의 무료 JavaScript Academy 강의입니다. 이것은 4개 중 2번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 JavaScript Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. JavaScript Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
freeze는 얕은 동결입니다
Object.freeze는 객체의 최상위 수준만 잠급니다. 객체가 참조하는 중첩 객체나 배열은 완전히 변경 가능한 상태로 남습니다.
많은 개발자가 이 점에 놀라며, 미묘한 오류가 발생하는 원인이 되기도 합니다.
얕은 동결의 한계 확인하기
중첩 객체가 있는 객체를 동결해 보세요. 최상위 수준은 잠기지만 중첩 객체는 여전히 변경할 수 있습니다.
const user = Object.freeze({
name: 'Ada',
address: { city: 'London' }
});
user.name = 'Grace';
user.address.city = 'Paris';
console.log(user.name);
console.log(user.address.city);중첩 배열도 마찬가지입니다
동결된 객체 안의 배열도 보호되지 않습니다. 배열에 push와 pop을 사용하고 요소를 다시 할당할 수 있습니다.
const state = Object.freeze({ tags: ['a', 'b'] });
state.tags.push('c');
state.tags[0] = 'X';
console.log(state.tags);isFrozen으로 확인하기
중첩 객체에서 isFrozen의 결과가 false로 나타나므로, 동결이 내부까지 적용되지 않았음을 확인할 수 있습니다.
const obj = Object.freeze({ inner: { v: 1 } });
console.log(Object.isFrozen(obj));
console.log(Object.isFrozen(obj.inner));deepFreeze 작성하기
모든 항목을 잠그려면 재귀적으로 처리해야 합니다. 객체를 동결한 다음 각 중첩 객체 속성도 동결합니다. 이것이 깊은 동결입니다.
function deepFreeze(obj) {
for (const key of Object.keys(obj)) {
const value = obj[key];
if (value && typeof value === 'object') {
deepFreeze(value);
}
}
return Object.freeze(obj);
}
const data = deepFreeze({ a: { b: { c: 1 } } });
data.a.b.c = 999;
console.log(data.a.b.c);배열에 deepFreeze 적용하기
배열도 객체이므로 같은 재귀 방식으로 동결할 수 있습니다. 그러면 모든 깊이에서 push와 요소 쓰기가 막힙니다.
function deepFreeze(obj) {
for (const key of Object.keys(obj)) {
const value = obj[key];
if (value && typeof value === 'object') deepFreeze(value);
}
return Object.freeze(obj);
}
const state = deepFreeze({ list: [1, 2, 3] });
state.list.push(4);
state.list[0] = 99;
console.log(state.list);깊은 동결 확인하기
깊은 동결을 적용한 후에는 모든 중첩 객체에서 isFrozen의 결과가 true로 나타납니다.
function deepFreeze(obj) {
for (const key of Object.keys(obj)) {
const v = obj[key];
if (v && typeof v === 'object') deepFreeze(v);
}
return Object.freeze(obj);
}
const o = deepFreeze({ a: { b: 1 } });
console.log(Object.isFrozen(o));
console.log(Object.isFrozen(o.a));순환 참조 방어하기
객체가 자기 자신을 참조하면 단순한 재귀가 영원히 반복됩니다. 이미 동결된 객체는 건너뛰어 안전하게 처리하세요.
function deepFreeze(obj) {
if (Object.isFrozen(obj)) return obj;
for (const key of Object.keys(obj)) {
const v = obj[key];
if (v && typeof v === 'object') deepFreeze(v);
}
return Object.freeze(obj);
}
const a = { name: 'a' };
a.self = a;
deepFreeze(a);
console.log(Object.isFrozen(a.self));깊은 동결의 비용
깊은 동결은 모든 중첩 값을 방문하므로 큰 구조에서는 시간과 메모리 비용이 발생합니다. 공유 config나 상수처럼 실제로 보호해야 하는 항목만 동결하세요.
function deepFreeze(obj) {
if (Object.isFrozen(obj)) return obj;
Object.keys(obj).forEach(k => {
const v = obj[k];
if (v && typeof v === 'object') deepFreeze(v);
});
return Object.freeze(obj);
}
const small = deepFreeze({ a: 1, b: { c: 2 } });
console.log('frozen deeply:', Object.isFrozen(small.b));얕은 동결로 충분한 경우
객체가 원시 값만 담고 있다면 얕은 Object.freeze만으로도 완전히 보호할 수 있습니다. 중첩 객체나 배열이 있을 때만 깊은 동결이 필요합니다.
const flat = Object.freeze({ a: 1, b: 'two', c: true });
flat.a = 100;
console.log(flat.a);
console.log(Object.isFrozen(flat));중요한 이유
얕은 동결과 깊은 동결을 이해하면 동결된 객체가 완전히 불변이라고 잘못 생각하는 일을 막을 수 있습니다. 중첩 데이터에는 재귀적으로 처리하세요. 변경하는 대신 다음 수업에서는 동결하지 않고 copy를 만드는 불변 업데이트 패턴을 다룹니다.
const config = Object.freeze({ db: { host: 'local' } });
config.db.host = 'changed';
console.log('shallow freeze leaked:', config.db.host);빠른 확인
Object.freeze({ a: { b: 1 } })를 적용한 후 중첩된 b를 변경할 수 있나요?
복습: 얕은 동결과 깊은 동결
동결의 깊이 한계를 배웠습니다.
Object.freeze는 얕은 동결이므로 중첩 객체와 배열은 변경 가능한 상태로 남습니다.- deepFreeze는 재귀적으로 모든 수준을 잠급니다.
- 이미 동결된 객체를 건너뛰어 순환 참조에 대비합니다.
- 깊은 동결에는 비용이 들므로 보호가 필요한 항목만 동결합니다.
자주 묻는 질문
“얕은 동결과 깊은 동결” 강의는 무료인가요?
네 — “얕은 동결과 깊은 동결” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 JavaScript Academy 강의 전체를 잠금 해제할 수 있습니다. JavaScript Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
“얕은 동결과 깊은 동결”에서 뭘 배우나요?
동결이 어느 범위까지 적용되는지 이해합니다. 브라우저에서 직접 실행하는 실습 코드로 JavaScript Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.
JavaScript Academy을(를) 시작하는 데 경험이 필요한가요?
사전 경험은 필요하지 않습니다. CoddyKit의 JavaScript Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 2번째 강의입니다.
“얕은 동결과 깊은 동결” 강의는 얼마나 걸리나요?
대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.
이 JavaScript Academy 강의에서 코드를 작성하고 실행할 수 있나요?
네. 모든 JavaScript Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.