[Javascript] 불변객체? 불변성? 그게 뭐에요?!!

Development/Javascript

이쥬딩 2020. 8. 13. 00:14

728x90

불변성이란?

사전적의미 그대로 변하지 아니하는 성질이다.

불변성이라는 개념을 이해하기 위해서는 자바스크립트의 데이터가 처리되는 과정을 이해해야한다.

자, 그럼 그 처리 과정을 대략적으로 살펴보겠다.

var a = 'abc';

필자는 a라는 변수를 선언하고, abc라는 데이터 값을 할당했다.

그럼 자바스크립 엔진은 메모리에 a라는 식별자를 가진 빈 공간을 마련하고, 주소를 할당한다.

그리고, 할당한 주소에 abc 라는 데이터 값을 저장한다.

여기서 한번 더 생각해야할 점은 a라는 식별자를 가진 메모리 공간에 바로 abc라는 데이터 값이 아닌, 데이터 값의 메모리 주소값을 할당한다는 점이다!

변수의 값을 변경하면 어떻게 될까?

var a = 'abc';
a = 'bbb';

선언해둔 a라는 변수에 bbb라는 데이터를 할당했다.

그럼 메모리에서 bbb라는 데이터를 찾고, 없으면 그제서야 공간을 하나 더 만들어 bbb를 저장한다.

그리고 그 주소를 a에 저장한다.

a의 값을 변경했다고 해도, 그 값을 변경한게 아니라 데이터 주소값이 변경된 것이다.

이처럼 한 번 만든 값을 바꿀 수 없는 것이 불변성이다.

※ 예외로 가비지 컬렉팅(동적으로 할당했던 메모리 영역중에서 필요없게된 영역을 해제하는 기능)을 당하지 않는 한 영원히 변하지 않는다.

하지만, 가변성인 데이터가 존재한다.

자바스크립트의 데이터 타입에 대해 알아보겠다.

자바스크립트의 데이터 타입은 기본형과 참조형으로 나뉜다.

기본형은 불변성을 띄고, 참조형은 가변성을 띈다.

※ 기본형은 숫자, 문자열, 불리언, null, undefinded 등이 있으며, 참조형은 객체, 배열, 함수, 날짜, 정규표현식 등이 있다.

그럼 이제 참조형 데이터를 변수에 할당하는 과정을 보겠다.

var obj = {
	a: 1,
	b: 'abc'
};

메모리에 obj라는 식별자를 가진 빈 공간을 마련하고, 주소를 할당한다.

그리고 그 주소에 여러 개의 프로퍼티로 이뤄진 데이터 그룹을 저장하기 위해 별도의 공간을 마련하고 그 영역의 주소를 저장한다.

프로퍼티의 값을 변경하면 어떻게 될까?

var obj = {
	a: 1,
	b: 'abc'
};

obj.a = 2;

obj의 a 프로퍼티의 2를 할당하면 obj가 바라보고 있는 주소 b3030가 변경되는게 아닌 기존의 내부의 값만 바뀐다.

바로 이 부분 때문에 참조형 데이터는 가변값이라고 하는 것이다.

※ 참고로, 참조형 데이터 자체를 변경할 경우는 불변값이고 그 내부의 프로퍼티를 변경할 때만 가변성이 성립된다.

자바스크립트 내에서 불변성의 대한 중요도가 높아지고 있다.

불변성을 유지하기 위해 spread 연산자를 사용하거나, immer 라이브러리 등을 사용할 수 있다.

이에 대한 내용은 다른 포스팅에서 자세히 다루겠다.

728x90