Published 2022. 6. 30. 22:24

[JS] 불변성과 가변성

📚 데이터 타입 두 가지

자바스크립트에선 두 가지의 데이터 타입이 존재한다.

원시 타입은 데이터의 가장 작은 단위로 더 이상 쪼개질 수 없고, 하나의 데이터만을 가진다.

참조 타입은 원시 타입을 모아둔 집합으로 원시 타입을 제외한 나머지는 모두 참조 타입이다.

그렇다면 불변성과 가변성은 무엇일까?

원시 타입은 불변성을 띠고, 참조 타입은 가변성을 띤다.

아래에서 알아보자.

불변성을 얘기하기 전에 데이터의 저장 방식을 살펴보자.

let a = 1;

변수 a를 선언하고 1을 할당했다.

이때 메모리에는 어떤 일이 발생할까?

a를 위한 새로운 메모리를 할당 받은 후 값 1을 저장할 것이다.

let a = 1;
a = 2;

이제 a에 새로운 값을 할당하면 어떻게 될까?

2는 새로운 메모리에 저장되고, a는 새롭게 할당 받은 메모리를 가리키게 된다.

a에 2를 할당한다고 해서 먼저 할당되었던 1이 변경되지 않는다.

즉 이처럼 한 번 생성된 값을 변경할 수 없는 것을 불변성이라고 한다.

그럼 모든 데이터가 불변성인 걸까?

이제 가변성을 띠는 데이터 타입을 알아보자.

가변성을 얘기하기 전에 오브젝트 먼저 살펴보자.

const obj = {
	name: haesa,
	age: 22,
};

변수 obj에 name과 age를 key로 가지고 있는 오브젝트를 할당했다.

메모리에는 어떤 일이 발생할까?

obj에는 오브젝트의 값 그 자체가 할당되는게 아니라 오브젝트가 저장된 메모리의 주소, 즉 참조값이 할당된다.

const obj = {
	name: haesa,
	age: 22,
};

const obj2 = obj;

새로운 변수 obj2를 선언하고 obj를 할당하면 어떻게 될까?

obj2에는 obj가 가지고 있는 참조값이 복사된다.

여기서 오브젝트 자체가 복사된 후, 새로 생성된 오브젝트의 주소값이 할당되지 않는 이유는 자바스크립트가 얕은 복사를 하기 때문이다.

얕은 복사(Shallow Copy)는 이전 게시글에 정리해뒀으니 참고하면 좋을 것 같다.

→ 위 예제들에서 알아봤듯이 변수에 오브젝트를 할당하면 오브젝트의 값이 아닌 그 참조값이 할당된다는 걸 알아두자.

obj.age = 20;

이제 obj.age에 새로운 값을 할당해보자.

메모리는 어떻게 변경될까?

오브젝트의 프로퍼티에 새로운 값이 할당되는 경우, 변수가 가진 참조값으로 오브젝트에 접근한 후 프로퍼티를 변경하게 된다.

원시 타입과는 달리 참조 타입은 처음 생성된 데이터가 변경되었다.

이와 같은 성질 때문에 참조형 데이터는 가변성을 띠게 된다.