Javascript 동작 원리 파악하기

들어가며

동작 원리를 파악하기에 앞서 짚고 넘어가야 할 Javascript의 특징을 먼저 알아보려 합니다.
바로 Javascript가 싱글쓰레드 언어라는 것 입니다. 이는 Javascript의 메인쓰레드를 담당하는 이벤트루프가 싱글쓰레드이기 때문이고,
이에따라 Javascript는 한 번에 한 가지 일만 처리가 가능하다는 사실을 알 수 있습니다.
그렇다면 정말 시간을 오래 소요해야 하는 하나의 작업이 있을 때, 이 하나의 작업이 다 끝나기 전까지 브라우저는 아무것도 할 수 없게 될까요?
그렇진 않습니다. Javascript는 이러한 문제 상황을 대비해 비동기 콜백을 사용합니다.
이번 글에서는 이런 Javascript의 비동기 콜백을 포함한 기본 동작 원리를 아주 간단하게 알아보겠습니다.

동작 Flow

Javascript는 다음과 같은 구조로 실행됩니다. 위의 구조를 파악하기 전에 이해를 위한 내부 개념들을 살펴보겠습니다.

엔진 훑어보기

다음은 Javascript의 엔진 구조입니다. 엔진은 크게 Memory Heap과 Call Stack으로 이루어집니다.

간단히 정의해보면 Memory Heap은 메모리들이 할당되는 공간이고, Call Stack은 코드의 실행순서를 저장하여 수행될 작업들이 stack 형태(LIFO)로 쌓이는 공간이 됩니다.

function plusOne(value: number) {
  return value + 1;
}

function logging(value: number) {
  let execute = plusOne(value);
  console.log(execute);
}

logging(2);

실제로 위의 코드가 동작하게 되면 Call Stack에 다음과 같은 변화가 생깁니다.

Javascript의 일 처리 방법 - WebAPIs

Javascript를 사용하면서 우리가 사용하는 API(DOM, Timeout...)들의 출처는 사실 웹 브라우저입니다.

Call Stack은 동기의 함수들만 다루기 때문에 C++ 구현된 쓰레드인 WebAPI가 비동기 함수들을 관리하며,

작업을 전부 수행한 비동기 함수는 Callback Queue으로 이동하게 됩니다.

깔끔하게 보관하기 - Callback Queue

인간에게 뇌가 있다면, 브라우저는 Callback Queue를 활용하여 자신이 수행할 작업들은 정리해둡니다.
Callback Queue는 비동기 함수들을 Queue형태(FIFO) 로 보관하며, 보관된 함수들은 Event Loop의 호출 전까지 계속 보관됩니다.

꺼내와서 처리하기 - Event Loop

이제 Callback Queue에 보관된 함수들을 실행할 차례입니다.
Event Loop는 Call Stack과 Callback Queue를 옵저빙하여 Call Stack이 비어있다면 Callback Queue의 비동기 함수들을 넣어주게 되고, 그렇게 비동기 함수가 실행이 됩니다.

위의 과정에서 Call Stack이 비어있는지의 여부를 확인하는 과정을 Tick이라고 하며, 이러한 일련의 과정들을 Event Loop라고 합니다.