콜스택과 메모리 힙

2020. 3. 5. 09:57웹/Javascript

콜 스택(Call Stack)과 메모리 힙(Memory Heap)

 

 

메모리 힙(Memoery Heap)

  • 정보를 저장하는 공간

  • Memory Allocation 이 발생하는 공간

  • 객체는 대부분 구조화 되지 않은 메모리 영역인 힙 역역 내부에 할당

 

 

콜 스택(Call Stack) 

  • 실행 중인 코드를 트래킹하는 공간

  • 자바스크립트 코드 실행을 위해 제공된 싱글 스레드

  • 메모리 힙에서 작업 수행에 필요한 것을 찾아 수행하는 공간

 

 

 

                                                        Javascript Engine 내부 구조

                               

   이미지 출처 :    https://new93helloworld.tistory.com/358

 

                                           

 

 

 

 

콜 스택(Call Stack) 동작 과정

var value = "value1";

function printFunc() {
    var value = "value2";
    
    function printValue() {
        return value;
    }
    console.log(printValue());
}

printFunc();

단계 1)

자바스크립트 파일이 실행이되면 전역 실행 컨텍스트(Global Execution Context)가 가장 먼저 실행이 되면서, 이 영역에 anonymous 라는 함수가 콜 스택에 쌓임. 함수 이름이 anonymous 인 이유는 자바스크립트 파일의 이름이 현재 없기 때문.

 

 

단계 2)

printFunc 함수를 읽으면서 이 함수가 콜 스택에 두번째로 쌓이게 됨. 

 

 

단계 3)

변수 할당 과정이 이루어지며 메모리 힙을 참고하여 코드 실행에 필요한 변수, 함수 등의 위치를 참조하며 실행.

간단한 변수들은 콜 스택에 저장되고, 객체, 배열, 함수 등 복잡한 데이터 구조 값들은 메모리 힙에 저장.

 

 

단계 4)

printValue 라는 함수를 실행하기 위해 함수 내부로 이동하게 되며 콜 스택에 쌓이게 됨.

 

 

단계 5)

함수가 반환되면서 콜 스택에서 제거. 이 과정을 반복하며 전역 실행 컨텍스트 함수까지 콜스택에서 제거되면서 모든 수행이 종료.

 

콜 스택을 통해 현재 코드가 어디에 위치해 있는지 트래킹이 가능하며, 이 과정에서 메모리 힙을 참고하여 코드 실행에 필요한 변소, 함수 등의 위치를 참조하며 실행.

 

 

 

 

 

출처 

https://new93helloworld.tistory.com/358

 

' > Javascript' 카테고리의 다른 글

this 정체  (0) 2020.03.05
DOM(Document Object Model)  (0) 2020.03.05
Javascript Runtime  (0) 2020.03.05
브라우저 랜더링  (0) 2020.03.02
자바스크립트 엔진 - V8  (0) 2020.03.02