[Frontend Study] Day 8 - JavaScript Event loop

JavaScript는 싱글쓰레드 언어이다.

 

싱글 쓰레드 언어란?

 -> 여러 개의 작업이 있더라도 한 번에 하나의 작업만 수행할 수 있다.

 하지만 JavaScript를 사용하다보면 멀티쓰레드처럼 동시에 여러 작업을 수행할 수 있다.

 

  JavaScript의 메인쓰레드인 이벤트 루프가 싱글쓰레드이다. 하지만 이벤트 루프만 독립적으로 실행되는것이 아닌 웹 브라우저나 NodeJS 같은 멀티쓰레드 환경에서 실행되고 이를 적절하게 사용함으로써 멀티쓰레드처럼 사용이 가능하다.

 

JavaScript의 동작과정

---

JavaScript 엔진

  JavaScript 엔진은 코드를 이해하고 실행을 도와주는 역할을 한다.

  JavaScript 엔진은 크게 Memory Heap과 Call Stack으로 이루어져 있다.

 

 - memory Heap는 메모리 할당이 일어난다. 

 - Call Stack는 코드가 실행될 경우에 stack의 형태로 하나씩 쌓이는 장소이다.

 

Memory Heap & Call Stack

 먼저 Memory Heap에 있는 사용자가 작성한 코드들을 Call Stack에서 Stack방식으로 쌓이며 코드를 실행한다.

 이때 동기 함수들은 그대로 실행하게 되고 비동기 함수들은 Web API로 처리하게 되며 일을 분배한다.

 

Web API

웹 브라우저에서 제공하는 API로, DOM, AJAX, Timeout 등이 있다.

Call Stack에서 실행된 비동기 함수를 처리하고, 그동안에 Call Stack은 나머지 동기 함수들을 처리한다.

 

Web API에서 처리하여 작업이 완료된 비동기 함수들은 Callback Queue로 넘겨준다.

 

Callback Queue

비동기 함수들을 보관하는 장소

Event Loop에서 비동기 함수를 꺼내기 전까지는 계속 Queue 방식으로 비동기 함수를 보관한다.

 

Event Loop

  Event Loop는 Call Stack과 Callback Queue의 상태를 감시하면서 Call Stack에 함수들이 존재하지 않는다면 Callback Queue에 있는 비동기 함수들을 Call Stack에 밀어넣는다. 그 후 Call Stack에서 비동기 함수를 실행시킨다. 

 

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

 

동작방식의 정리

• JavaScript 엔진에서 코드가 실행되면, Call Stack에 쌓인다.
• Stack의 선입후출의 룰에 따라서 마지막에 들어온 함수가 먼저 실행되면서 Stack에 쌓여진 함수가 모두 실행된다.
  • 비동기함수의 경우 Web API가 호출된다.
  • Web API는 비동기함수의 콜백함수를 Callback Queue에 밀어넣는다.
  • Event Loop는 Call Stack이 빈 상태가 되면 Callback Queue에 있는 첫번째 콜백을 Call Stack으로 이동시킨다.