Javascript에서 호출스택과 태스크큐의 관계

자바스크립트에서 호출스택과 태스크큐의 관계

자바스크립트에서 호출 스택(call stack)과 태스크 큐(task queue)는 비동기 프로그래밍과 이벤트 루프(event loop)의 중요한 개념입니다. 이 둘은 자바스크립트의 싱글 스레드 환경에서 코드 실행의 흐름을 제어하는 중요한 역할을 합니다. 이들의 관계와 동작 방식에 대해 알아보겠습니다.

1. 호출 스택 (Call Stack)

호출 스택은 자바스크립트 엔진이 함수를 호출할 때마다 그 함수의 실행 정보를 스택 구조에 쌓는 곳입니다. 기본적으로, 자바스크립트는 동기적으로 코드가 실행되며, 각 함수는 호출되면 호출 스택에 쌓이고 실행이 끝나면 스택에서 빠져나옵니다.

• 스택 구조: 호출 스택은 후입선출(LIFO, Last In First Out) 구조로 동작합니다.
• 동기 실행: 자바스크립트의 코드는 기본적으로 호출 스택에서 동기적으로 실행됩니다.

function first() {
  console.log('first');
}

function second() {
  console.log('second');
}

function third() {
  console.log('third');
}

first();   // 호출
second();  // 호출
third();   // 호출

이 코드에서는 first(), second(), third() 함수가 차례로 호출되며, 각 함수는 호출 스택에 쌓이고 실행 후 제거됩니다.

즉, 호출 스택에 first() 삽입-> first()실행 -> first()종료-> first() 제거 -> second() 삽입 -> .... 이순서로 진행됩니다! 

2. 태스크 큐 (Task Queue)

태스크 큐는 비동기 작업(예: setTimeout, Promise의 콜백 등)이 대기하는 큐입니다. 비동기 작업이 완료되면 그 작업에 해당하는 콜백 함수가 태스크 큐에 들어가며, 호출 스택이 비어있을 때 이 큐에서 대기 중인 함수가 호출 스택으로 이동하여 실행됩니다.

• 비동기 실행: 자바스크립트에서 비동기적인 작업은 호출 스택에서 실행을 마친 후, 태스크 큐에 들어갑니다. 이후 이벤트 루프가 호출 스택이 비어있는지 확인하고, 비어 있으면 태스크 큐에서 대기 중인 함수를 호출 스택으로 옮겨 실행합니다.

3. 이벤트 루프 (Event Loop)

이벤트 루프는 호출 스택과 태스크 큐를 관리하는 메커니즘입니다. 이벤트 루프의 주요 역할은 호출 스택이 비어 있을 때, 태스크 큐에 대기 중인 함수가 호출 스택으로 넘어가 실행되도록 하는 것입니다. 이 과정에서 이벤트 루프는 호출 스택과 태스크 큐를 계속 모니터링합니다.

 

호출 스택과 태스크 큐의 관계

• 동기적 실행: 호출 스택에 함수가 쌓이면 해당 함수가 모두 실행될 때까지 실행을 계속합니다. 호출 스택이 비어야만 태스크 큐에 있는 함수가 실행될 수 있습니다.
• 비동기적 실행: 비동기 함수(예: setTimeout, Promise 등)는 호출 스택에서 실행되지 않고, 태스크 큐에 먼저 들어갑니다. 호출 스택이 비어 있으면 태스크 큐에서 비동기 함수가 호출 스택으로 들어가 실행됩니다.

예시: 호출 스택과 태스크 큐의 동작

console.log('1');

setTimeout(function() {
  console.log('2');
}, 0);

console.log('3');

1. console.log('1')은 호출 스택에 쌓이고 실행됩니다.
2. setTimeout은 비동기 함수이므로, 호출 스택에서 실행되지 않고 태스크 큐에 콜백이 들어갑니다.
3. console.log('3')은 호출 스택에 쌓여 실행됩니다.
4. 호출 스택이 비어지면, 이벤트 루프는 태스크 큐에 있는 setTimeout의 콜백 함수를 호출 스택으로 이동시켜 실행합니다. 이 시점에서 console.log('2')가 출력됩니다.

출력 결과:

1
3
2

 

정리:

• 호출 스택: 함수 호출과 실행을 담당하는 스택.
• 태스크 큐: 비동기 작업의 콜백 함수들이 대기하는 큐.
• 이벤트 루프: 호출 스택이 비어 있으면 태스크 큐에서 대기 중인 작업을 호출 스택으로 가져와 실행합니다.

이러한 동작 방식 덕분에 자바스크립트는 비동기적인 작업을 효율적으로 처리할 수 있습니다