[typescript] 실행 컨텍스트와 호이스팅을 이용하여 변수 스코프를 이해하는 방법은 무엇인가요?

코드를 실행하면 JavaScript 엔진은 실행 컨텍스트를 생성하여 해당 코드의 실행 환경을 설정합니다. 이 실행 컨텍스트는 변수의 스코프와 호이스팅을 관리합니다. 이해하기 쉽도록 예제를 통해 실행 컨텍스트와 변수 스코프를 설명하겠습니다.

실행 컨텍스트란?

실행 컨텍스트는 코드가 실행될 때 생성되는 개별적인 환경을 말합니다. 각 함수나 블록 ({})의 실행은 해당 함수나 블록에 대한 실행 컨텍스트를 생성합니다. 이 실행 컨텍스트는 해당 함수나 블록의 변수, 함수 선언 및 다른 실행 환경과 관련된 정보를 포함합니다.

호이스팅(Hoisting)

호이스팅은 변수 및 함수 선언이 해당 스코프의 최상단으로 끌어올려지는 현상을 말합니다. 예를 들어:

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

위 예제에서 myVar이 선언되기 전에 해당 변수를 사용하고 있지만, JavaScript는 이를 에러 없이 실행합니다. 이는 JavaScript 엔진이 변수 선언을 해당 스코프의 최상단으로 끌어올리기 때문입니다.

변수 스코프

변수 스코프는 해당 변수에 접근할 수 있는 범위를 말합니다. JavaScript에서는 전역 스코프와 지역 스코프로 나뉩니다. 전역 스코프는 코드 어디에서든 접근 가능한 스코프를 말하고, 지역 스코프는 특정 함수나 블록 내에서만 접근 가능한 스코프를 말합니다.

var globalVar = 10;

function testFunction() {
  var localVar = 5;
  console.log(globalVar); // 10
}

console.log(localVar); // ReferenceError: localVar is not defined

위의 예제에서는 globalVar는 전역 스코프에, localVartestFunction 함수의 지역 스코프에 선언되었습니다. 전역 스코프에서는 localVar에 접근할 수 없기 때문에 에러가 발생합니다.

이를 이해하기 위해서는 실행 컨텍스트와 호이스팅을 함께 이해하는 것이 중요합니다. 실행 컨텍스트와 변수 스코프를 이해하면 JavaScript의 변수 관리 방식에 대한 이해도가 높아지게 됩니다.