호출 스택, 이벤트 루프

원래는 클로저를 공부하면서 그에 관한 포스팅을 하려고 했는데

클로저의 예시 코드를 보다가 이해되지 않는 부분이 있어서 공부의 내용이 산으로 갔다

바로 setTimeOut과 같은 비동기 함수들의 동작 원리를 이해하지 않고서는 도저히 그 예시를 이해할 수 없을 것 같아 이 포스팅을 먼저 하려고한다

호출 스택

자바스크립트는 하나의 콜스택을 가진 싱글 스레드 언어이다

콜스택이 실행 컨텍스트와 비슷한 느낌이지만

무엇이고 어떤 일을 하는지 코드를 통해 살펴보자

    function t1() {
        t2();
        console.log('t1');
    }

    function t2() {
        console.log('t2');
    }

    t1();

위 코드의 실행 결과

실행 과정과 결과는 쉽게 예측할 수 있다

아래는 코드 실행 과정에 따른 스택의 변화인데 t3()까지는 똑같은 반복이라 t2()까지만 설명한다

비어있는 스택

단촐하지만 이게 스택이다 이 스택에 우리들의 실행 코드가 저장되고 실행된다

t2()호출까지 끝난 스택

우선 자바스크립트가 실행되면 스택에는 코드 전체를 의미하는 main()함수가 콜스택에 먼저 저장된다

그리고 코드를 읽어나가며 함수 호출할 때 스택에 하나씩 담게 되는데 t1()을 호출한 뒤 t1()안의 t2()까지 호출한 뒤 함수들이 저장되어있는 스택의 모습

t2()함수가 실행되고 종료되는 과정의 스택

이어서 코드가 실행되는데

t2()의 console.log('t2') 호출해서 스택에 쌓고 콘솔에 출력한 뒤 함수가 종료되면 스택에서 나가게된다

보는 것 처럼 제일 마지막에 들어온 함수가 제일 먼저 실행되고 나가는데 이를 'LIFO(Last In First Out) 후입선출'이라고 부른다

마찬가지로 t2()도 실행이 끝나면 스택에서 나가고 t1()또한 마찬가지로 실행되며 모든 스택이 비게되면 코드는 종료된다

이벤트 루프

동기와 비동기

뭔가 이상하다 위에서 설명하기를 자바스크립트는 싱글 스레드 즉, 하나의 스택을 가지는 언어라고 했다

이렇게 함수의 응답이 돌아올 때 까지 다른 일을 하지 못하는 성질을 동기적이라고 한다

반대로 하나의 일을 시켜놓고 응답이 올 때 까지 다른 일을 할 수 있다면 그것은 비동기적이고

그래서 자바스크립트는 동기적 언어다 그럼 자바스크립트는 한번에 한가지 일 밖에 처리하지 못하는 걸까..?

결론부터 말하자면 그렇지 않다

우리는 동기적인 자바스크립트를 비동기적으로 동작할 수 있게 만들 수 있기 때문이다

콜스택에서는 즉시 응답이 오지않는 함수 즉, 비동기 함수들이 들어오면 그것을 실행한 것으로 간주해 스택에서 빼버리고 Web API로 보내서 처리하게 한다

1. Web API

Web API는 넘어 온 비동기 함수들을 담아놓은 후 응답이 오기를 기다리는 곳이다

담아놓은 함수들은 담겨진 순서에 관계없이 응답이 돌아온 것 부터 Event Que로 이동한다

Web API가 이러한 비동기 함수들의 응답을 받고 Event Que로 보내는 동안 지금도 CallStack은 열심히 일하고 있는 중

2. Event Que

이 곳으로 온 함수들은 더 이상 순서가 바뀌지 않고 먼저 들어온 함수가 먼저 나가는 FIFO(First In First Out)의 큐 자료구조다

여기서는 실행 준비가 완료된 비동기 함수들이 대기하고 있다가 Event Loop에 의해 하나씩 CallStack으로 이동해서 실행된다

3. Event Loop

Event Loop은 Call Stack에 더 이상 실행할 함수가 없으면 즉, 스택이 비어있으면

자신이 가지고 있는 비동기 함수들을 하나씩 내보내서 스택에서 호출되도록 한다

---

이러한 구동 순서는 내가 어줍짢은 ppt로 설명하기 보다 내가 보고 공부한 동영상을 첨부하는 게 훨씬 이해에 도움이 될 것 같아서

예시 코드로 설명하기 보다는 동영상 링크로 대체하려고 한다

https://youtu.be/8aGhZQkoFbQ?t=777