JS에서 봉인 vs 동결 vs preventExtensions.

Object.seal() , Object.freeze() 및 Object.preventExtensions() 객체를 불변으로 렌더링하기 위해 자바스크립트에서 널리 사용되는 방법입니다. 그러나 각각의 차이점은 무엇이며 언제 다른 것을 선호해야 합니까?

차이점과 사용 사례를 자세히 이해해 봅시다.

Object.preventExtensions()

이 방법은 개체에 새 속성이 추가되는 것을 방지하지만 나머지 개체 속성은 그대로 둡니다.

귀하는 다음을 수행할 수 있습니다.

개체의 기존 값을 수정합니다.

개체의 기존 속성을 삭제합니다.

개체의 기존 속성을 구성합니다.

다음은 허용되지 않습니다.

개체에 새 속성을 추가합니다.

let virus = {
    name: 'SARS-CoV-2' 
}

Object.preventExtensions(virus);

/* ❌ Not Allowed ❌ */
// You can't add new properties.
virus.year = 2020;
virus.year; // undefined. In strict mode, it throws a TypeError

/* ☑️ Allowed ☑️ */
// You can still modify existing values.
virus.name = 'Corona Virus' 

// You can still configure existing properties. 
Object.defineProperty( virus, 'name', { 
    writable: false,
    enumerable: false,
    configurable: false
});

// You can still deleting existing properties.
delete virus.name 

// Use Object.isExtensible() to check if an object is extensible.
Object.isExtensible(virus) //false

객체.봉인()

"봉인된"개체를 생성합니다. 즉, 확장되지 않는 것 외에는 기존 속성을 재구성하거나 삭제할 수 없습니다.

귀하는 다음을 수행할 수 있습니다.

개체의 기존 값을 수정합니다.

다음은 허용되지 않습니다.

개체에 새 속성을 추가합니다.

개체의 기존 속성을 삭제합니다.

개체의 기존 속성을 구성합니다.

let virus = {
    name: 'SARS-CoV-2' 
}
Object.seal(virus);

/* ❌ Not Allowed ❌ */
// You can't add new properties.
virus.year = 2020;
virus.year; // undefined. In strict mode, it throws a TypeError

// You can't reconfigure existing properties.
Object.defineProperty( virus, 'name', { 
    writable: false,
    configurable: false
}); // fails

// You can't deleting existing properties.
delete virus.name // fails

/* ☑️ Allowed ☑️ */
// You can still modify existing properties values.
virus.name = 'Corona Virus'

// Use Object.isSealed() to check if an object is sealed.
Object.isSealed(virus) // true

Object.freeze()

가장 높은 수준의 불변성인 "동결된"객체를 생성합니다. 고정된 개체는 더 이상 변경할 수 없습니다. 본질적으로 의미하는 바는 어떤 식으로든 개체를 변경할 수 없다는 것입니다.

다음은 허용되지 않습니다.

개체에 새 속성을 추가합니다.

개체의 기존 속성을 삭제합니다.

개체의 기존 속성을 구성합니다.

개체의 기존 값을 수정합니다.

let virus = {
    name: 'SARS-CoV-2' 
}
Object.freeze(virus);

/* ❌ Not Allowed ❌ */
// You can't add new properties.
virus.year = 2020;
virus.year; // undefined. In strict mode, it throws a TypeError

// You can't configure existing properties. 
Object.defineProperty( virus, 'name', { 
    writable: false,
    enumerbale: false,
    configurable: false
}); // fails

// You can't delete existing properties.
delete virus.name // fails

// You can't modify existing property values.
virus.name = 'Corona Virus' // fails

// Use Object.isFrozen() to check if an object is frozen.
Object.isFrozen(virus) // true

요약

차이점을 간결하게 강조하는 이 표를 만들었습니다.