이벤트루프(event loop)

자바스크립트는 싱글 스레드 언어이다.

 

그래서 다른 언어들처럼 무조건 순차적으로 코드가 실행되지않는다.

 

위그림의 메모리힙에는 함수나, 선언한 변수가 들어간다. 콜스택은 실제로 실행하는 코드를 실행하는 공간이다.

 

1.console.log('첫번쨰실행')

2.setTimeout(() => {console.log("두 번째 메시지")}, 5000);

3.console.log('세번째실행')

이런식으로 실행하게되면

 

1 -> 5초뒤2번, ->3 순으로 실행되는게아니라

 

1 -> 3 -> 5초뒤2번 이렇게 실행되게 된다.

 

즉 먼저 실행이 완료된 순으로 실행되는것이 자바스크립트의 특성이다.

 

요약하면 코드의 실행순서만 볼때,

 

먼저 실행되는순서로 실행이 된다. 다만 위 그림에서도 알 수있듯이

 

비동기적인 코드들은 전부 콜백큐로 빠지게 된다.

그리고 아래 그림에는 마이크로 태스크큐, 매크로 태스크큐만 있는데

 

실제로는 콜백큐는 여러 큐로 구성되어있지만 크게

 

Microtask Queue, Animation Frames, Task Queue로 구성 되어있다고한다.

 

즉 콜스택 -> WEB API로가고 여기서 종류에따라 ->종류별 큐로 이동 ->다시 여기서 우선순위에 따라

 

콜스택으로 돌아와 실행되는데 이때 순서는 마이크로,애니메이션,태스크큐 순이라고한다.

 

-참고한 링크

https://github.com/JaeYeopHan/Interview_Question_for_Beginner/tree/master/JavaScript#javascript-event-loop

GitHub - JaeYeopHan/Interview_Question_for_Beginner: Technical-Interview guidelines written for those who started studying progr

https://velog.io/@code-bebop/JS-%EC%9D%B4%EB%B2%A4%ED%8A%B8-%EB%A3%A8%ED%94%84-%EC%BD%9C%EB%B0%B1-%ED%81%90

JS 이벤트 루프, 콜백 큐

https://velog.io/@yejineee/%EC%9D%B4%EB%B2%A4%ED%8A%B8-%EB%A3%A8%ED%94%84%EC%99%80-%ED%83%9C%EC%8A%A4%ED%81%AC-%ED%81%90-%EB%A7%88%EC%9D%B4%ED%81%AC%EB%A1%9C-%ED%83%9C%EC%8A%A4%ED%81%AC-%EB%A7%A4%ED%81%AC%EB%A1%9C-%ED%83%9C%EC%8A%A4%ED%81%AC-g6f0joxx

이벤트 루프와 태스크 큐 (마이크로 태스크, 매크로 태스크)