JavaScript 및 TypeScript를 포함한 많은 프로그래밍 언어에서 실행 컨텍스트와 호이스팅은 중요한 개념입니다. 이러한 개념을 이해하는 것은 프로그램을 작성하고 디버깅하는 데 있어 매우 중요합니다. 이번에는 TypeScript에서 실행 컨텍스트와 호이스팅을 어떻게 이해해야 하는지 살펴보겠습니다.

실행 컨텍스트 (Execution Context)

실행 컨텍스트란?

실행 컨텍스트는 코드가 실행되는 환경을 의미합니다. 이 환경에는 현재 실행 중인 코드에 대한 정보뿐만 아니라 변수 및 함수 등의 정보도 포함됩니다. TypeScript에서는 각각의 함수 호출 또는 실행 중 코드 블록(예: 블록 스코프 변수 또는 함수)마다 독립적인 실행 컨텍스트가 생성됩니다.

실행 컨텍스트의 구성 요소

실행 컨텍스트에는 변수 객체, 스코프 체인, this 바인딩 등의 구성 요소가 있습니다. 변수 객체에는 현재 컨텍스트에 대한 변수, 매개변수 및 함수 선언 등이 포함되며, 스코프 체인은 코드 블록의 스코프를 나타냅니다.

예제

아래는 TypeScript에서 실행 컨텍스트를 나타내는 간단한 예제입니다.

function sayHello() {
  let message = "Hello, ";
  console.log(message + name);
}

let name = "John";
sayHello();

위 예제에서 sayHello 함수가 호출되면 새로운 실행 컨텍스트가 생성되며, 해당 실행 컨텍스트 내부에는 message 변수와 name 변수가 포함됩니다.

호이스팅 (Hoisting)

호이스팅이란?

호이스팅은 코드가 실행되기 전에 변수 및 함수 선언이 메모리에 끌어올려지는 현상을 의미합니다. TypeScript에서는 모든 선언(변수 및 함수)이 해당 스코프의 맨 위로 끌어올려지므로, 변수 및 함수를 선언하기 전에도 참조할 수 있습니다.

예제

아래는 TypeScript에서 호이스팅이 발생하는 예제입니다.

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

위 예제에서 myVar 변수의 선언이 해당 스코프의 맨 위로 끌어올려지기 때문에 초기화 전에도 myVar를 참조할 수 있습니다.

결론

TypeScript에서 실행 컨텍스트와 호이스팅은 코드를 이해하고 디버깅하는 데 있어 중요한 역할을 합니다. 이러한 개념을 잘 숙지하고 활용하면 더욱 효율적인 프로그래밍이 가능해질 것입니다.

자세한 내용은 MDN web docs를 참고하시기 바랍니다.