자바스크립트 실행 원리 - call stack

자바스크립트 비동기 실행원리를 찾아보다가 call stack과 event loop에 관련이 있는 것을 알았습니다. 그리고 공부한 내용을 정리했습니다. 총 2개의 글로 나누어 정리했고 이번 글은 call stack에 대해 다룹니다.

저는 자바스크립트를 업무로 쓰지 않고, 개인공부로만 사용하고 있어 틀린 부분이 있을 수 있습니다. 

 

자바스크립트를 누가 실행할까?

자바스크립트는 프로그래밍 언어입니다. 그러므로 자바스크립트 자체는 글자일 뿐 누군가가 글자를 해석해서 컴퓨터에게 명령을 해야하는데요. 이 역할을 자바스크립트 런타임 엔진이 수행합니다. 크롬 브라우저, nodejs 등 런타임 엔진을 구현했습니다. 저희는 무료로 자바스크립트 런타임 엔진을 사용해오고 있었습니다.

자바스크립트 런타임 엔진이 어떻게 자바스크립트 실행하는지는 너무나도 어렵습니다. 많은 CS(컴퓨터 과학)지식이 필요합니다. 아래 그림은 v8엔진의 동작원리인데 봐도봐도 너무 어렵네요.

참고자료:  https://v8.dev/blog/adaptor-frame

 

어려운 자바스크립트 실행과정을 정말 쉽게 풀어낸 세미나 영상자료가 있습니다. 저는 이 영상과 V8, MDN문서를 보고 공부했습니다.

https://youtu.be/8aGhZQkoFbQ

 

Call Stack이란?

비동기 실행 원리는 함수 실행방법과 관련있습니다. 비동기 실행의 의미는 비동기 함수를 실행하는 것과 같은 의미이기 때문입니다. 그래서 비동기가 아닌 일반 함수 실행하는 방법부터 파악하고 비동기 함수를 어떻게 실행하는지 공부할려고 합니다.

 

 

프로그램은 메모리에 로드되어 실행되고 운영체제가 메모리를 관리합니다. 운영체제는 프로그램이 사용할 메모리를 효율적으로 관리하기 위해 메모리 구조를 가지고 있습니다.  그 중 하나의 영역이 스택(stack)입니다.

 

이 글에서는 운영체제를 다루지 않으므로 스택메모리에 대해 자세히 다루지 않습니다. 저희가 관심있는 부분은 자바스크립트 함수가 호출될 때, 스택메모리의 변화입니다.

 

자바스크립트가 코드가 실행되고 메모리에 코드가 로드되면, 운영체제는 자바스크립트를 위해 스택을 할당합니다. 그리고 함수가 호출될 때, 할당된 스택 일정부분을 쪼개서 각 함수만의 고유한 스택영역(스택프레임)을 가지게 됩니다. 그리고 함수 호출 종료가 되면 함수의 스택영역을 없앱니다. 함수가 호출(call)할 때 생성되는 스택 영역을 Call stack이라고 부릅니다. Call stack을 디버깅을 하면 현재 런타임 엔진이 현재 실행하고 있는 함수를 확인할 수 있습니다.

 

Call Stack 실습

직접 함수를 호출하면서 Call stack 변화를 간단히 관찰하겠습니다. 디버깅 도구는 크롬 웹 브라우저를 사용합니다. 크롬 웹 브라우저에서는 Call stack을 디버깅 기능을 제공합니다.

 

예제는 저의 github repo에 있습니다

예제: 
https://github.com/choisungwook/javascript_async_example/tree/main/example_helloworld

 

실습을 위해 parcel패키지 설치가 필요합니다. 

npm install -g parcel

 

parcel설치 후, parcel명령어로 index.html을 실행합니다. 잘 실해이되면 http://localhost:1234로 접속가능합니다.

parcel index.html

 

call stack은 디버깅 도구(F12)에서 [Source → 소스코드 선택 → call stack]메뉴에서 볼 수 있습니다. console탭에는 예제 실행 결과를 볼 수 있습니다.

 

브레이브포인트를 설정해야 함수가 호출 할 때 Call stack을 볼 수 있습니다. 브레이브포인트 설정은 소스코드 맨 앞에 빈 공간을 클릭하면 됩니다. 저는 printHelloworld함수와 printHelloworld2함수 각 첫번째 줄에 브레이크포인트를 설정했습니다.

 

브레이크포인트 설정 후, 웹 브라우저를 새로고침(Ctrl + R)을 합니다. 새로고침하면 웹 브라우저가 디버깅모드로 전환되고 설정한 브레이크포인트에 까지 소스코드를 실행합니다.

 

Call stack을 보면 printHelloworld이름이 보입니다. 자바스크립트 런타임 엔진이 현재 실행하고 있는 함수가 printHelloworld함수라는 의미입니다.

 

단축키 F8번을 누르면 다음 브레이크포인트 포인트로 이동합니다. Call stack을 보면 printHelloworld함수가 보이지 않죠? 대신 printHelloworld2가 있습니다. printHelloworld함수 실행이 종료되어 Call stack에서 사라지고 현재 실행하고 있는 함수인 printHelloworld가 생성된 겁니다.

 

단축키 F8번을 2번 눌러 다음 브레이크포인트 포인트로 이동합니다. Call stack을 보면 printHelloworld와 printHelloworld2함수가 모두 있습니다. helloworld2함수가 helloworlrd함수를 호출했기 때문에 아직 elloworld2함수는 종료되지 않았습니다. 그러므로 call stack에 여전히 helloworld2가 남아 있는 겁니다.

 

단축키 F8을 누르면 더 이상 브레이크포인트가 없으므로 Call stack이 비어있습니다.