1-3. 변수 선언과 데이터 할당

자바스크립트의 구조

자바스크립트는 위 이미지와 같은 구조로 구성되어있다.

이번 글은 변수 선언과 데이터 할당에 관한 내용이므로 콜스택과 메모리 힙에 대해서만 다룰 예정이다.

콜스택, 메모리 힙이 무엇일까?

• 콜스택
  • 자바스크립트의 기본타입(원시타입)의 데이터가 저장되는 영역이다.
  • 변수명(식별자) 또한 이곳에 저장된다.
  • 스코프 체인과 this를 관리한다.
  • 코드 실행 순서를 관리한다.
• 메모리 힙
  • 참조 타입의 데이터가 저장된다.

변수 선언

아래 코드를 사용해 변수 a를 선언한다.

let a;
<!-- Code-1 -->

이 때 메모리에서는 어떤 일이 일어나는지 다음 그림을 통해 살펴보자.

Code-1이 실행되면 콜스택 영역에 변수의 식별자가 저장된다. 변수 a는 아직 초기화가 이뤄지지 않았기 때문에 값은 존재하지 않는다.

데이터 할당

그렇다면 데이터를 할당할 때는 메모리에서 어떤 일이 일어날까?

아래 코드는 a변수를 선언하고 그 안에 3이라는 숫자를 넣어 초기화하는 코드이다.

let a = 3;
<!-- Code-2 -->

Code-2가 실행되고 데이터가 할당되는 순서는 다음과 같다.

1. 콜스택 안에 있는 변수 영역 에서 빈 공간(@1002)을 확보한다.
2. 확보한 공간의 식별자를 a로 지정한다.
3. 콜스택 안에 있는 데이터 영역의 빈 공간(@2002)에 숫자 3을 저장한다.
4. 콜스택 안에 있는 변수 영역에서 a라는 식별자를 검색한다. (@1002)
5. 앞서 저장한 문자열의 주소(@2002)를 @1002의 공간에 대입한다.

왜 변수 영역에 값을 대입하지 않고 한 단계를 더 거칠까?

• 데이터 변환을 자유롭게 할 수 있음.

  만약 Code-2에서 선언한 3으로 초기화된 a변수를 ‘abc’라는 문자열이 담긴 변수로 변경하는 경우 아래와 같은 일이 일어남.

  

  변수a가 가리키는 주소값만 @2002 → @2003으로 변경해서 새로운 데이터를 넣어줌.

  만약 변수 영역에 바로 값을 저장했다면 숫자3에서 숫자5로 값을 변경해서 저장할 수는 있어도 숫자 → 문자열로 값을 바꿔서 저장할 수는 없다. 왜냐하면 숫자와 문자열은 차지하는 메모리 크기가 다르기 때문이다.

• 메모리를 효율적으로 관리하기 위함.

  만약 500개의 변수를 생성한 후 값을 모두 5로 초기화하는 상황이 있다고 가정하자.

  변수영역과 데이터영역이 나누어져있지 않다면 총 4000(500 * 8)byte가 필요하다.

  하지만 변수영역과 데이터영역을 따로 둔다면 변수 500개에 대한 주소만 저장하고 값은 하나만 저장해도 된다. 따라서 주소 공간의 크기를 2btye라고 한다면(정확한 크기를 찾아보려 했으나 못찾음) 1008(500 * 2 + 8)byte만 이용하면 된다.