[JS] 불변성(Immutable) 이란?

 최근 '코어 자바스크립트'라는  책을 통해 자바스크립트의 기본적인 개념들을 다시 정리하고 있다. 얼마 전 '클로저'를 정리하는 과정에서 잘못 알고 있던 부분을 수정할 수 있던 좋은 기회가 되어서 다른 개념들에 대해서도 정리해보려고한다.

 

 내가 JS를 공부하면서 처음으로 불변성(Immutable)에 대해 고민해 본 것은 코딩 문제를 풀다가 오류를 만나 검색하던 중 '깊은복사와 얕은복사'라는 걸 만나게 된 때였다. 어떤 변수에 할당된 배열을 또 다른 변수에 할당시키고 값을 추가하거나 빼서 원래있던 변수에 할당된 배열을 건드리지 않으려는 의도였는데, 결과는 두 변수에 해당된 배열 모두 값이 바뀌어 있었다. 도무지 이유를 몰라 검색을 해보니 "배열은 Immutable한 값이 아니기 때문이다." 라는 딱 한 줄로 설명하고 있었다... 그리고 이를 해결하기 위한 방법으로 깊은 복사와 얕은 복사에 대한 설명이 있어서 제대로 이해하지 못한 채 그냥 배열, 객체는 이런식으로 다루어야 하나보다 정도로 정리하고 넘어갔던 기억이 난다.

 

 지금 다시 불변성에 대해 정리해보자면, 우선 단어의 뜻 그대로 '변하지 않는다.'가 맞다! 그런데 다른 의미의 '변하지 않는다'와 혼동하지 말아야 한다. JS를 다루면서 변수(let)와 상수(const)를 많이 쓰게 되는데 주로 어떤 값(변수?)에 새로운 값을 할당할 일이 발생한다면 변수를 사용하고 새로운 값을 할당할 일이 없거나 바뀌는 일이 없도록 하고 싶을 때 상수를 사용한다. 여기서 상수의 바꿀 수 없는 성질을 위의 Immutable 과 혼동할 수 있는데 이 둘을 명확히 구분할 필요가 있다. 

 

1. 불변성(Immutable) 이란?

 정확하지는 않지만 간단하게, 변수를 선언할 때 메모리 영역에서 어떤 작업을 수행하는지 표현하자면...

let a = 'abc';

위와 같이 선언했을 시, 컴퓨터는 메모리에서 비어있는 공간(1) 하나를 확보하고 그 공간의 이름(식별자)을  a라고 지정한다. 이 공간(1)에 'abc'라는 문자열을 저장하면 될 것 같지만!!! 실제로는 직접 저장하지는 않는다. 대신 이 문자열 데이터를 저장하기 위한 별도의 메모리 공간(2)을 다시 확보하고 그곳에 'abc'를 저장하고, 이 "메모리 공간의 주소"를 아까 변수를 위해 확보한 공간(1)에 저장한다.

a = a + 'def';

위의 재할당 명령을 내리면 어떻게 될까? 물론 결과가 a = 'abcdef'가 되는 것은 쉽게 알 수 있지만, 메모리영역에서 어떤 변화가 일어나는지 알아보자. 아까 문자열 데이터를 저장하기 위한 공간(2)에는 'abc'가 저장되어 있을 것이다. 그럼 이 공간(2)의 데이터가 'abcdef'가 되는 것일까? 그렇지 않다! a + 'def'의 결과는 'abcdef'가 되고 이 결과는 전혀 다른 새로운 메모리 공간(3)에 저장된다. 기존의 공간(2)에 'abc'는 메모리상에 그래도 남아 있는 것이다. 이렇게 변수에 값을 재할당을 한다고 해서 실제 메모리에 저장된 어떤 값을 변경하지는 않는다고 하여서 '불변성(Immutable)'이라 하는 것이다.

 

2. 상수(Constant) 의 변하지 않는 성질

 변수와 상수를 구분짓는 변경 가능성의 대상은 '변수를 저장한 메모리 영역'(1)이다. 즉 한 번 데이터 할당이 이루어진 변수 공간에 다른 데이터를 재할당할 수 있는지 여부가 관건. 즉 const abc = '1234' 했다면 abc = '5678' 등의 재할당 행위는 불가능하다는 것이다.