1. 호출 스택
1-1 자바스크립트 엔진
호출 스택에 들어가기전에 먼저 자바스크립트 엔진에 대해 알아보자.
어떻게 보면 비동기에 대해 공부하기전에 알아야할 것 같지만 당장 필요성을 못느껴서 공부하지 못하거나 아예 그냥 존재를 몰라서 공부를 안하는 경우가 많다.
나도 단순히 코드만 작성하다가 비동기를 공부하면서 자바스크립트 엔진과 자바스크립트 동작원리에 대해 궁금해져서 공부를 시작했다.
자바스크립트 엔진(JavaScript engine)은 자바스크립트 코드를 실행하는 프로그램 또는 인터프리터이다.
위키에 있는 자바스크립트 엔진에 대해서 가져왔다. 이해 자체는 명료하게 되지만
엔진이 코드를 어떻게 실행하는 건지 궁금하다. 물론 이번 포스트에선 그게 목적이 아니니 이에 대해 공부한 건 따로 작성하고 간단하게만 작성해보겠다.
1-1-1 힙(Heap)
그림출처 : https://velog.io/@dalbodre_ari/Asynchronous-JavaScript-call-stack-macromicrotask-queue
자바스크립트 엔진은 힙과 호출스택으로 코드의 실행을 관리한다.
물론 이것만으로 웹을 실행하진 않는다. 다양한 Web APIs(DOM, setTimeout 등)과 함께 동작하며 이들을 태스크큐(Task queue)와 마이크로태스크큐(Microtask Queue)에서도 관리한다.
태스크큐와 마이크로태스크큐, 사진의 이벤트 루프에 대해선 다음 포스트에서 알아보도록 하자.
그렇다면 힙은 무엇일까??
사실 힙과 스택에 대해선 C언어를 공부할 때 이미 배웠었다.
당시 배웠던 걸 검색하지 않고 머리속에서 끄집어 내보겠다.
힙(Heap) 은 프로그래머가 직접 동적으로 메모리를 할당한다.
스택(stack) 과의 차이는 스택은 Int(4byte), Char(1byte) 와 같이 정적으로 정해진 데이터가 들어간다면 힙은 malloc 등을 이용하여 동적으로 프로그래머가 메모리를 할당한다.
정확한진 모르겠다. 하지만 당시에 어려워서 자주 공부했던 부분이라 자연스럽게 떠오른대로 적어보았다.
하지만 자바스크립트의 힙과 스택도 위에 정의한 것과 거의 비슷하게 동작하였다.
자바스크립트에서 힙(Heap) 은 객체 타입(객체, 배열, 함수) 등이 저장되며,
스택(Stack) 에 원시 타입 데이터가 저장된다.
C 와의 차이라면 C에선 배열의 크기를 정적으로 정해주면 배열이 스택에 담기지만
자바스크립트에서 배열은 가득 차면 동적으로 크기를 늘리기 때문에 힙에 저장된다.
원시타입과 객체타입에 대해선 https://velog.io/@tkdans312/javascript-primitive-vs-object
위의 사진은 힙에 데이터가 어떻게 저장되는지 굉장히 쉽게 보여준다.
위의 링크에서 원시타입과 객체타입이 어떻게 메모리에 저장되는지 자세히 설명했지만
이 그림을 통해서 다시 한 번 복습할 수 있을 것 같다.
1-1-2 호출 스택(Call-Stack)
스택(Stack)이란 자료구조 중 하나로서 LIFO(Last In First Out)를 따르는 자료구조이다. 스택에 가장 마지막에 넣은 자료가 가장 먼저 나온다라는 의미이다.
스택을 가지고 만든 호출스택은 그림을 보면서 이해하면 쉽다.
위의 코드는 아래와 같이 스택에 쌓인다.
참고로 아래의 Top은 스택에서 가장 마지막에 넣은 자료를 쉽게 빼기위해 마지막 자료만 저장해놓은 변수라고 생각하면 편하다.
- a 가 호출이 되었다. 그럼 a 를 호출스택에 넣고 a 를 실행한다.
- a 를 실행하는 도중 b 를 만나며 b 를 호출한다. b 를 호출스택에 넣고 실행
- b 를 실행하는 도중 c 를 만나며 c 를 호출한다. c 를 호출스택에 넣고 실행
- c 가 완료되면 c 를 호출했던 라인으로 돌아가 c 를 호출스택에서 제거한 후 b 를 실행
- b 가 완료되면 b 를 호출했던 라인으로 돌아가 b 를 호출스택에서 제거한 후 a 를 실행
- a 가 완료되면 a 를 호출했던 라인으로 돌아가 a 를 호출스택에서 제거
위와 같이 함수가 호출될 때 마다 호출스택에 함수가 추가되고, 함수의 실행이 종료되면 호출스택에서 제거한다.
※ 이때 스택에 할당된 공간보다 많은 공간을 잡아먹게되면 Stack Overflow 가 발생한다.
공부를 하다보니 뭔가 번뜩이는게 생각났다.
자바스크립트는 싱글 스레드로 동작한다고 했다. 즉 한 번에 한 가지의 일만할 수 있다.
하지만 만약 스택(Stack)이 여러개라면?
여러개의 스택에 함수를 나눠서 넣은 다음 동시에 실행시키면 되니 마치 멀티 스레드 처럼 동작한다. 아니 멀티 스레드로 동작한다.
스택의 개수가 스레드의 개수와 같다고 이해하니 뭔가 와닿는게 있는 것 같다.
이제 다음 포스트에서 목차 1-1-1 에 있는 그림에서 콜백 큐와 이벤트 루프에 대해 알아보자.
