자바스크립트에서 불변성은 값이 변경될 수 없는 속성을 의미한다. 프로그래밍 언어에서 변수에 값을 할당한다는 것은 메모리에 값을 저장하고 변수가 그 메모리 주소를 가리키는 것을 의미한다. 자바스크립트의 원시타입들은 모두 불변성을 띈다.
불변 데이터는 한번 생성이 되면 그 뒤에는 변하지 않는다. 한번 메모리 영역에 저장된 값은 변경이 불가능하며, 다른 값으로 바꾸는 경우 값이 바뀌는 것이 아닌 완전히 새로운 값을 만들어 변수가 새로운 메모리 주소를 가리키게 하는 것이다.
let a = 10;
let b = a;
a = 20;
console.log(a,b); //20 10
변할 수 있는 데이터는 한번 생성된 이후에도 값이 변경될 수 있는 데이터를 의미한다. 자바스크립트에서 원시 타입에 외에 모든 타입들은 변수에 할당된 값을 변경하는 것이 가능하다. 이는 변수가 메모리 주소를 그대로 가리키면서도 메모리에 저장된 값을 바꾸는 것이 가능한 것이다.
let arr = [1, 2, 3];
arr.push(4);
console.log(arr); //[1, 2, 3, 4]
예를 들어 배열에 새로운 값을 추가할 때, 배열 객체가 가리키는 메모리 주소는 변경되지 않는다. 따라서, 배열은 변할 수 있는 데이터라고 할 수 있다.
const
키워드를 사용하는 것이다. const
로 선언된 변수는 변경할 수 없으므로 일반적으로 상수에 사용된다. 새로운 값을 재할당하려는 경우, 이를 사전에 막고 에러를 통해 변경 할 수 없음을 알려준다. mutable
의 경우, const
를 사용하더라도 값을 변경하는 것은 가능하다. 메모리 주소는 그대로 이기 때문이다. 만약 새로운 객체를 생성하여 이를 재할당하려는 경우에는 원시 타입과 동일하게 에러를 나타낸다.
const a = { name : "kakao" };
a.name = "naver";
console.log(a) // { name : "naver" };
a = { name : "samsung" } // Assignment to constant variable.
보편적으로는 스프레드 문법을 사용하는 것이다. 스프레드 문법을 사용하는 경우 새로운 객체를 생성하기 때문에 불변성을 유지하는 것이 가능하다. 단 스프레드 문법은 1 레벨 깊이에만 유효하게 동작하므로, 객체 내부의 mutable 데이터의 불변성까지 유지하지는 못하는 점을 기억하자.
자바스크립트 라이브러리 중에는 이러한 불변성을 유지를 도와주는 라이브러리가 있다. immer
이를 활용하는 것도 하나의 방법이다.