> 웹 프론트엔드 > JS 튜토리얼 > JavaScript에서 Object.freeze() 및 Object.seal() 익히기: 객체 가변성 제어

JavaScript에서 Object.freeze() 및 Object.seal() 익히기: 객체 가변성 제어

Barbara Streisand
풀어 주다: 2024-12-28 17:58:18
원래의
366명이 탐색했습니다.

Mastering Object.freeze() and Object.seal() in JavaScript: Controlling Object Mutability

JavaScript의 Object.freeze 및 Object.seal

JavaScript에서 객체로 작업할 때 의도하지 않은 변경을 방지하려면 객체의 변경 가능성을 제어하는 ​​것이 필수적입니다. 이를 위해 JavaScript에서 제공하는 두 가지 방법은 Object.freeze()Object.seal()입니다. 차이점과 사용 사례를 이해하는 것이 강력한 코드를 작성하는 데 중요합니다.


1. 객체.동결()

Object.freeze() 메서드는 객체를 불변으로 만듭니다. 이는 다음을 의미합니다.

  • 새 속성을 추가할 수 없습니다.
  • 기존 속성은 수정, 제거 또는 재구성할 수 없습니다.
  • 개체는 사실상 "동결"되어 어떤 식으로도 변경할 수 없습니다.

구문:

Object.freeze(obj);
로그인 후 복사
로그인 후 복사

:

const obj = { name: "Alice", age: 25 };
Object.freeze(obj);

obj.age = 30; // Does nothing (strict mode: throws an error)
obj.gender = "female"; // Does nothing (strict mode: throws an error)
delete obj.name; // Does nothing (strict mode: throws an error)

console.log(obj); // { name: "Alice", age: 25 }
로그인 후 복사
로그인 후 복사

사용 사례:

  • 구성 설정 등 프로그램 전체에서 개체가 일정하게 유지되도록 합니다.

객체가 동결되었는지 확인:

객체가 동결되었는지 확인하려면 Object.isFrozen()을 사용하세요.

console.log(Object.isFrozen(obj)); // true
로그인 후 복사
로그인 후 복사

2. Object.seal()

Object.seal() 메서드는 객체 수정을 제한하지만 Object.freeze()보다 덜 엄격합니다. 다음이 허용됩니다:

  • 기존 속성 수정(값은 변경될 수 있음)
  • 속성 추가, 삭제 방지.

구문:

Object.seal(obj);
로그인 후 복사

:

const obj = { name: "Bob", age: 30 };
Object.seal(obj);

obj.age = 35; // Allowed: Existing properties can be modified
obj.gender = "male"; // Does nothing (strict mode: throws an error)
delete obj.name; // Does nothing (strict mode: throws an error)

console.log(obj); // { name: "Bob", age: 35 }
로그인 후 복사

사용 사례:

  • 객체의 구조를 보호하고(추가/삭제 방지) 속성 값 변경을 허용하려는 경우.

객체가 봉인되었는지 확인:

객체가 봉인되었는지 확인하려면 Object.isSealed()를 사용하세요.

Object.freeze(obj);
로그인 후 복사
로그인 후 복사

3. Object.freeze()와 Object.seal()의 주요 차이점

기능 Object.freeze() Object.seal() 새 속성 추가
Feature Object.freeze() Object.seal()
Add new properties Not allowed Not allowed
Remove existing properties Not allowed Not allowed
Modify existing properties Not allowed Allowed
Reconfigure property descriptors Not allowed Not allowed
Use case Immutable objects (constants) Restrict structure but allow value changes
허용되지 않음
허용되지 않음

기존 속성 제거 허용되지 않음 허용되지 않음

기존 속성 수정 허용되지 않음 허용

속성 설명자 재구성 허용되지 않음 허용되지 않음
const obj = { name: "Alice", age: 25 };
Object.freeze(obj);

obj.age = 30; // Does nothing (strict mode: throws an error)
obj.gender = "female"; // Does nothing (strict mode: throws an error)
delete obj.name; // Does nothing (strict mode: throws an error)

console.log(obj); // { name: "Alice", age: 25 }
로그인 후 복사
로그인 후 복사
사용 사례 불변 객체(상수) 구조를 제한하지만 값 변경은 허용

4. 고정되고 봉인된 중첩 객체
console.log(Object.isFrozen(obj)); // true
로그인 후 복사
로그인 후 복사

Object.freeze()와 Object.seal()은 모두 얕습니다. 즉, 중첩된 개체에 영향을 주지 않습니다. 객체를 깊게 동결하거나 밀봉하려면 중첩된 각 객체에 메서드를 반복적으로 적용해야 합니다.

  1. 예(얕은 효과):
  2. 급냉동 도우미 기능:
  3. 5. 일반적인 함정과 팁

비엄격 모드 동작

: 비엄격 모드에서는 고정되거나 봉인된 개체에 대한 변경 사항이 자동으로 실패합니다. 보다 명확한 디버깅을 위해 항상 엄격 모드("use strict";)를 사용하십시오.

객체 변경 가능성으로 인한 혼란 방지: 팀 환경에서 오해를 피하기 위해 언제, 왜 객체가 동결되거나 봉인되었는지 명확하게 문서화하세요.

동결 전 봉인

: 제한된 구조와 불변성을 모두 원한다면 객체를 먼저 봉인한 다음 동결하세요.
결론 Object.freeze()와 Object.seal()은 모두 JavaScript에서 객체 불변성을 관리하는 데 유용한 도구입니다. Object.freeze()는 완전한 불변성을 보장하는 반면, Object.seal()은 기존 속성 값을 변경할 수 있도록 하여 유연성을 제공합니다. 올바른 방법을 선택하는 것은 개체에 대해 필요한 제어 수준에 따라 다릅니다. 안녕하세요. 저는 Abhay Singh Kathayat입니다! 저는 프론트엔드와 백엔드 기술 모두에 대한 전문 지식을 갖춘 풀스택 개발자입니다. 저는 효율적이고 확장 가능하며 사용자 친화적인 애플리케이션을 구축하기 위해 다양한 프로그래밍 언어와 프레임워크를 사용하여 작업합니다. 제 비즈니스 이메일인 kaashshorts28@gmail.com으로 언제든지 연락주세요.

위 내용은 JavaScript에서 Object.freeze() 및 Object.seal() 익히기: 객체 가변성 제어의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:dev.to
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿