Deep Dive - 42이벤트 루프, 태스크 큐

https://dev.to/lydiahallie/javascript-visualized-promises-async-await-5gke

🔶 자바스크립트 엔진은 싱글 스레드 방식으로 동작함.

• 싱글 스레드 : 한 번에 하나의 태스크만 실행할 수 있는 것을 뜻함.
• 자바스크립트 엔진은 단 하나의 실행 컨텍스트 스택을 갖는다.
  이는 동시에 2개 이상의 함수를 동시에 실행 할 수 없다는 말임.

그러나 비동기 처리 처럼 현재 실행 중인 태스크가 종료되지 않은 상태라도 다음 태스크를 실행할 수도 있다.
이는 이벤트 루프와 태스크 큐를 알면 이해됨.

function foo(){
  console.log("foo");
}

function bar(){
  console.log("bar");
}

setTimeout(foo, 3000);
bar();
// 3초 기다리는 동안 bar함수가 먼저 실행됨 -> 3초 후 foo실행됨.
// setTimeout이 bar함수를 블로킹 하지 않음.

🔶 이벤트 루프

🔆 자바스크립트 엔진

• 콜 스택
  : 실행 컨텍스트 스택을 뜻 함.
  : 자바스크립트 엔진은 하나의 콜 스택을 사용하기 때문에, 최상위 실행 컨텍스트가 종료되어 제거되기 전까진 다른 태스크가 실행되지 않음.

• 힙
  : 객체가 저장되는 메모리 공간
  : 실행 컨텍스트 스택이 실행되면서 참조하는 객체들이 저장되어 있음. (변수 등..)

🔆 브라우저

• 태스크 큐
  : setTimeout이나 setInterval 같은 비동기 함수의 콜백함수
  : 이벤트 핸들러가 일시적으로 보관되는 영역임.

• 이벤트 루프
  : 콜 스택에 현재 실행 중인 실행 컨텍스트 스택이 있는지, 태스크 큐에 대기 중인 함수가 있는지 확인함.
  : 콜 스택이 비어있고 태스크 큐에 대기중인 함수가 있으면 대기 중인 함수를 콜 스택으로 이동시킴.
  (태스크 큐에 보관된 함수들은 비동기 처리 방식으로 동작하게 됨.)

🔆 자바스크립트 엔진과 브라우저가 협력하여 비동기 함수를 실행함.

• 자바스크립트 엔진
  : 콜 스택을 통해 태스크 처리함 (콜백함수를 실행함)
• 브라우저
  : Timer Funtion이 - 1)타이머 설정함, 2)타이머가 만료하면 콜백 함수를 태스크 큐에 등록함.

🔶 작동 예시1

function foo(){
  console.log("foo");}		
              
function bar(){
  console.log("bar");}		

// 실행
setTimeout(foo,0);
bar();

🔶 작동 예시2

function func1(){
	console.log("func1");
  	func2();
}	

function func2(){
	setTimeout(function(){
    console.log("func2");
    },0);
  	func3();
}	

function func3(){
	console.log("func3"); 
}	
// 실행
 func1();