[2019.04.23] 자바스크립트 event Loop 개념

 

자바스크립트에서 event Loop란, 그냥 자바스크립 내에서 돌아가는 함수 호출 방식을 말한다.

우선 일반적으로 하나의 함수가 끝나야 그 다음 함수가 호출되는 동기적 방식,

그리고 순서와 상관없이 함수가 끝날 때까지 기다리지 않고 다음 함수가 호출되는 비동기적 방식이 있다.

 

# 싱글 스레드와 멀티 스레드

 

위 그림을 보면, 멀티 스레드는 한번에 여러 작업을 할 수 있다. 함수 여러개 처리를 동시에 한다.

싱글 스레드는 한번에 하나의 함수처리 밖에 못한다.

 

자바스크립트에는 setTimeout 등과 같이 비동기적 함수로 실행시킬 수 있는 방식이 있다. 

 

그러면 자바스크립트는 비동기 방식의 언어일까? 

 

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

 

그러면 어떻게 비동기적 방식으로 함수를 돌릴 수 있는 것일까?

이 비동기적 방식으로 함수를 처리할 수 있도록 도와주는 녀석이 eventLoop이다.

 

 

왼쪽에 JS라고 되어있는 부분이 자바스크립트에서 동기적으로 함수가 저장되고 처리 후 사라지는 스택부분이다.

스택에서 함수를 처리 중 setTimeout, ajax 등과 같이 비동기로 실행할 함수를 만나면 브라우저의 WebAPI로 함수를 보내버린다. 그리고 자바스크립트는 다음 스택에 저장되어 있는 함수를 꺼내 처리한다.

 

자바스크립트에서 설정한 시간이 WebAPI에서 충족되면, WebAPI는 자바스크립트의 stack으로 보내는 것이 아니라, callbackQueue로 보낸다.

큐에 함수가 들어오는 순간부터 eventLoop가 자바스크립트의 스택을 확인한다. 스택에 저장된 함수가 사라질 때까지 대기하다가, 스택이 비어지는 순간, 큐에 저장된 함수를 자바스크립트의 스택으로 보낸다.

이후에 자바스크립트는 비동기 방식으로 보냈던 함수들을 하나하나씩 처리하게 된다.

 

 

결론) 비동기 방식으로 호출한 함수는 동기적 방식으로 호출한 함수들이 끝나면, 차례대로 처리된다.

 

자바스크립트 내에서 돌아가는 비동기 방식의 개념에 대해 제대로 이해할 수 있는 계기가 된 것 같다. 

아래는 내가 보고 이해했던 아주 좋은 자바스크립트의 eventLoop를 설명한 영상이다.

https://www.youtube.com/watch?v=8aGhZQkoFbQ