본문 바로가기

WEB/JavaScript

[JS] 메모리 힙과 콜스택

자바스크립트 엔진이 구동되면서 코드를 읽고 실행하는 과정에서 아주 중요한 두가지 단계가 있는데.

  1. 정보(ex. 변수, 함수 등)를 특정한 장소에 저장하는 것
  2. 실제 실행되고 있는 코드를 트래킹하는 작업(실행 컨텍스트)

Memory Heap

Memory Heap

메모리 힙(Memory Heap)은 변수, 함수 저장, 호출 등의 작업이 발생하여 아래 내용들이 진행되는 공간이다.

어느 언어든지 메모리 생명주기는 비슷하다.

위 이미지로 예를 들자면 자바스크립트 코드에서 var num = 20; 이라는 구문이 있을때 "박스하나를 주고 그 박스에 num이라는 라벨을 붙이고 20을 넣어줘" 같은 말이다.

 

  1. 필요할때 할당한다. (allocate, 할당)
  2. 사용한다. (읽기, 쓰기) (use, 사용)
  3. 필요없어지면 해제한다. (release, 해제)

C/C++ 같은 저급언어에서는 일일이 메모리 관리를 프로그래머가 해주어야 하지만 보통 고급언어들은 비슷하게 저런 방식으로 처리된다.

Call Stack

Call Stack

콜 스택(Call Stack)은 메모리에 존재하는 공간 중의 하나로, 코드를 읽어내려 가면서 수행할 작업들을 밑에서부터 하나씩 쌓고, 메모리 힙에서 작업 수행에 필요한 것들을 찾아서 작업을 수행하는 공간이다. 이런 구조를 LIFO(선입후출)구조라고 한다. 자바스크립트로 설명한 게시글을 참조하면 좋을 듯 하다.

 

콜 스택 과정에서 계속 콜스택 위로 쌓이기만 할 경우 콜스택의 한정된 공간의 크기를 넘어서게 되는데, 이를 스택 오버플로우(Stack Overflow)라고 한다.

 

function inception() {
  inception()
}

inception()

 

예를들어 위 함수처럼 자기를 계속해서 호출하는 경우가 스택 오버플로우가 나는 대표적인 원인이다.

'WEB > JavaScript' 카테고리의 다른 글

[JS] 이벤트 루프(Event Loop)  (0) 2021.06.07
[JS] 자바스크립트 동작원리  (0) 2021.06.07
[JS]실행 컨텍스트(Execution Context)  (0) 2021.06.04
[JS] Promises & async & await  (0) 2021.04.26
[JS] 리덕스(redux)가 무엇인가?  (0) 2021.04.26