TIL 11. JS reference data와 immutable

rahula·2021년 5월 13일

Immutable JavaScript Reference Type TIL

javascript

목록 보기

3/15

primitive data와 reference data

primitive type : 불변값

변수와 상수를 구분하는 성질은 변경 가능성이다. 변수와 상수를 구분 짓는 변경 가능성의 대상은 변수 영역 메모리이다. 반면 불변성 여부를 구분할 때의 변경 가능성의 대상은 데이터 영역 메모리이다.

primitive data type인 string, number, boolean, null, undefined, Symbol은 모두 불변값이다.

let b = 5;
let c = 5;

위의 코드를 차례대로 살펴보자.

변수 b에 숫자 5를 할당한다. 그러면 컴퓨터응 일단 데이터 영역에서 5를 찾ㅂ고, 없으면 그제서야 데이터 영역에서 공간을 하나 만들어 저장한다. 그리고 그 공간의 주솟값을 b라는 변수 공간의 값으로써 저장한다.
변수 c에 숫자 5를 할당한다. 데이터 영역에 5가 있으므로, 새로 공간을 만들 필요 없이 기존의 5의 주솟값을 변수공간 c에 할당한다.

불변값의 성질 : 한번 만들어진 값은 가비지 컬렉팅을 당하지 않는 한 영원히 변하지 않는다. 변경은 새로 만드는 동작을 통해서만 이뤄진다.

reference type : 가변값

차이점 : 객체에게는 객체의 property영역이 별도로 존재한다. 객체가 별도로 할애한 영역은 property 영역일 뿐, 데이터 영역은 기존의 메모리 공간을 그대로 활용하고 있다.
데이터 영역에 저장되는 값은 모두 불변값이다. 그러나 변수에는 다른 값을 얼마든지 넣을 수 있다. 바로 이 부분 때문에 reference type은 mutable하다라고 하는 것.

const obj1 = {
    a : 1,
}
const obj2 = obj1

obj1.a = 1000
obj2.a // 1000

여기서 obj1과 obj2는 주솟값이 같으므로 같은 것을 가리키게 된다. 데이터 자체가 참조이기 때문에, 같은 data 주소를 공유하는 한 한쪽의 proptery영역 값을 바꾸면 다른 쪽도 바뀐다. 데이터 영역에 실제 데이터 값이 들어가느냐 아니냐.

객체 변수 영역의 값이 바뀌면, 새로운 메모리 영역을 확보하고 새로 만드는게 아니라 기존의 영역의 값만 바뀐다.

가장 큰 차이점 : 모든 data type은 특정 주솟값을 참조한다. 그러나 primitive는 주솟값을 복사하는 과정이 딱 한번만 이뤄지고, reference type은 그 과정이 한 번 더 이뤄진다.

mutable과 immutable

const obj = {
    a : 1,
    b : 2
};

obj.a = 1000;

obj의 a라는 property값을 바꿔도, 변수 obj가 바라보고 있는 주소는 변하지 않는다. 즉 새로운 객체가 만들어진 것이 아니라 기존의 객체 내부의 값만 바뀐 것.

즉, reference type data가 가변값이라고 설명할 때의 가변은 그 데이터 자체를 변경할 경우가 아니라 그 내부의 property를 변경할 때에만 성립한다.

immutable object

원본 객체가 변하지 않아야 하는 경우가 종종 생긴다.

그렇다면 객체를 immutable하게 하려면 어떻게 할까?
아예 새로운 data를 할당하고자 하면, primitive type과 마찬가지로 기존 data는 변하지 않는다.
1. Object.freeze()
2. 새로운 object를 선언할 때 spread operator을 통해서 property값만 가져와서 새로운 주솟값을 할당하기.