[Javascript]Javascript Immutability -2

1. 중첩된 객체 (Nested Object)

String은 위치와 값이 같이 저장되지만, Array는 각각 별도의 공간에 독립적으로 저장된다.

 여기서 Object.assign을 통해 복제를 하게 되면, 그 객체의 property 만 복제가 되는 것이다. 그리고 property의 value 값이 객체인 경우에는 값을 복제하는 것이 아니라 위치(reference)를 복제하게 된다.

 잘 복제가 되었다고 생각을 하게 되어 o2를 수정해도 이제 o1인 원본 데이터에 영향이 가지 않을 것이라고 생각을 해서, o2.score.push(3)의 명령을 내린다면? 아래와 같이 원본 데이터에 변화를 초래한다.

 따라서, property의 값이 객체인 경우에 객체를 수정할 때 원본 데이터에 영향을 주지 않으려면 별도로 할당되는 공간들을 포함해서 복제를 해야 한다.

 이를 위해 사용하는 것이 concat이다. Concat 은 원본을 복제하고 인자를 추가하는 기능을 가지고 있다. 아래의 경우에는 () 따로 인자를 주지 않았기 때문에 복제만 진행한 것이다.

 이 상태에서 push를 진행하게 되면, 이와 같이 진행되고 o1 인 원본 데이터에 대해서 불변함을 유지할 수 있게 만들어주는 것이다.

2. Object.freeze

 객체를 얼려서 불변함을 준다. (propety를 규제하는 것이다) 아래 예시에서 원본 데이터의 name 값은 'kim'이다. 여기서 kim을 유지하고 싶다면? Object.freeze를 이용하면 된다.

 property 를 얼림으로서, 원본 데이터의 name 값인 'kim' 이 유지되는 것을 볼 수 있다. 

 하지만 객체에 속한 배열의 경우도 객체이기 때문에, 그 객체의 value 값까지 다 유지시켜줄 수 없다. 왜냐하면 score의 value 값은 다른 공간에 별도로 저장되어 있기 때문이다. 따라서 원본 데이터 값이 변하게 되는 것이다.

 이럴 때는, o1 객체 뿐만 아니라 score까지 freeze 해주어야 한다. score를 freeze를 하니, push를 진행할 수 없다는 error 메시지가 나오게 된다.

3. const 와 freeze의 차이

 o1 이 가리키는 대상이 될 값을 바꾸려고 하는데, 이를 못하게 하는 것이 const이다.

그리고 freeze는 값 자체를 못바꾸게 하는 것이다.

 

 비유적으로 표현하면, 어딘가 목적지를 간다고 가정을 했을 때 const는 그 목적지를 가기 위해 설정하는 방향, freeze는 그 목적지 자체를 의미하는 것이다. 따라서 이 두 가지를 같이 사용할 경우에 변하지 않아야 할 데이터 값을 좀 더 단단하게 유지할 수 있다.