[Javascript]변수와 메모리

지난 포스팅에서 변수에 관해 살펴봤습니다.

이번 포스팅에서는 변수가 메모리에 어떤 방식으로 저장이되며, 식별자는 어떻게 변수를 참조하는지 알아보겠습니다.

 

let a = 1;

위 코드 처럼 a 라는 변수를 선언했습니다.

이 변수는 메모리에 어떤 형태로 저장이 될까요?

1001	1002	1003	1004
1

실제 메모리는 접근이 불가능하여 가상의 메모리가 이런 형태로 있다고 생각하고 봐주시면 됩니다.



위에 1001 이라는 메모리 셀에 1 이라는 값이 들어가있습니다.

식별자는 이 1001 이라는 위치를 'a' 라는 식별자로 기억합니다.

그래서 식별자(변수명) a 를 참조하면 이 식별자가 가리키고있는 위치 메모리 1001에 접근합니다.

 

그런데 저번 포스팅에서는 자바스크립트에는 하나의 값만 저장하는 데이터 타입이 아닌, 여러가지 값을 다룰 수 있는 객체나 배열이 있다고 했습니다.

그러면 객체나 배열은 어떤 방식으로 데이터를 참조할까요?

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

위 코드 처럼 객체 리터럴을 통해 객체 타입을 선언했습니다.

 

 

데이터 메모리 영역

1001	1002	1003	1004
1	2

변수 메모리 영역

2001	2002	2003	2004
name: obj, value: @3001 ~ @3002

객체 obj의 변수 메모리 영역

3001	3002	3003	3004
name: a, value: @1001	name:b, value: @1002

 

객체는 일반적인 변수의 참조와 조금 다릅니다. 여러번 거쳐 참조를 하게 됩니다.

먼저 변수 메모리에 obj 라는 값이 있고, 또 이 객체 obj의 변수 메모리 영역이 따로 있다고 가정해봅시다.

객체obj는 'a', 'b' 두가지 key값을 가지고 있습니다. 또 이 키에는 각각의 값(value) 1, 2 가 할당됐습니다.

생성된 객체 메모리 영역에 각각의 메모리에 a와 b를 넣습니다.

또 이 a와 b가 실제 값 1과 2가 담겨져 있는 메모리를 참조합니다.

 

이렇게 객체는 여러번의 참조 과정을 거쳐서 값을 할당받게됩니다.

obj.a에는 1 obj.b에는 2가 각각 할당됩니다.

 

이렇게 참조를 거쳐서 값을 가져오는 자료형을 참조타입(Referrence Type)이라고 합니다.

 

원시타입(불변값)과 참조타입

이전 포스팅에서 자바스크립트의 7가지 대표적인 데이터 타입에 대해 설명했습니다.

Number, String, Null, Undefined, Symbol, Object

이렇게 7가지 데이터 타입이 있는데 이 타입을 두 가지 분류로 나누면 원시타입과 참조타입으로 나눌 수 있습니다.

이를 나누는 기준에는 위에서 살펴본 데이터 메모리 영역에서 어떻게 값을 가져오는지에 따라 나뉘게됩니다.

위에서 살펴본 내용처럼 객체(Object)는 참조형 타입의 데이터 타입이었습니다.(배열도 동일)

 

그러면 나머지 6가지 값은 왜 원시타입(불변값) 이라고 하는지 알아보겠습니다.

let a = 'a';
a = 'abc';

위 코드처럼 문자열 a를 할당한 식별자 a 가 있습니다.

이 식별자에 문자열 abc를 재할당했습니다.

그러면 메모리에서는 어떻게 이 값을 바꾸는지 알아보겠습니다.

1001	1002	1003	1004
abc

일반적으로 생각하면, 원래 있던 1001의 주소에 담긴 a를 abc로 바로 변경할거라 생각이 듭니다.

 

 

하지만 그렇게 동작하지 않습니다.

1001	1002	1003	1004
a	abc

기존의 1001주소에 담겨있던 a는 그대로 놔두고, 새로 1002주소에 abc를 만든 후, 식별자 a의 참조 주소를 1001에서 1002로 변경합니다.

이렇게 한 번 선언된 값은 바뀌지않고, 새로운 메모리 주소에 값을 만들어 메모리 주소의 참조를 변경해줍니다.

처음에 선언된 값은 바뀌지 않는 불변의 성질을 갖게됩니다. 이런 특징이 원시타입(불변값)의 특징입니다.

 

위에서 언급한 참조타입 이외의 모든 데이터 타입들 즉 원시타입은 이러한 불변의 성질을 갖게되므로 불변값(immutable value)이라고 불립니다.

 

그러면 남은 1001주소에 담긴 값 a는 어떻게 될까요?

 

가비지 컬렉터(garbage collector)

자바스크립트 엔진 내부에서는 가비지 컬렉터가 동작합니다.

이 가비지 컬렉터는 위의 메모리 영역에서 1001에 담긴 a와 같이, 참조하는 곳이 없는(참조 카운트가 0인)값들을 찾아서 메모리를 정리하게됩니다.

이 가비지컬렉터가 동작하므로 낭비되는 메모리가 없도록 관리해주는 역할을 합니다.

 

이 포스팅은 모던 자바스크립트 딥다이브 책을 기반으로 작성했습니다.