[JavaScript] - 호출 스택, 콜백 큐, 이벤트 루프: 실행 프로세스 이해하기

728x90

반응형

 

 

---

 

 

 

---

 

호출 스택, 실행 프로세스 복습 하기

 

 

호출 스택(call stack), 콜백 큐(callback queue), 이벤트 루프(event loop)

 

 

자바스크립트 코드가 실행되고 자바스크립트 엔진은 각각의 함수 호출을 호출 스택에 추가, call stack 에 푸시(push) 되고 , 실행이 완료되면 stack 에서 팝(pop)된다.

 

 

 

 

호출스택(call stack) 함수의 호출을 기록 하는 자료 구조

 

만약 함수가 동기적일 경우 해당 연산이 완료될 때까지 다른 모든 작업은 대기하게 된다. 

 

JS 엔진은 단일 스레드로 동작하기 때문에 한 번에 하나의 작업만 처리한다.

 

 

 

만약 함수가 비동기적일 경우 예를 들어 setTimeout 또는 fetch,promise 등 해당 연산은 백그라운에서 처리되는데

해당 함수들의 결과를 처리하기 위한 콜백함수는 즉시 실행되는게 아닌 콜백 큐에 추가된다

 

마이크로태스크 큐와 매크로태스크 큐 : 비동기 작업이 완료되면 그 결과는 일반적으로 매크로태스크 큐(또는 콜백 큐)에 추가된다.

그러나 Promise와 같은 일부 비동기 작업은 마이크로태스크 큐에 추가된다.

 

이후에 이벤트 루프가 중요한 역할을 하는데 이벤트 루프는 계속 해서 호출스택(call stack)을 확인하며 , 만약 호출 스택이 비어 있다면(즉 현재 진행 중인 작업이 없다면) 그 때 콜백 큐(마이크로,매크로) 에서 순서대로 호출 스택으로 옮긴다.

 

그러면 이제 그 새롭게 추가된 콜백함수가 실행되고 , 실행이 완료되면 호출 스택에서 제거 되게 된다.

이러한 과정이 반복되며 이벤트 루프는 프로그램이 종료될 때까지 호출 스택과 콜백 큐를 확인하고 관리한다.

 

이벤트 루프는 호출 스택이 비어있을 때마다 매크로태스크 큐에서 새 태스크를 가져와 실행하고,
마이크로태스크 큐의 모든 태스크를 실행한 후에야 다음 매크로태스크를 처리한다.

일반적인 이벤트 핸들러, 콜백 등은 매크로태스크로
promise(.then(), .catch(), .finally()), web api, fetct등은 마이크로태스크로

실행 우선순위는 마이크로태스크 > 매크로태스크

 

 

---

 

https://covelope.tistory.com/

Ch.Covelope

 

---