자바스크립트와 TypeScript에서 실행 컨텍스트와 호이스팅은 코드 실행 동안 변수와 함수 선언이 어떻게 처리되는지를 설명합니다. 실행 컨텍스트(execution context)는 변수, 함수, 스코프 등의 정보를 담고 있는 환경으로, 코드가 실행될 때 생성됩니다. 호이스팅(hoisting)은 변수와 함수 선언이 코드 상단으로 끌어올려지는 것을 의미합니다.

실행 컨텍스트와 호이스팅의 상호작용

다음 예시를 통해 실행 컨텍스트와 호이스팅의 상호작용을 살펴봅시다.

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

위 코드는 실제로 다음과 같이 해석됩니다.

var myVar; // 변수 선언이 호이스팅되어 코드 상단으로 올라감
console.log(myVar); // undefined
myVar = 5; // 할당은 그 자리에 남아 있음

변수 myVar의 선언 부분이 코드 상단으로 끌어올려지기 때문에 변수를 선언하기 전에 참조해도 undefined가 출력됩니다.

함수도 호이스팅됩니다.

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

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

위 코드는 다음과 같이 동작합니다.

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

따라서 함수 선언도 변수 선언처럼 상단으로 끌어올려지기 때문에 함수를 선언하기 전에 호출할 수 있습니다.

이러한 상호작용을 이해하면 코드가 실제로 실행될 때 변수와 함수가 어떻게 동작하는지 이해하는 데 도움이 됩니다.

참고 자료: MDN Web Docs