[JS] 변수는 메모리에 어떻게 저장될까?(기본형, 참조형)

JavaScript에서 변수는 var, let, const 키워드를 통해 선언할 수 있습니다.

 

변수명(식별자)은 A - Z, a - z, 0 - 9, _(underscore), $로 구성할 수 있습니다. 하지만 숫자로 시작할 수는 없습니다. 추가적으로 한글로 변수명을 만들 수 있습니다.

 

변수는 어떠한 값이 저장되어 있는 공간입니다. 이 변수에는 숫자, 문자 등 다양한 값을 저장할 수 있습니다. JS에서는 값의 형태에 따라 이름이 있고 이를 자료형이라고 합니다. 크게 기본형(원시형, Primitive), 참조형(Reference) 두 가지 자료형으로 나누어집니다.

 

기본형: string, number, bigint, boolean, undefined, null, symbol 총 7가지 종류.

참조형: 기본형을 제외한 모든 타입. array(배열), object(객체), function(함수)가 대표적인 참조형이다.

 

둘로 구분되는 기준은 값의 저장 방식과 불변성의 차이입니다.

 

기본형의 경우 값의 주소를 바로 복제하기 때문에 불변성이 있고, 참조형의 경우 값이 담긴 주소들의 묶음의 주소를 복제하기 때문에 불변성이 없습니다.

 

불변성은 상수(const)와는 조금 다른 개념으로 단순하게 변수에 담긴 값이 변하지 않는 것을 말하지 않습니다.

let pri = 1;
let ref = [2,3,4];

위의 코드를 간단하게 표로 살펴보면 아래 표와 같은 형태로 존재한다고 생각할 수 있습니다. 이해하기 쉽도록 만들어진 표로 실제 메모리에 저장된 모습과는 다릅니다.

이름	pri	ref
값	@5001	@5005
주소	1001	1002

변수 pri와 ref는 각각 주소를 가지고 있습니다. 기본형인 pri는 값의 주소 @5001을 바로 복제하고, 참조형인 ref는 값의 주소들의 묶음인 주소 @5005을 복제해 가지고 있습니다.

값	1	2	3	4	@7002~
주소	5001	5002	5003	5004	5005

값	@5002	@5003	@5004
주소	7002	7003	7004

 

이제 변수의 값을 변경해 보겠습니다.

pri = 2;

이름	pri	ref
값	@5002	@5005
주소	1001	1002

다음과 같이 pri 변수의 값을 변경하게 되면 메모리에서는 주소 @5001에 있던 값인 1인 2로 변하는 것이 아닌 pri의 값인 @5001이 값 2의 주소인 @5002로 변하게 됩니다. 이는 실질적으로 주소 @5001의 값이 변경된 것이 아닌 가리키는 주소가 변경되었기 때문에 불변성이 있다고 표현합니다.

 

이번에는 ref의 변화를 살펴보겠습니다.

ref[0] = 3;

이름	pri	ref
값	@5002	@5005
주소	1001	1002

값	1	2	3	4	@7002~
주소	5001	5002	5003	5004	5005

값	@5003	@5003	@5004
주소	700	7003	7004

ref 내부의 값을 변경했습니다. 이때 ref의 값 @5005에는 변경이 없지만 내부의 주소 @7002의 값이 @5002 → @5003으로 값이 변경되었습니다. 이는 pri 때와는 다르게 주소 @7002에 대한 값이 변경되었기 때문에 불변성이 없다고 표현합니다.

 

조금 쉽게 이해하기 위해서는 '주소에 해당하는 값이 변경되지 않으면 불변성이 있고', '주소에 해당하는 값이 변경되면 불변성이 없다'라고 이해하셔도 좋을 것 같습니다. 또는 참조형의 경우 값이 아닌 또 다른 주소를 가리키기 때문에 불변성이 없다고 이해하셔도 괜찮을 것 같습니다.

 

추가적으로 사용되지 않는 데이터 위에서의 예를 들면 @5001의 경우 가비지 컬렉터가 알아서 관리해 삭제해 줍니다.

 

참고

문법과 자료형, MDN, 2024.11.13

자료형, 모던 자바스크립트, 2024.11.13

javascript3 기본 3(기본형, 참조형 데이터와 불변성), 밍고의 서식지, 2024.11.13

[js] 기본형 데이터와 참조형 데이터 feat 코어자바스크립트, 거념, 2024.11.14