(JS) 자바스크립트 작동 원리 (Event Loop / Call Stack / WEb API / Callback Queue)

호두파파·2021년 2월 22일

JavaScript Web API call stack callback queue event loop 자바스크립트

JavaScript

자바스크립트 엔진

자바스크립트 엔진은 자바스크립트 코드를 실행하는 프로그램 혹은 인터프리터라고 정의되어 있다.
자바스크립트 엔진은 표준적인 인터프리터로 구현할 수도 있고, 정적인 컴파일로로도 구현할 수 있다
두 가지 방식을 합친 JIT 컴파일(Just-In-Time Compilation)로도 구현할 수 있다.

인터프리터 : 소스코드를 바로 실행하는 컴퓨터 프로그램으로 프로그래밍 언어를 읽어가면서 해당 기능에 대응하는 기계어 코드를 실행하는 방식
컴파일러 : 소스 코드를 읽기 전에 기계어로 번역
JIT 컴파일러 : 프로그램을 실제 실행하는 시점에 기계어로 번역하는 컴파일 기법, 같은 함수가 여러 번 불릴 때 매번 기계어 코드를 생성하는 것을 방지.

자바스크립트 엔진의 종류

웹 브라우저마다 각각의 다른 엔진을 사용하고 있다.

V8 : 구글의 크롬에서 사용하는 엔진, C++로 만들어졌으며 오픈소스이다.
JavaScriptCore : 사파리용으로 애플이 개발햇으며 오픈소스이다.
SpiderMonkey : 최초의 자바스크립트 엔진으로 모질라 파이어폭스를 지원

V8 엔진 동작 방식

크롬의 V8엔진은 JIT컴파일에 해당한다.

1) Call Stack

자바스크립트는 싱글 쓰레드 언어이다. 즉, 한번에 한개의 일만 처리할 수 있다는 의미이다.

쓰레드 : 운영체제에서 실행중인 하나의 프로그램을 프로세스라 하며 이 프로세스의 작은 단위를 말한다. 쓰레드는 한 개의 일만 처리할 수 있으며, 스레드가 여러가지 모이면 프로세스라고 한다.

콜스택이란, 현재 실행중인 서브루틴(함수)에 대한 정보들을 담아두는 스택구조의 메모리 영역이다. 콜스택은 프로세스가 어느 단계를 거치고 있는지를 기록하게 된다.
(처리하고 있는 현재를 보여준다고 하면 이해가 쉽다.)

const function2 = (x, y) => {
    return console.log(x + y);
}
const function1 = (a, b) => {
  function2(a, b)
}

function1(1, 2); // 실행

위 함수를 호출하면 아래와 같이 스택이 쌓이는 것을 볼 수 있다.

위처럼 순서대로 쌓인 스택은 위에서부터 아래로 하나씩 처리가 된다.(후입선출)
'단일 쓰레드'로 처리됨에도 웹 프로세싱은 이어지는 내용에 의해 효율적으로 작동한다.

2) Web API

자바스크립트 엔진이 아닌 브라우저에서 제공하는 API.
콜스택에서 불어온 함수 중 비동기적인 함수이면 Web API가 함수를 호출합니다. DOM, AJax, SetTimeOut 등이 이에 해당하며, Web API에서 처리를 끝마친 함수를 Callback Queue로 이동시킨다.