JavaScript 개발자가 알아야할 33개 컨셉 09. Message Queue and Event Loop

09. Message Queue and Event Loop

 

Messaege Queue와 Event Loop 이해에 앞서 알아 두어야 하는 것은 Javascript는 non blocking언어라는 것이다. 

(phthon의 경우 blocking언어.)

 

- Non blocking언어

Javascript는 Non blocking언어이지만 alert function의 경우에는 block이 가능하다. 

alert('blabla');
console.log('123');

위 코드를 실행하면,

alert가 뜨고 해당 alert창을 닫기 전까지 console.log는 실행되지 않는다. 

alert를 만나면 다음 프로세스를 수행하지 않고 차단(block)된다는 것이다. 

따라서 alert는 blocking function인 것인데, Javascript언어 자체는 non blocking언어이다. 

 

자바스크립트가 non blocking언어 이기 때문에 Events와 callbacks이 사용 가능한 것이다.

예를 들어 버튼을 만들고 Add event listener 로 click 에 대한 callback 이벤트를 걸 수 있다.

 

---

-Queue와 Event loop

 

setTimeout{
	console.log('hi'), 0
};
console.log('bye');

setTimeout을 이용하여 0초 후에 hi를 출력하도록 하고, 다음으로 bye를 출력하도록 하는 소스이다.

 

위 코드를 실행하면 결과는 기대와 다르게 bye가 먼저 출력되고 이후에 hi가 먼저 출력된다.

그렇다며 그 이유는 무엇인가?

 

이번 절의 Queue와 Event Loop는 이 현상에 대한 이유를 이해하는 것이 핵심이라고 한다. 

 

위 코드를 실행하면 내부적으로 다음과 같은 프로세스가 실행된다.

1. 먼저 명령이 Stack에 순서대로 들어온다. 

2. 두번째 단계에서 setTimeout은 브라우저의 WEB API를 이용하여 호출되기 때문에  Web API zone으로 이동 되고,

다음 명령인 console.log 문장이 바로 실행된다. 떄문에 bye가 먼저 찍히는 것이다.

3. bye는 먼저 실행되어 stack을 빠져나가고, Web API는 setTimeout안의 내용을 0초 후에 Queue로 보낸다. 

4. 마지막으로 Queue에 들어온 내용은 다시 Stack으로 보내져서 최종적으로 hi가 출력되는 것이다.

 

이것이 Queue와 event Loop에 대한 핵심 내용이다.. 라는 것이 노마드 코더의 설명이다. 

동영상마다 러닝타임이 10분정도다 보니 매번 설명이 충분하지 못한 느낌이 드는것은 어쩔수 없는 것인가,,,