[JavaScript] 변수 선언 및 할당할 때 메모리 영역 관리 방법에 대해 알아보자

변수란 ?

컴퓨터 프로그래밍에서 변수(variable) 또는 스칼라(scalar)는 아직 알려지지 않거나 어느 정도까지만 알려져 있는 양이나 정보에 대한 상징적인 이름이다. 컴퓨터 소스코드에서의 변수 이름은 데이터 저장 위치와 그 안의 내용물과 관련되어 있으며 이러한 것들은 프로그램 실행 도중에 변경될 수 있다.

컴퓨터 환경에서 변수는 반복적인 과정 안에서 이용할 수도 있다. 이를테면 한 장소의 값을 할당한 뒤 어느 곳에서 사용한 다음 새로운 값으로 다시 할당하고 같은 방법으로 다시 사용할 수도 있다. 

컴파일러는 변수의 상징적인 이름을 데이터의 실제 위치로 치환해야 한다. 변수 값, 형, 위치는 일반적으로 유지되는 반면 위치에 저장되어 있는 데이터는 프로그램 실행 도중 변경될 수 있다.

- 위키 백과 -

 

 

---

 

 

정리하자면, 변수는 결국 변할 수 있는 데이터를 의미한다. 데이터는 숫자, 문자열, 객체, 배열 모두 포함하는 개념이다.

 

아래와 같이 변수 a가 선언되어 있다. 메모리에서는 어떻게 할당이 될까?

const a;

위와 같이 메모리 공간중 임의의 영역에서 a 라는 변수를 할당해준다. 선언된 a 변수는 값이 할당되지 않은 상태로 변수 선언만 된 채로 메모리 공간을 차지하고 있다.

 

그렇다면 아래와 같이 할당 한다면 어떨까?

let a;           // 1-1. 변수 선언
a = 'abc';       // 1-2. 데이터 할당
 
const a = 'abc'; // 2-1. 변수 선언과 동시에 데이터 할당

 

위에 a 를 먼저 선언하고 a 에 값을 할당하는 행위나 변수 선언과 동시에 값을 할당하는 행위는 똑같다. 이 과정을 아래 메모리 구조를 살펴보면서 확인해보자

메모리 구조를 살펴보면 데이터 영역에 'abc' 라는 값을 할당 후 해당 주소를 1003 메모리 번지에 값으로 주소값을 할당한다. 생각해보면 이상한 구조이다. 변수 영역 1003의 값 안에 'abc' 값을 저장하면 효율적일듯 싶은데 굳이 'abc'는 주소 5004에 저장하고 주소 1003에서 값을 주소 5004를 저장하여 바라보는 구조를 만들었을까?

 

 

---

 

 

변수 영역과 데이터 영역의 분리한 이유는 왜일까??

 

우리는 프로그래밍을 하다보면 같은 값을 할당해야하는 경우가 생길것이다. 그것이 1~2개라면 상관없겠지만, 만약 위의 예시처럼 'abc'라는 string 값을 50000개의 변수에 할당한다고 생각해보자.

그렇다면 50000개를 선언했을 때 변수가 선언된 메모리 영역에 값을 할당하는 경우가 생긴다면 50000개를 모두 메모리에 올려놓아야한다. 그렇다면 엄청난 부하가 오지 않을까? 하지만 데이터 영역을 분리하여 주소 값만 변수 영역의 값에 할당하게 된다면 데이터 'abc' string 하나만 선언하고 변수 50000개의 값 주소에 참조만 하면 된다.

 

직관적으로 비교해보자. 자바스크립트의 경우 숫자형 데이터 8바이트(64비트), 한글은 2바이트(16비트), 영어는 1바이트(8비트)이다. 

계산의 편의상 숫자 5라는 값을 10000개의 변수에 할당하고 각 변수 영역을 위한 크기가 2바이트라고 생각하고 비교해보자.

변수영역과 데이터 영역 분리 했을 경우 : (10000개 * 2바이트) + 8바이트 = 20,008바이트 사용한다.

변수영역과 데이터 영역 분리 안했을 경우 : (10000개 * 2바이트) + (10000개 * 8바이트) =  100,000바이트 사용한다.

위의 예시처럼 한개씩 모두 메모리에 올려서 자리를 차지하는것에 비해 엄청난 효율을 보여줄 것이다.

 

 

---

 

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

 

값을 변경하면 저장했던 주소에 새로운 값을 저장하는 것이 아니라 새로운 메모리 공간을 만들어 저장하고 그 주소를 변수 공간에 연결한다.

 

 

---

 

 

 

더이상 사용되지 않는 값을 어떻게 될까??

 

할당된 메모리가 더 이상 필요가 없게 되면 저수준 언어(C 같은 언어)에서는 개발자가 직접 결정하고 해제하는 방식을 사용한다. 하지만, 자바스크립트와 같은 고수준 언어들은 "가비지 콜렉션(GC)"이라는 자동 메모리 관리 방법을 사용한다. 가비지 콜렉터의 목적은 메모리 할당을 추적하고 할당된 메모리 블록이 더 이상 필요하지 않게 되었는지를 판단하여 회수하는 것이다. 물론, 이러한 자동 메모리 관리 프로세스가 궁극의 방법은 아니다. 왜냐하면 어떤 메모리가 여전히 필요한지 아닌지를 판단하는 것은 아주 어려운 비결정적 문제이기 때문이다.

 

결론적으로, 가비지 콜렉터가 아래의 그림처럼 필요 없는 메모리는 회수하게 된다.

 

 

---

 

 

 

 

 

referance

* 변수 (컴퓨터 과학) - 위키백과

* 자바스크립트의 메모리 관리

* [JS] 원시형 타입 변수 사용시 메모리는 어떻게 작동할까?

* JavaScript - 변수를 선언하고 할당해보자! (메모리 영역의 과정)

* [자바스크립트] 콜스택/메모리힙 구조, 데이터 저장/참조 원리

* [Core JavaScript] #1 변수 선언과 데이터 할당 시 메모리 영역의 변화

* [기초] 메모리와 데이터, JS에서