[Javascript] Call stack / Heap

김택수·2022년 2월 24일

자바스크립트 엔진이 자바스크립트를 실행할 때 원시타입 및 참조타입을 저장하는 메모리구조에는 Call stack과 Heap 두가지가 있다.

Call stack = 원시타입 값과 함수 호출의 실행 컨텍스트(Execution Context)를 저장.
Heap = 객체, 배열, 함수와 같이 크기가 동적으로 변할 수 있는 참조타입 값을 저장.

원시타입 값(Boolean, String, Number, null, undefined, Symbol)
실행 컨텍스트는 아래에서 다시 설명.

동작원리를 예제문과 순서로 정리했다.

// 예제문
let a = 10;
let b = 35;
let arr = [];
function func() {
  const c = a + b;
  const obj = { d: c };
  return obj;
}
let o = func();

Step 1. 전역 실행 컨텍스트(GEC) 생성 후 원시값은 Call Stack / 참조값은 Heap에 저장된다.

a = 10; 로 선언되었기 때문에 Call Stack에 메모리가 할당되고(주소생성) 값(10)이 바로 할당된다.
b = 35; 로 선언되었기 때문에 Call Stack에 메모리가 할당되고(주소생성) 값(35)이 바로 할당된다.
arr = []; 로 선언되었기 때문에 Heap에 메모리가 할당되고(주소생성) 값([])을 저장한다. 그 후에, Call Stack에 할당된 arr의 메모리는 값으로 Heap에 저장된 arr의 메모리주소를 참조한다.
func은 함수로 선언되었기 때문에 Heap에 메모리가 할당되고(주소생성) 값(function() {})을 저장한다. 그 후에, Call Stack에 할당된 func의 메모리는 값으로 Heap에 저장된 func의 메모리주소를 참조한다.
o는 함수를 호출하는 실행컨텍스트이며, 아직 func함수 내부에서 메소드가 진행되지 않았기 때문에 메모리만 할당되고 값은 존재하지 않는다.

c = a + b;로 선언되었기 때문에 연산하여 45의 값을 그대로 가지게 된다.
(c = 45; 와 같게 되므로)
obj = {d : c}로 선언된 객체이기 때문에 obj는 Call Stack에 메모리가 할당되고 값으로는 Heap에 저장된 {d : c}의 메모리주소를 참조한다.
(연산하여 {d : 45}가 됨)