[고급 자바스크립트] 객체 확장과 객체 동결

자바스크립트의 객체 지향 프로그래밍에서 자주 사용되는 패턴을 소개하고자 합니다. 먼저 객체 확장을 관리해봅시다.

Object.defineProperty()

Object의 프로토타입 메서드인 defineProperty를 사용하면 프로퍼티의 초기값, 열거, 할당, 서술자 변경을 관리할 수 있습니다. 해당 패턴을 활용하면 객체 참조 과정에서 예상치 못한 데이터 변화를 제어하거나 초기값을 설정해 코드 관리에 안정성과 성능을 동시에 높여줄 수 있습니다.

---

Object.preventExtensions()

이번엔 객체의 확장을 막는 쉬운 방법을 알아봅시다. Object의 프로토타입 메서드인 preventExtensions를 사용하면 객체의 확장을 제어해 I/O 과정에서 객체의 형태가 달라지는 것을 관리할 수 있습니다.

preventExtensions은 확장을 제어하는 것입니다. 그렇기 때문에 이미 선언된 프로퍼티에 대한 재할당은 정상적으로 이뤄집니다.

---

Object.freeze()

현대 자바스크립트 문법에서는 const 문법을 사용해 상수를 관리하긴 하지만 객체 형태로 된 값은 재할당이 가능합니다. 그럼 이번엔 정의한 객체를 절대 변화되지 않도록 동결해봅시다.

사용방법은 매우 간단합니다. Object.freeze()의 파라미터로 객체를 전달하면 동결되어 그 어떤 할당, 확장, 서술자 변경 모두 불가능하게 됩니다. 하지만 Object.freeze()로도 동결하지 못하는 경우가 있는데 어떤 경우일까요? 바로 객체 안에 객체가 있는 경우입니다.

const 문법과 유사하게 객체 안에 객체를 담은 프로퍼티가 있는 경우, 해당 프로퍼티 값의 동결은 이뤄지지 않습니다. 이러한 동결을 우리는 얕은 동결이라고 부릅니다. 만약 객체 안의 모든 객체 값을 동결해 값의 변화를 막고자 한다면 객체를 순회하며 동결하는 재귀 동결 함수를 만들어 사용해야 합니다.

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global\_Objects/Object/freeze

이제 동결 및 얕고 깊은 동결까지 알아봤습니다. 그런데 객체가 동결되어있는지 여부는 어떻게 확인할 수 있을까요? 그리고 어떻게 해동시켜줄 수 있을까요?

동결 여부를 확인하는 것은 **Object.isFrozen()**을 사용하면 Boolean을 리턴해 확인할 수 있습니다. 그럼 해동은 가능할까요? 자바스크립트 문법을 통한 해동은 불가능합니다. 즉 단방향으로만 작동되는 명령입니다. 그러므로 동결된 데이터를 해결하기 위해서는 객체 자체를 순회하며 복사한 후에 동결이 적용되지 않은 새로운 객체를 사용해 데이터를 관리하는 방식이 사용됩니다.

---

글에서는 표현하지 않았지만 객체의 제약을 거는 데에는 preventExtensions, freeze 이외에 seal도 함께 사용됩니다. Object.seal()은 preventExtensions와 freeze의 중간 수준의 잠금이라고 생각하시면 됩니다.

[Object.seal() - JavaScript | MDN

Object.seal() 메서드는 객체를 밀봉합니다. 객체를 밀봉하면 그 객체에는 새로운 속성을 추가할 수 없고, 현재 존재하는 모든 속성을 설정 불가능 상태로 만들어줍니다. 하지만 쓰기 가능한 속성의

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global\_Objects/Object/seal](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/seal) 

이번엔 객체에 제약을 걸어 데이터를 보호하거나 재할당을 방지하는 방법을 알아봤습니다. 동결된 데이터나 단방향으로만 흐를 수 있는 데이터는 FLUX 패턴에서도 사용되고, 많은 모듈과 라이브러리에서 사용됩니다. 상태 관리에 관심이 많거나 입출력 과정에서 데이터 훼손을 방어, 또는 모듈 제작에 사용하시면 큰 도움이 되시리라 생각합니다.

웹 개발, 블록체인 컨트렉트 개발 문의:

[플렉스웹(FLEXWEB) - 반응형 웹사이트 전문 개발사

브랜딩 웹사이트, 기업용 웹사이트, 스타트업 프로토타이핑 웹서비스 제작 전문 개발사 플렉스웹입니다.

https://flexweb.io](https://flexweb.io)