JavaScript Academy · 강의

Object.freeze와 seal

객체가 변경되지 않도록 막습니다.

Object.freeze와 seal은(는) CoddyKit의 무료 JavaScript Academy 강의입니다. 이것은 4개 중 1번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 JavaScript Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. JavaScript Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

객체를 동결하는 이유

불변성은 생성된 후 데이터가 변경될 수 없다는 뜻입니다. 불필요한 변경을 막고, 코드를 더 쉽게 이해하고 추론할 수 있게 하며, 여러 종류의 오류를 방지합니다.

JavaScript에서는 Object.freeze와 Object.seal을 사용해 객체를 잠글 수 있습니다.

Object.freeze 기본 사항

Object.freeze는 객체를 완전히 읽기 전용으로 만듭니다. 속성을 추가하거나 삭제하거나 변경할 수 없습니다. 반환값은 이제 동결된 동일한 객체입니다.

const user = Object.freeze({ name: 'Ada', age: 36 });
user.age = 99;
console.log(user.age);

isFrozen으로 확인하기

Object.isFrozen은 객체가 동결되었는지 알려 줍니다. 업데이트를 시도하기 전에 유용하게 사용할 수 있습니다.

const config = Object.freeze({ debug: false });
const settings = { theme: 'dark' };

console.log(Object.isFrozen(config));
console.log(Object.isFrozen(settings));

조용한 실패와 엄격 모드 실패

비엄격 코드에서는 동결된 객체에 쓰려는 작업이 조용히 실패합니다. 엄격 모드에서는 TypeError가 발생합니다. 어느 경우든 값은 변경되지 않습니다.

'use strict';
const frozen = Object.freeze({ x: 1 });
try {
  frozen.x = 2;
} catch (e) {
  console.log(e.name);
}
console.log(frozen.x);

freeze는 새 속성을 막습니다

동결하면 속성을 추가하는 것도 막힙니다. 새 key는 단순히 나타나지 않습니다.

const point = Object.freeze({ x: 0 });
point.y = 5;
console.log(point.y);
console.log(Object.keys(point));

freeze는 삭제를 막습니다

동결된 객체에서 속성을 삭제할 수도 없습니다. 속성은 그대로 유지됩니다.

const obj = Object.freeze({ keep: 'me' });
delete obj.keep;
console.log(obj.keep);

Object.seal은 다릅니다

Object.seal은 freeze보다 덜 엄격합니다. 속성을 추가하거나 삭제할 수는 없지만, 기존 값을 여전히 변경할 수는 있습니다.

const sealed = Object.seal({ count: 1 });
sealed.count = 2;
sealed.extra = 3;

console.log(sealed.count);
console.log(sealed.extra);

isSealed로 확인하기

Object.isSealed은 객체가 봉인되었는지 알려 줍니다. 모든 동결된 객체는 봉인되기도 하지만, 그 반대는 성립하지 않는다는 점에 유의하세요.

const sealed = Object.seal({ a: 1 });
const frozen = Object.freeze({ b: 2 });

console.log(Object.isSealed(sealed));
console.log(Object.isSealed(frozen));
console.log(Object.isFrozen(sealed));

freeze와 seal 요약

freeze: 추가, 삭제, 변경이 불가능합니다. seal: 추가와 삭제는 불가능하지만 변경은 가능합니다. 구조는 고정되어 있지만 값이 변하는 경우 seal을 선택하세요.

const f = Object.freeze({ v: 1 });
const s = Object.seal({ v: 1 });

f.v = 100;
s.v = 100;

console.log('frozen v:', f.v);
console.log('sealed v:', s.v);

preventExtensions

가장 느슨한 잠금은 Object.preventExtensions입니다. 속성을 추가할 수는 없지만 기존 속성을 변경하거나 삭제할 수 있습니다. 세 가지 중 가장 약한 방식입니다.

const obj = Object.preventExtensions({ a: 1 });
obj.a = 2;
obj.b = 3;

console.log(obj.a);
console.log(obj.b);
console.log(Object.isExtensible(obj));

중요한 이유

구성과 상수를 동결하면 코드베이스 전체에서 실수로 편집하는 일을 막을 수 있습니다. 하지만 Object.freeze는 얕은 동결이라는 점을 기억하세요. 따라서 중첩된 객체는 변경 가능한 상태로 남습니다. 다음에서 이 문제를 해결합니다.

const SETTINGS = Object.freeze({ maxRetries: 3 });
function tryUpdate() {
  SETTINGS.maxRetries = 10;
}
tryUpdate();
console.log(SETTINGS.maxRetries);

빠른 확인

Object.freeze와 Object.seal의 차이는 무엇인가요?

복습: freeze와 seal

객체를 잠그는 방법을 배웠습니다.

Object.freeze: 추가, 삭제, 변경이 불가능합니다. isFrozen으로 확인합니다.
Object.seal: 추가와 삭제는 불가능하지만 변경은 가능합니다.
preventExtensions: 추가만 막습니다.
세 방식 모두 얕은 동결이므로, 다음에는 깊은 동결을 살펴봅니다.

자주 묻는 질문

“Object.freeze와 seal” 강의는 무료인가요?

네 — “Object.freeze와 seal” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 JavaScript Academy 강의 전체를 잠금 해제할 수 있습니다. JavaScript Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

“Object.freeze와 seal”에서 뭘 배우나요?

객체가 변경되지 않도록 막습니다. 브라우저에서 직접 실행하는 실습 코드로 JavaScript Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

JavaScript Academy을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 JavaScript Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 1번째 강의입니다.

“Object.freeze와 seal” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 JavaScript Academy 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 JavaScript Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

← JavaScript Academy(으)로 돌아가기