JS 이벤트 루프 및 호출 스택이란 무엇입니까?

이벤트 루프는 많은 개발자에게 혼란의 원인이지만 JavaScript 엔진의 기본 요소입니다. 이는 JavaScript가 단일 스레드가 될 수 있게 해주면서도 비차단 방식으로 실행할 수 있게 해줍니다. 이벤트 루프를 이해하려면 먼저 호출 스택, 작업, 마이크로태스크 및 해당 대기열과 같은 JavaScript 엔진에 대한 몇 가지 사항을 설명해야 합니다. 하나씩 분해해 봅시다.
호출 스택
호출 스택은 JavaScript 코드의 실행을 추적하는 데이터 구조입니다. 이름에서 알 수 있듯이 스택이므로 메모리의 LIFO(후입선출) 데이터 구조입니다. 실행되는 각 함수는 호출 스택에서 프레임으로 표시되며 이전 함수 위에 배치됩니다.

일반 이벤트 루프

JavaScript의 Call Stack, Event Loop,
JS 실행 환경 예제에서 제공되는 모든 비동기 API
브라우저 환경의 웹 API.

주어진 코드

setTimeout(() => { 
  console.log('Neeraj')
}, 1000)           

호출 스택, 이벤트 루프 및 웹 API는 다음과 같은 관계를 갖습니다.

        [code]        |   [call stack]    | [Event Loop] | |   [Web APIs]  |
  ------------------------|-------------------|--------------| |-------------------------|
  setTimeout(() => {      |                   |              | |                         |
    console.log('Neeraj') |                   |              | |                         |
  }, 1000)                |                   |              | |                         |
                          |                   |              | |                         |

시작하려면 모든 것이 비어 있습니다.

        [code]        |   [call stack]    | [Event Loop] | |   [Web APIs]  |
  --------------------|-------------------|--------------| |---------------|
  setTimeout(() => {  | <global>          |              | |               |
console.log('Neeraj') |                   |              | |               |
  }, 1000)            |                   |              | |               |
                      |                   |              | |               |

코드 실행을 시작하고 해당 사실을 호출 스택(여기서는<global> )

        [code]        |   [call stack]    | [Event Loop] | |   [Web APIs]  |
  --------------------|-------------------|--------------| |---------------|
> setTimeout(() => {  | <global>          |              | |               |
console.log('Neeraj') | setTimeout        |              | |               |
  }, 1000)            |                   |              | |               |
                      |                   |              | |               |

그런 다음 첫 번째 줄이 실행됩니다. 이것은 함수 실행을
호출 스택의 두 번째 항목.

호출 스택은 스택입니다. 마지막으로 푸시된 항목이 첫 번째 항목입니다.
아이템이 떴다. Aka: 후입선출. (생각하다; 접시 더미)

        [code]        |   [call stack]    | [Event Loop] | |   [Web APIs]  |
  --------------------|-------------------|--------------| |---------------|
> setTimeout(() => {  | <global>          |              | | timeout, 1000 |
console.log('Neeraj') | setTimeout        |              | |               |
  }, 1000)            |                   |              | |               |
                      |                   |              | |               |

실행setTimeout은 실제로 JS의 일부가 아닌 코드를 호출합니다.
브라우저가 우리에게 제공하는 웹 API의 일부입니다.
노드에서 사용할 수 있는 이와 같은 다른 API 세트가 있습니다.

        [code]        |   [call stack]    | [Event Loop] | |   [Web APIs]  |
  --------------------|-------------------|--------------| |---------------|
  setTimeout(() => {  | <global>          |              | | timeout, 1000 |
console.log('Neeraj') |                   |              | |               |
  }, 1000)            |                   |              | |               |
                      |                   |              | |               |

setTimeout 실행이 완료됩니다. 작업을 웹으로 오프로드했습니다.
요청된 시간(1000ms) 동안 대기하는 API입니다.

        [code]        |   [call stack]    | [Event Loop] | |   [Web APIs]  |
  --------------------|-------------------|--------------| |---------------|
  setTimeout(() => {  |                   |              | | timeout, 1000 |
console.log('Neeraj') |                   |              | |               |
  }, 1000)            |                   |              | |               |
                      |                   |              | |               |

실행할 JS 줄이 더 이상 없기 때문에 이제 호출 스택이 비어 있습니다.

        [code]        |   [call stack]    | [Event Loop] | |   [Web APIs]  |
  --------------------|-------------------|--------------| |---------------|
  setTimeout(() => {  |                   | function   <-----timeout, 1000 |
console.log('Neeraj') |                   |              | |               |
  }, 1000)            |                   |              | |               |
                      |                   |              | |               |

제한 시간이 만료되면 Web API는 JS에 코드를 추가하여 알립니다.
이벤트 루프.

이미 방해가 될 수 있으므로 호출 스택에 직접 푸시하지 않습니다.
코드를 실행하면 이상한 상황에 처하게 됩니다.

이벤트 루프는 대기열입니다. 푸시된 첫 번째 항목이 첫 번째 항목입니다.
아이템이 떴다. Aka: 선입선출. (생각하다; 영화 대기열)

        [code]        |   [call stack]    | [Event Loop] | |   [Web APIs]  |
  --------------------|-------------------|--------------| |---------------|
  setTimeout(() => {  | function        <---function     | |               |
console.log('Neeraj') |                   |              | |               |
  }, 1000)            |                   |              | |               |
                      |                   |              | |               |

호출 스택이 비어 있을 때마다 JS 실행 환경은 때때로 다음을 확인합니다.
이벤트 루프에 대기 중인 항목이 있는지 확인합니다. 그렇다면 첫 번째 항목이 이동됩니다.
실행을 위해 호출 스택에.

        [code]        |   [call stack]    | [Event Loop] | |   [Web APIs]  |
  --------------------|-------------------|--------------| |---------------|
  setTimeout(() => {  | function          |              | |               |
console.log('Neeraj') | console.log       |              | |               |
  }, 1000)            |                   |              | |               |
                      |                   |              | |               |

함수를 실행하면 console.log가 호출되고 푸시됩니다.
호출 스택.

        [code]        |   [call stack]    | [Event Loop] | |   [Web APIs]  |
  --------------------|-------------------|--------------| |---------------|
  setTimeout(() => {  | function          |              | |               |
console.log('Neeraj') |                   |              | |               |
  }, 1000)            |                   |              | |               |
                      |                   |              | |               |
> Neeraj

실행이 완료되면 Neeraj가 인쇄되고 console.log가
호출 스택.

        [code]        |   [call stack]    | [Event Loop] | |   [Web APIs]  |
  --------------------|-------------------|--------------| |---------------|
  setTimeout(() => {  |                   |              | |               |
console.log('Neeraj') |                   |              | |               |
  }, 1000)            |                   |              | |               |
                      |                   |              | |               |
> Neeraj

마지막으로 이 함수에는 실행할 다른 명령이 없으므로 이 함수도 제거됩니다.
호출 스택.

우리 프로그램은 이제 실행을 마쳤습니다.

끝.