이벤트 루프의 마법

JavaScript는 단일 스레드 언어입니다. 이는 하나의 호출 스택과 하나의 메모리 힙이 있음을 의미합니다. 순서대로 코드를 실행하고 다음으로 이동하기 전에 코드 조각 실행을 완료해야 합니다.

JavaScript 엔진은 코드 실행을 시작하기 전에 전역 실행 컨텍스트를 생성합니다.
전역 실행 컨텍스트는 현재 코드가 실행되는 환경에 대한 정보를 보유합니다.

이제 스택이 어떻게 작동하는지 살펴보겠습니다.

JavaScript 엔진이 코드를 처음 발견하면 전역 실행 컨텍스트를 생성하고 스택에 푸시합니다. 함수 호출이 있을 때마다 해당 함수에 대한 새 실행 컨텍스트를 만들고 스택 맨 위로 푸시합니다.

스택 맨 위에 있는 함수의 실행 컨텍스트가 먼저 실행됩니다. 이 함수가 완료되면 실행 스택이 스택에서 제거됩니다.

실행 시간이 오래 걸리는 기능이 있는 경우 마우스 클릭과 같은 웹 페이지와의 모든 상호 작용을 차단합니다. 이러한 함수를 차단 함수라고 합니다.

function task(message) {
   let n = 10000000000;
   while (n > 0){
      n--;
   }
console.log(message);
}
console.log('Start');
task('Run the task');
console.log('Done');

산출:

시작
작업 실행
완료

이 예에서는 task() 함수 내부에 시간이 많이 걸리는 작업을 실행하는 큰 while 루프가 있습니다. task() 함수는 차단 함수입니다.

JavaScript 엔진은 먼저 console.log()를 스택 맨 위에 놓고 실행합니다. 그런 다음 JavaScript는 호출 스택 맨 위에 task() 함수를 배치하고 함수를 실행합니다.

그러나 task() 함수를 완료하는 데 시간이 걸립니다. 따라서 '작업 실행'이라는 메시지가 표시됩니다. 조금 후에. task() 함수가 완료된 후 JavaScript 엔진은 호출 스택에서 꺼냅니다.

마지막으로 JavaScript 엔진은 console.log('Done') 함수를 스택 맨 위에 놓고 실행합니다.

이것은 콜백 함수의 도움으로 피할 수 있습니다.

console.log('Start');
setTimeout(() => {
   task('Run the task');
}, 1000);

console.log('Done');

산출

시작
완료
작업 실행

이 비동기 동작은 JavaScript 언어의 일부가 아니지만 브라우저의 JavaScript 언어 위에 구축되고 웹 API를 통해 액세스됩니다.

이러한 비동기 함수의 몇 가지 예는 setTimeout, setInterval, 이벤트 리스너 등입니다.

이벤트 루프의 마법

함수는 순서대로 호출 스택에 푸시됩니다. 그러나 웹 API에 속하는 기능은 작업을 수행하기 위해 브라우저로 전송됩니다.
한편 콜 스택의 함수는 지연 없이 실행됩니다. 브라우저에서 실행되는 기능은 콜백 대기열로 보내집니다. 이벤트 루프는 호출 스택이 비어 있는지 지속적으로 확인합니다. 콜스택이 비어 있으면 실행 대기 중인 콜백 큐의 함수가 순서대로 콜스택에 푸시됩니다.

이것이 JavaScript가 다른 활동을 방해하지 않고 비동기 코드를 실행하는 방법입니다.

행복한 학습!