이벤트 루프와 콜백 큐가 작동하는 원리

앞에 내용이랑 이어진다.

 

> 자바스크립트는 싱글 스레드 언어라면서 어떻게 비동기 함수 사용할 수 있나요

자바스크립트는 싱글스레드 언어라면서 어떻게 비동기함수 사용할 수 있나요

 

function second() {
    setTimeout(function() {
        console.log("how's everything going?")
    }, 2000);
}

function first(){
    console.log("hello it's me");
    second();
    console.log("heyyyy")
}

first();

 

위 코드는 setTimeout 함수가 포함되어 있다. 처음에 first 함수가 실행되고 "hello it's me"가 콘솔에 찍힌 후 second 함수의 실행 콘텍스트가 호출 스택에 올라오는 것까지는 간단하다. 그 이후에 setTimeout은 web API로 보내져서 실행된다.

 

 

setTimeout은 web API에서 실행이 된다. setTimeout, 말 그대로 타임아웃을 세팅한다는 의미인 만큼 의 첫 번째 인자로 들어간 콜백 함수를 가진 타이머를 webAPI에서 생성하게 된다. webAPI에 타이머를 생성하는 것으로 setTimeout의 역할은 끝나고 호출 스택에서도 빠진다. 이렇게 타이머를 생성하는 것은, 설정한 시간이 0ms이어도 예외는 없다. 

 

 

second 함수도 리턴을 한다. 그 후 first 함수의 "heyyy" 콘솔로그도 출력이 된다. 이때 web API에 생성된 타이머는 계속 카운트되며 실행되고 있다. 마지막 콘솔문까지 실행이 되고 나면 콜 스택의 first 함수도 빠진다. 이제 web API에서 실행 중인 타이머만 남은 상태다. 

 

 

타이머가 정해진 시간을 모두 세고 나면, 콜백 함수를 콜백 큐에 넣고, 자신은 사라진다. 보내진 콜백 함수는 콜백 큐에서 실행되기만을 바라고 기다리는 것이다. 콜백 함수도 함수라, 실행되려면 호출 스택에 들어가야 하는데 이때 언제 호출 스택에 들어가게 될지를 계속 예의 주시하면서 콜백 함수를 콜 스택에 넣어주는 역할을 하는 것이 이벤트 루프다.

 

이벤트 루프는 호출 스택과 콜백 큐를 계속해서 주시하고 있다. 호출 스택이 비어 있으면 먼저 들어온 콜백 함수 순서대로 호출 스택에 넣어 주는 역할을 한다. 호출 스택이 전부 비어 있어야만 콜백 함수가 호출 스택으로 이동할 수 있다.

 

 

이렇게 콜백 함수가 호출 스택에 들어가면, 그 안에 있는 콘솔문이 찍히고, 마지막으로 콜백 함수까지 차례로 스택에서 빠져나옴으로써 전체 코드가 종료되는 것이다. 

 

이처럼 자바스크립트는 언어 자체를 해석하고 실행하게 해 주는 자바스크립트 엔진과 더불어, 실제로 프로그램이 실행되는 브라우저에서 제공하는 web API, 이벤트 루프, 콜백 큐를 이용하여 동시에 효율적으로 작업을 수행할 수 있다.