[JavaScript] Event Loop와 Promise

JavaScript의 작동원리

JavaScript의 작동원리는 위 이미지와 같다. 함수가 실행되면 그 함수는 Call Stack에 쌓인다. 함수 실행 과정에서 비동기 과정에서 가장 큰 단위의 작업인 setTimeout, setInterval 등은 Macrotask Queue에 들어가고 비동기 작업 중 가장 작은 단위의 작업인 Promise와 asycn/await 구문의 비동기 코드들은 Microtask Queue에 들어간다. (Microtask Queue가 Macrotask Queue보다 실행 우선순위가 높다.)
싱글 스레드 방식인 JavaScript는 Call Stack의 작업이 전부 끝나면 Microtask Queue에 들어있는 작업을 끝내고 그 후 Macrotask Queue에 들어있는 작업을 끝낸다.

코드

const startEventLoop = () => {
    console.log("=======시작!!!!=======");

    function aaa() {
        console.log("aaa-시작");
        bbb();
        console.log("aaa-끝");
    }

    async function bbb() {
        console.log("bbb-시작");
        await ccc();
        console.log("bbb-끝");
    }

    async function ccc() {
        console.log("ccc-시작");
        const friend = await "철수";
        console.log(friend);
    }

    aaa();

    console.log("=======끝!!!!=======");
};

startEventLoop();

위에서 설명했던 JavaScript의 작동원리를 바탕으로 위 코드를 실행시키면 결과는 다음과 같다.

=======시작!!!!=======
aaa-시작
bbb-시작
ccc-시작
aaa-끝
=======끝!!!!=======
철수
bbb-끝

설명

1. startEventLoop 함수가 실행되면서 CallStack에 쌓인다.
2. =======시작!!!!======= 이 출력된다.
3. aaa 함수가 실행되면서 CallStack에 쌓인다.
4. aaa-시작 이 출력된다.
5. bbb 함수가 실행되면서 CallStack에 쌓인다.
6. bbb-시작 이 출력된다.
7. ccc 함수가 실행된다.
8. ccc-시작 이 출력된다.
9. "철수" 앞에 있는 await 때문에 ccc 함수가 Micorotask Queue에 들어간다.
10. ccc() 앞에 있는 await 때문에 bbb 함수가 Micorotask Queue에 들어간다.
11. 현재 CallStack의 최상단에 있는 aaa 함수를 이어서 실행한다.
12. aaa-끝 이 출력되고 aaa 함수는 CallStack에서 제거된다.
13. 현재 CallStack의 최산단에 있는 startEventLoop 함수가 이어서 실행된다.
14. =======끝!!!!======= 이 출력되고 startEventLoop 함수는 CallStack에서 제거된다.
15. 현재 Microtask Queue에서 제일 앞에 있는 ccc 함수가 이어서 실행된다.
16. 철수 가 출력되고 ccc 함수는 Microtask Queue에서 제거된다.
17. 현재 Microtask Queue에서 제일 앞에 있는 bbb 함수가 이어서 실행된다.
18. bbb-끝 이 출력되고 bbb 함수는 Microtask Queue에서 제거된다.
19. 종료