[Javascript] Sync, Async 그리고 event loop

  Javascript를 사용하다보면, 동기와 비동기의 문제에 부딫힐 때가 많다. 또한 처리 시간이 필요한 함수, Crypto와 같은 암호화 함수나 Ajax 함수들은 Sync와 Async 가 나뉘어져 있어서, 정확히 이런 함수들이 나뉘어지는 원리에 대해서는 잘 알지 못한다. 이는 아마도 동기와 비동기의 개념에 대해서는 대충 알고 있지만, 정확히 작동하는 방식에 대해서는 잘 모르기 때문일 것이다. 그러므로, 자바스크립트의 작동 원리에 대한 이해가 필요하다.

 

  먼저, 자바스크립트는 '단일 쓰레드' 상에서 동작한다. 이 말은, '자바스크립트' 자체는 한번에 한가지 작업 밖에 처리하지 못한다는 뜻이다. 그렇기 때문에, 이러한 '단일 쓰레드' 상에서 동기적으로, 즉 한번에 한 라인씩 코드를 처리한다면 어떻게 될까? 이 경우에는 Blocking 현상이 나타나게 된다. 브라우저 내의 페이지의 동작이 멈춰 버려서 다른 아무 작업도 수행할 수 없게 되는 것이다. 

 

  따라서 이러한 문제를 해결하기 위해서는, 일부 시간이 소요되는 작업을 '비동기'로 처리해야 했고, 이에 따라 등장한 것이, Event Queue와 Event Loop이다.  또한 이를 구현하는 방식이 바로 'Callback' 이다. 

 

  많은 프로그래밍 언어가 그렇다싶이, 자바스크립트도 함수를 호출하게 되면  Call Stack 에 쌓이게 된다. 아래와 같이 말이다.

출처: https://blog.sessionstack.com/how-does-javascript-actually-work-part-1-b0bacc073cf

그리고 함수 호출이 종료되면, 자료구조의 stack과 같이 위에서 부터 하나씩 제거되고, Call Stack이 비워질때까지 반복적으로 수행한다.다. Call Stack 만으로는 비동기적인 처리가 불가능 하다. 따라서 아래와 같이 런타임 환경이 구성된다.

  비동기적 처리를 요하는 함수는 Web API로 보내져서 처리가 되고, 처리가 완료되면 Callback 함수를 EventQueue(Callback Queue)에 넣는다. 이후 Call Stack이 모두 처리되었을때(모두 제거 되었을때), EventLoop는 EventQueue의 Callback 함수들을 CallStack에 넣어 처리한다.