(자세히 알아보기: 마이크로태스크와 자바스크립트 런타임 환경)

디버깅을 할 때나 문제의 타이밍과 작업 스케줄링에 대한 최적의 접근 방식을 결정할 때, JavaScript 런타임이 내부적으로 어떻게 작동하는지 이해하는 것이 유용할 수 있다.

JavaScript는 본질적으로 싱글 스레드 언어이다. 이는 그 당시 이런 선택이 긍정적인 선택이었으며, 일반 대중에게는 몇 개의 다중 프로세서 컴퓨터만 사용 가능했고, JavaScript로 처리되는 코드의 양은 그 당시에는 비교적 적었기 때문이다.

그러나 시간이 지남에 따라 컴퓨터는 강력한 멀티 코어 시스템으로 진화하였고, JavaScript는 컴퓨팅 세계에서 가장 널리 사용되는 언어 중 하나가 되었다. 가장 인기 있는 애플리케이션 중 많은 수가 JavaScript 코드를 기반으로 하고 있다. 이를 지원하기 위해, 싱글 스레드 언어의 제약을 벗어나기 위한 방법을 찾아야 했다.

Web API의 일부로 제공되는 setTimeout()과 setInterval()과 같은 timeout 및 interval의 추가로 시작하여, Web 브라우저에서 제공하는 JavaScript 환경은 작업 스케줄링, 멀티스레드 애플리케이션 개발 등을 가능케하는 강력한 기능을 포함하도록 점진적으로 발전해 왔다. 여기서 queueMicrotask() 가 어떤 역할을 하는지 이해하기 위해서는 JavaScript 런타임이 코드를 스케줄링하고 실행할 때 어떻게 작동하는지 이해하는 것이 도움이 된다.

JavaScript execution contexts

(자바스크립트 실행 컨텍스트)

<aside> ❗ Note: 대부분의 JavaScript 프로그래머에게 이러한 세부 정보는 중요하지 않을 수 있다. 이 정보는 마이크로태스크가 왜 유용하며 어떻게 작동하는지에 대한 기반이 되는 정보로 제공된다. 관심이 없다면 건너뛰고, 필요한 경우 나중에 다시 참고할 수 있다.

</aside>

3 / 3

JavaScript 코드 조각이 실행될 때, 실행 컨텍스트 내에서 실행된다. 세 가지 유형의 코드가 새로운 실행 컨텍스트를 생성한다.

각 컨텍스트는 본질적으로 코드 내의 범위 수준이다. 이러한 코드 세그먼트가 실행을 시작하면 해당 컨텍스트에서 실행하기 위해 새로운 컨텍스트가 생성되며, 코드가 종료되면 해당 컨텍스트가 파괴된다.

let outputElem = document.getElementById("output");

let userLanguages = {
  Mike: "en",
  Teresa: "es",
};

function greetUser(user) {
  function localGreeting(user) {
    let greeting;
    let language = userLanguages[user];

    switch (language) {
      case "es":
        greeting = `¡Hola, ${user}!`;
        break;
      case "en":
      default:
        greeting = `Hello, ${user}!`;
        break;
    }
    return greeting;
  }
  outputElem.innerHTML += `${localGreeting(user)}<br>\\r`;
}

greetUser("Mike");
greetUser("Teresa");
greetUser("Veronica");

이 짧은 프로그램은 실행 컨텍스트를 세 개 포함하고 있으며, 프로그램이 실행되는 동안 여러 번 생성되고 파괴된다. 각 컨텍스트가 생성될 때는 실행 컨텍스트 스택에 추가된다. 컨텍스트가 종료되면 컨텍스트는 컨텍스트 스택에서 제거된다.