자바스크립트 코드의 실행과정(이벤트 루프)

실행된 코드

function run() {

    console.log('3초 후 실행');

}

console.log('시작'); // 첫번째 실행

setTimeout(run, 3000); // 2

console.log('끝'); // 3

 

실행 과정 그림

실행순서

1. anonymous - 파일이 시작되면 기본적으로 생성.(전역 컨텍스트), 메모리에 - run이 선언되어 있음.  

2. 호출스택에서 console.log('시작')가 실행되면서 콘솔창에 '시작'이 기록.

3. 실행이 완료되면 console.log('시작')는 호출스택에서 빠져나감.

4. 함수 setTimeout이 실행됨. setTimeout은 비동기 함수이기 때문에 백그라운드에 타이머(run, 3초)가 입력이됨.

(백그라운드에 보내게 되면 호출스택과 동시에 실행이 된다. 따라서 다른 호출스택이 쌓이더라도 백그라운드는 멈추지 않고 진행됨.)

백그라운드가 먼저 끝난다고 하더라도 호출스택이 먼저 처리가됨.

5. setTimeout도 호출스택에서 빠져나감.

6. console.log('끝')이 실행. 호출스택에 쌓임.

7. 콘솔창에 끝이 기록되면서 호출스택에서 console.log가 빠져나감.

8. 파일이 다 끝나면 anonymous도 호출스택에서 빠져나감.

9. 백그라운드에 있는 타이머 3초가 지나면서 백그라운드에서 빠져나가고, run이 태스크 큐로 보내짐.

이벤트 루프의 역할은 호출스택이 비워져있을때 태스크 큐에서 함수들 하나하나를 호출스택으로 끌어와서 실행시켜줌.

10. 태스크 큐의 run이 호출스택으로 보내짐.

11. 호출스택이 run함수를 실행시킴.

12. run함수 실행하면서 console.log('3초 후 실행')가 호출스택에서 실행됨.

13. 콘솔창에 3초 후 실행 기록, 호출스택에서 console.log('3초 후 실행')가 빠져나감. 

14. 호출스택에서 run함수 빠져나감.

15. 호출스택, 백그라운드, 태스크 큐가 다 비워져 있으면 자바스크립트 실행이 완료된 것임.