[typescript] 실행 컨텍스트와 호이스팅의 동작 메커니즘을 자세히 설명해주세요.

15 Dec 2023

자바스크립트와 TypeScript에서 실행 컨텍스트와 호이스팅은 코드가 실행되는 방식을 이해하는데 중요한 역할을 합니다. 이들을 이해하면 코드가 어떻게 동작하는지 이해하고, 문제를 해결하고, 효율적인 코드를 작성하는 데 도움이 됩니다.

실행 컨텍스트

실행 컨텍스트는 코드가 실행될 때 생성되는 환경을 말합니다. 각 실행 컨텍스트는 변수, 함수 선언 및 해당 스코프와 관련된 정보를 포함하고 있습니다. 실행 컨텍스트는 크게 세 가지 타입으로 구분됩니다: 전역 컨텍스트, 함수 컨텍스트, eval 컨텍스트.

각 실행 컨텍스트는 변수 객체, 스코프 체인, this 바인딩을 가지고 있으며, 실행 순서, 변수 호이스팅, 스코프 체인 생성 등의 내부적인 동작을 수행합니다.

호이스팅은 코드 내에서 변수 및 함수 선언을 컨텍스트 내 상단으로 끌어올리는 동작을 말합니다. 다만, 실제로 할당되는 부분은 그 자리에 유지됩니다.

예를 들어, 다음 TypeScript 코드에서 변수와 함수 선언이 호이스팅되는 구조를 살펴봅시다.

console.log(myVar); // undefined
var myVar = 5;

myFunc(); // "Hello, world!"
function myFunc() {
  console.log("Hello, world!");
}

이 코드는 실제로 다음과 같이 동작됩니다.

var myVar;
function myFunc() {
  console.log("Hello, world!");
}

console.log(myVar); // undefined
myVar = 5;

myFunc(); // "Hello, world!"

이유는 TypeScript에서 변수와 함수 선언이 코드가 실행되기 전에 컨텍스트 상단으로 끌어올려지기 때문입니다. 하지만, 변수에 할당된 값은 그 자리에 유지됩니다.

이처럼 실행 컨텍스트와 호이스팅은 코드가 실행될 때 어떻게 동작하는지 이해하는 데 중요한 개념입니다.