자바스크립트 개발자가 알아야할 33가지 개념[#09. 이벤트 루프]

 

자바스크립트는 싱글스레드이면서 어떻게 비동기 작업이 가능한 걸까?

자바스크립트는 언어는 싱글스레드이고 비동기 행위들은 엄밀히 말하면 자바스크립트 언어 그 자체의 일부는 아니다.

오히려 비동기 행위는 브라우저 내부(혹은 프로그래밍 환경)에 존재하는 자바스크립트 언어의 핵심(core)단의 상위에 만들어져 있다.

그리고 브라우저의 API를 통해 접근한다.

 

 

• 메모리 힙(Memory Heap) - 메모리 할당이 일어나는 곳
  • 힙(Heap) - 구조화되지 않은 넓은 메모리 영역
    객체(변수, 함수 등)들이 담긴다.
• 스택 영역 : 자바스크립트 코드 실행을 위해 제공된 싱글 스레드를 나타낸다. 함수 호출은 frame의 스택을 구성한다.브라우저 Web
• API : 브라우저에서 제공하는 API로 DOM, Ajax, Timeout등이 있다. Call Stack에서 실행된 비동기 함수는 Web API를 호출하고, Web API는 콜백 함수를 Callback Queue에 밀어 넣는다.
  
  

Event Loop

이벤트루프는 콜 스택과 콜백 큐의 상태를 체크하여,

콜백이 비어있으면 콜백 큐의 컷번째 콜백을 콜백 스택으로 밀어 넣는다.

이러한 반복적인 행동을 틱(tick)이라 부른다.

 

 

Callback Queue에는 Task Queue(Event Queue), Microtask Queue(Job Queue), Animation Frames로 이루어져 있다.

 콜백큐에서 이벤트 루프를 통해 콜 스택에 올라갈때, 우선 순위가 존재한다.

 

Microtask Queue(Job Queue) > Animation Frames > Task Queue(Event Queue) 이다.

Microtask Queue에 속하는 Promise함수가 먼저 Call Stack에 올라가고 Task Queue인 setTimeout함수가 나중에 올라간다.