동기와 비동기 처리 방식의 호출 순서

예시 코드

 다음과 같은 함수 코드가 어떤 순서대로 출렸되는지 콜 스택, 백그라운드, 데스크 큐, 이벤트 루프를 통해 살펴보고자 한다.

 

1.  처음 콜 스택(실행컨텍스트)에는 크롬의 전역 컨텍스트인 anoymous 함수가 나온다.

 

2. setTimeout 함수는 비동기로 동작하기 때문에 실행컨텍스트에 올라간 뒤, 백그라운드로 넘어간다.

   (이때 백그라운드에서는 전달 된 카운트 수가 멈추지 않고 동시 실행이 된다. 자바스크립트 자체는 싱글 스레드 형식으로 동작하지만

    백그라운드와 같은 경우는 운영체제 및 C++에 의해 관리가 되므로 멀티 스레드가 가능하다.)

 

3. 콜 스택에 마지막으로 남은 anoymous가 pop되어 종료가 되면, 백그라운드에서 대기 중이던 setTimeout 함수가 데스크 큐로 넘어가게

    되며 이벤트 루프 처리에 의해 콜 스택에 적재 및 실행된다. 이때 run 함수가 호출된다.

 

4. run 함수에 선언되어 있는 setTimeout 함수의 시간 인자값이 0이긴 하지만 비동기 처리로 진행되기 때문에 바로 호출되지 않고 백그라     운드로 넘어간다. 

 

5. Promise 객체가 반환에 성공 한 hi 문자열은 백그라운드로 넘어가지 않고 Promise 객체에 저장되는데, 이는 Promise 객체가 실행은 바       로 하되 결괏값(then/catch에 의한 후속처리)은 나중에 받기 때문이다.

   이후 Promise로부터 받은 결괏값을 then 메서드는 인자로 전달 받은 console.log 후속 처리와 함께 백그라운드로 넘어간다.

 

6. oneMore 함수가 호출되어 one more 문자열이 호출되고 콜 스택에 적재되어 있던 실행컨텍스트들이 하나 씩 pop되어 종료된다. (스택      의 First in-Last out 특성으로 인해)

 

7. 콜스택에 어떠한 실행컨텍스트도 실행되지 않을 때야 비로소 백그라운드에 남아 있던 setTimeout과 then의 후속 처리들이 데스크 큐로

   넘어가게 되며 이벤트 루프 처리에 의해 실행컨텍스트에 적재 및 실행된다.

   이때 setTimeout 함수보다 then 메서드에 의한 후속 처리가 우선 순위가 더 높기 때문에 먼저 실행이 된다.

 

실행 결과

https://choi95.tistory.com/9

자바스크립트 런타임 환경(setTimeout, Promise then, RequestAnimationFrame)