이러한 실행 컨텍스트 스택은 함수 호출 및 변수 스코프 등과 같은 작업을 처리하기 위해 사용됩니다. 이 스택은 프로그램이 실행되는 동안 함수 호출 및 실행 컨텍스트 생성 및 해제를 효율적으로 처리하여 프로그램의 실행 흐름을 관리합니다.

예를 들어, 다음과 같은 TypeScript 코드에서 실행 컨텍스트 스택을 설명할 수 있습니다:

function outerFunction() {
  const outerVariable = "Outer";

  function innerFunction() {
    const innerVariable = "Inner";
    console.log(outerVariable + " " + innerVariable);
  }

  innerFunction();
}

outerFunction();

위 코드에서 outerFunction이 호출되면 해당 실행 컨텍스트가 스택 맨 위에 쌓이게 되고, 그 안의 innerFunction이 호출되면 새로운 실행 컨텍스트가 생성되어 스택의 맨 위에 추가됩니다. 함수의 실행이 종료되면 해당 실행 컨텍스트는 스택에서 제거됩니다.

참고 자료:

• https://developer.mozilla.org/en-US/docs/Glossary/Execution_context
• https://www.freecodecamp.org/news/execution-context-in-javascript/