TIL. JS 객체 수정 제한 Object.freeze, Object.seal, Object.preventExtensions

오늘 개발하다가

detected component error TypeError : cannot add property 객체이름, object is not extensible

 

이런... 에러를 만났다.  오...

 

객체가 수정 불가능한 상태일때 수정을 시도하면 발생하는 에러인데,

 

내가 하려 했던 일은, vueX store안에 있는 객체를 몇개 건들려고 했는데, 

 

새 페이지만들려니 적용되지 않더라..

 

프레임워크가 업데이트 되면서

 

스토어의 공통 코드들의 데이터를 잠궈버리는 코드를 찾아냈다.

 

Object.freeze() 가 걸려있었는데,

 

테스팅을 몇가지 해보고자 한다.

 

Object.freeze()

Object.seal()

Object.preventExtensions() 

 

비슷한놈 세놈중 가장 약한놈부터

 

Object.preventExtensions()

Object.preventExtensions() 메서드는 새로운 속성이 이제까지 객체에 추가되는 것을 방지합니다 (즉 객체의 장래 확장을 막습니다).

 

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/preventExtensions

 

 

Object.seal()

Object.seal() 메서드는 객체를 밀봉합니다. 객체를 밀봉하면 그 객체에는 새로운 속성을 추가할 수 없고, 현재 존재하는 모든 속성을 설정 불가능 상태로 만들어줍니다. 하지만 쓰기 가능한 속성의 값은 밀봉 후에도 변경할 수 있습니다(역자 주 : 바로 이 점이 Object.freeze()와의 차이라고 할 수 있습니다).

 

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/seal

 

 

Object.freeze()

Object.freeze() 메서드는 객체를 동결합니다. 동결된 객체는 더 이상 변경될 수 없습니다. 즉, 동결된 객체는 새로운 속성을 추가하거나 존재하는 속성을 제거하는 것을 방지하며 존재하는 속성의 불변성, 설정 가능성(configurability), 작성 가능성이 변경되는 것을 방지하고, 존재하는 속성의 값이 변경되는 것도 방지합니다. 또한, 동결 객체는 그 프로토타입이 변경되는것도 방지합니다. freeze()는 전달된 동일한 객체를 반환합니다.

 

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/freeze

 

 

이렇다는데 내용 갖다붙여넣는건 아무의미없고, 

 

추가적으로 궁금한점 몇가지만 해결해보았다.

 

 

1. 객체의 일부속성만 얼리는건 primitive type 에서는 불가능하다.

x의 b만 바꿔보려고 했는데,  되버린 모습.

 

하지만, 속성이 객체라면? 가능하다.

 

 

 

 

 

 

 

2. 객체를 통으로 바꿔버리면 덮어써진다. 객체의 수정만 불가능하다.

객체의 일부 값을 바꾸는건 불가능했다. 

 

x를 새로 선언하면 (메모리를 새로할당)

 

원 값은 날아간다.

 

 

 

 

 

 

 

3. freeze 부분에서 얕은 동결이 있는데, 얕은 동결관련 호기심

객체 속성안의 수정은 얕은 동결이기에 가능하다곤 했고, 

 

아빠.하나 를 새로운 객체나 새로운 값으로 수정은 불가능했다.

 

 

 

 

 

 

 

 

 

4. 당연하겠지만, Object.freeze된 객체를 다른 객체가 참조하여 수정하는것 또한 불가능하다.

안된다.

 

 

 

 

 

 

 

 

 

 

 

 

5. 높은단계로 봉인은 가능해도, 낮은단계로 해제는 불가능하다.

preventExtensions -> seal -> freeze 는 가능하고 제대로 동작한다.

freeze -> seal -> preventExtensions 는 불가능하다. freeze로 고정된다.

 

6. isExtensible, isSealed, isFrozen 으로 설정값을 확인가능하다.