컨플릭트를두려워하지말자

자바스크립트의 이벤트루프란, 

스택이 비었을때 콜백 큐(callback queue)에 존재하는 작업(함수)를 스택으로 옮기는것을 말한다. 여기서 쓰이는 스택을 콜 스택(call stack)이라고 한다. 

자바스크립트가 싱글 스레드 논 블록킹 언어라는 개념과 헷갈릴 수 있는데 함께 정리해보면 이해가 될 것이다.! 

( 논 블로킹: 하나의 오래 걸리는 작업이 수행되는 동안에도 다른 작업들을 처리 대기 상태에 두고, 완료된 작업을 나중에 처리할 수 있는 방식 )

우선 우리가 일반적으로 사용하는 계산이나 조건문, 반복문 등을 동기함수라고 부르는데, 

이런 함수들은 자바스크립트가 만나는 즉시 콜 스택으로 보내며 동기적으로 작업을 처리한다. 그러다 Settimeout, Promise, Http요청과 같은 비동기 함수를 만나게 되면, 이들을 웹api로 전달한 다음,  작업이 끝나면 콜백 큐로 보내 대기하도록 한다.

콜 스택에서 모든 동기 함수를 처리하는 작업이 끝나면, 그다음 자바스크립트는 큐에 있던 비동기 함수를 스택으로 보내 처리한다. 

이해하는데 도움되는 예제도 함께 첨부하겠다

console.log("1. 콘솔 "); // 동기 -> 콜 스택에서 즉시 처리 됨.

if (true) {
  console.log("2. 조건문 "); // 동기 -> 콜 스택에서 즉시 처리됨.
}

setTimeout(() => {
  console.log("5. setTimeout "); // 비동기 -> 매크로태스크 큐 보냄.
}, 0);

Promise.resolve().then(() => {
  console.log("4. Promise "); // 비동기 -> 마이크로태스크 큐 보냄. 
});

console.log("3. 콘솔 "); // 동기 -> 콜 스택에서 즉시 처리됨.

코드상에서는 콘솔 - 조건문 - setTimeout- Promise - 콘솔 순으로 선언되었지만,

실제로 자바스크립트 상에서는 콘솔 - 조건문 - 콘솔 - Promise - setTimeout 순으로 출력될 것이다.  

예제에 나와있다시피 비동기 함수 사이에도 처리하는 우선순위가 존재한다. 

마이크로테스크 큐(Promise) 먼저, 그다음 매크로테스크 큐(setTimeout)가 처리된다. 애니메이션 프레임 큐 라는 것도 있는데 이것은 랜더링 주기에 맞춰 실행되므로 앞의 둘과 실행 시점이 다르다.  이것에대해서는 다음 글에서 다시 정리해보겠다!