비동기 자바스크립트 및 작동 방식👩‍💻

논의한 바와 같이 javascript는 단일 스레드 동기식 언어입니다. 그러나 많은 시간 동안 우리는 다른 과정과 모듈에서 비동기 자바스크립트를 관찰하는데, 이는 위의 진술을 무효화합니다. 이것을 이해하려고 노력합시다.

우리는 javascript가 전역 실행 컨텍스트를 가진 호출 스택을 가지고 있다는 것을 알고 있습니다. 함수가 실행되면 새 실행 컨텍스트가 스택에 푸시되고 함수가 반환되면 팝됩니다.

이제 브라우저에서 사용할 수 있는 많은 기능이 있으며, 이 기능은 시간이 걸리고 스택에 푸시되면 이를 차단할 수 있습니다. 이를 기본 스레드 차단이라고도 합니다. 따라서 이러한 기능은 비동기식으로 만들어졌습니다. setTimeout가 포함된 이 예를 살펴보십시오.

console.log("hello, let's go!")

setTimeout(()=>{
    console.log("We are back for a quest.")
},7000)

function greet(){
    console.log("Adventure time...")
}

greet();

setTimeout의 콜백 화살표 함수는 7000ms 후에 콘솔에 표시됩니다. 어떻게 이런 일이 발생하는지 살펴보겠습니다.

Async Javascript의 비하인드 스토리:

우리는 이 수치를 해결하고 모든 것을 이해할 것입니다.

처음에는 전역 실행 컨텍스트가 호출 스택에 푸시되고 console.log("hello, let's go!")가 실행됩니다.

setTimeout()(JS의 일부가 아닌 웹 API)에 도달하면 브라우저에서 제공하는 타이머가 코드에서와 같이 7000ms로 설정되고 실행되지 않습니다.

콜백 함수는 타이머가 꺼지면 작업 대기열로 푸시됩니다.

이제 앞으로 이동하여 function greet() 를 만납니다. 함수형 프로그래밍은 JS의 가장 강력한 제품군이므로 새로운 실행 컨텍스트가 생성되고 호출 스택에 푸시됩니다.

함수가 실행되고 스크립트 끝에 도달하면 전역 실행 컨텍스트가 팝됩니다.

이벤트 루프의 목적은 호출 스택이 비어 있는지 여부를 확인하는 것입니다. 스택이 비어 있고(&가 비어 있을 때만) 타이머가 작동하는 즉시 큐에서 콜백 함수를 제거하고 실행을 위해 호출 스택에 푸시합니다.

콜백 함수는 타이머가 꺼질 때까지 웹 API 환경에 있습니다.

there is also multitask queue that basically handles functions with higher priority, involving promises and change in the DOM tree.
🌟Using microtasks in JS by MDN Docs
🌟Asyn Javascript by James Q