[아티클 프로젝트 060] 콜 스택(Call stack)과 힙(Heap)

콜 스택(Call stack)과 힙(Heap)

자바스크립트 엔진이 자바스크립트를 실행할 때 원시 타입 및 참조 타입을 저장하는 메모리 구조

• 콜 스택 : 원시타입 값과 함수 호출의 실행 컨텍스트(Execution Context) 저장
• 힙 : 객체, 배열, 함수와 같이 크기가 동적으로 변할 수 있는 참조타입 값 저장

 

동작 원리

이미지 및 코드 출처 : https://github.com/baeharam/Must-Know-About-Frontend/blob/master/Notes/javascript/stack-heap.md

let a = 10;
let b = 35;
let arr = [];

function func() {
  const c = a + b;
  const obj = { d: c };

  return obj;
}

let o = func();

 

1. 전역 실행 컨텍스트(GEC, Global Execution Context) 생성 후 원시값은 콜 스택에 참조값은 힙에 저장

• 주소 값과 배열, 함수 값을 제외하고는 모두 원시 값(그리고 함수의 호출 값)이므로 콜 스택에만 저장된다.

• 이때 함수의 호출은 콜 스택에 주소 값은 저장되나 값이 없다.

• 주소 값과 배열, 함수의 값은 참조 값이므로 콜스택과 힙에 저장된다.

 

2. 함수 func()가 실행되면 새로운 함수 실행 컨텍스트(FEC, Function Execution Context)가 생성되며 원시 값이나 참조 값에 따라 각각 콜 스택, 힙에 동일하게 저장된다.

 

함수 컨텍스트의 원칙 4가지

• 전역 컨텍스트 생성 후 함수 호출 시 함수 컨텍스트가 생성된다.

• 컨텍스트 생성 시 컨텍스트 안에 변수객체(arguments, variable), scope, chain, this가 생성된다.

• 컨텍스트 생성 후 함수가 실행되는데, 사용되는 변수들은 변수 객체 안에서 찾고 없으면 스코프 체이닝으로 찾는다.

• 험수 실행이 마무리되면 해당 컨텍스트는 사라진다.

  • 다만 클로저일 경우에는 제외되며 전역 컨텍스트는 페이지 종료 시 사라진다.

 

 

 

3. 함수가 종료되면 함수 실행 컨텍스트는 사라진다.

 

 

4. 전체 코드 종료 후 페이지가 종료되면 전역 실행 컨텍스트가 사라진다.

이때 전역 실행 컨텍스트 제거에 따라 스택의 값이 없기 때문에 힙에서 참조하고 있던 값이 없어지므로 가비지 컬렉터에 의해 제거된다.

자바스크립트는 객체 생성 시 자동으로 메모리 할당, 참조된 값이 없으면 자동으로 가비지 컬렉션에 의해 메모리 해제가 된다.

++ 오해하면 안되는 것은 가비지 컬렉션이 자동으로 해제해준다고 해도 메모리 관리는 해줘야한다.

 

 

---

출처 및 참조

콜 스택(Call stack)과 힙(Heap)

https://github.com/baeharam/Must-Know-About-Frontend/blob/master/Notes/javascript/stack-heap.md

실행 컨텍스트

https://www.zerocho.com/category/JavaScript/post/5741d96d094da4986bc950a0