자바스크립트 구동방식

자바스크립트의 Event Loop 구동방식

자바스크립트는 Single Thread 방식이며 이 말인 즉슨 Call Stak을 단 1개만 갖는다는 말이다. 즉, 한 번에 한 가지만 수행이 가능하다는 말이다.
그렇다면 이벤트가 발생하면 자바스크립트 내부에서는 어떤 식으로 작동할까?

[구동순서] Call Stack -> Web APIs -> Callback Queue -> Event Loop -> Call Stack

자바스크립트는 Memory Heap과 Call Stack으로 이루어져 있다.

• Memory Heap : 자바스크립트를 사용해 만든 함수, 배열, 객체 등의 저장공간 / 동적으로 생긴 객체(인스턴스)는 이곳에 할당된다.
• Call Stack : 코드가 실행될 때 쌓이는 곳. 호출이 끝나면 사라진다.
• Web API : 당장 실행되지 않는 함수들이 호출이 되기를 기다리는 공간(API로 이동된 순서는 중요하지 않다. 나중에 들어왔어도 먼저 호출될 수 있음) / Call Stack에서 실행된 비동기 함수는 Web API를 호출하고, 이는 콜백함수를 Callback Queue에 넣는다.
• Callback Queue : Web API에서 넣어준 콜백함수들이 단지 줄을 서 있는 공간이며, 이 곳에 쌓인 후엔 순서가 바뀌지 않는다. FIFO(First in First Out)
• Event Loop :
  <동작 조건>
  1. Callback Queue에 실행해야 할 함수가 있다.
  2. Call Stack이 비어있다.(Run to Completion: 자바스크립트는 현재 수행중인 함수가 끝나기 전까지 다음 task를 실행하지 않는다.)
  

예시)
setTimeoutdp 5초의 시간을 지정해두고 함수를 실행하고자 할 때 5초 후 Callback Queue로 넘어가긴 하지만 그 사이 Call Stack이 비어지지 않는다면 Event Loop는 동작하지 않을 것이다. 즉, setTimeout으로 걸어둔 함수가 반드시 5초 후에 실행될 거라는 보장이 없다.

호출 스택에 처리 시간이 어마어마하게 오래 걸리는 함수가 있으면 무슨 일이 발생할까?

예를 들어, 브라우저에서 자바스크립트로 매우 복잡한 이미지 프로세싱 작업을 한다고 하자. 그렇다면 브라우저는 호출 스택에서 해당 함수가 실행되는 동안 아무 작업도 못하고 대기 상태가 된다. 그러면 화면 UI가 자연스럽지 못할 것이다. 그렇다면 어떻게 렌더링을 방해않고 브라우저 응답도 끊지 않으면서 시간이 오래걸리는 많은 코드를 실행할 수 있을까? 정답은 비동기 콜백이다.
그렇기 때문에 Web API중 하나인 AJAX통신을 이용할 때 Promise와 async, await 함수를 활용하는 것이다.