용어 먼저 정리하기

컴파일 (Compile)

• 소스코드를 실행하기 전에 기계어(또는 중간 코드)로 한번에 번역하는 과정이다.
• 코드 전체를 분석하고 최적화한 뒤 실행 가능한 형태로 변환한다.

컴파일러 (Compiler)

• 컴파일을 수행하는 프로그램이다.
• JavaScript에서는 엔진 내부에 컴파일러가 포함되어 있어 인터프리팅 전에 컴파일 단계를 먼저 거친다.

인터프리팅 (Interpreting)

• 컴파일과 다르게 소스코드를 한번에 읽어서 번역하지 않는다.
• 런타임 상태의 소스코드를 한 줄씩 번역하면서 프로그램을 구동하는 방식이다.
• 한 줄씩 번역한 코드가 바로 기계어가 되는 것이 아니고 중간 코드로 번역된다.
• 중간 코드는 다른 프로그램에 의해 기계어로 번역되어 실행된다.

런타임 (Runtime)

• 프로그램이 실제로 실행되고 있는 시점 또는 환경을 말한다.
• JavaScript에서는 브라우저나 Node.js가 런타임 환경에 해당한다.

실행 컨텍스트 (Execution Context)

• 코드가 실행되기 위해 필요한 환경 정보를 모아놓은 객체이다.
• 함수가 호출되거나 전역 코드가 실행될 때 생성된다.
• 실행 컨텍스트가 생성되는 시점에 변수와 함수 선언이 먼저 수집되며, 이 과정이 호이스팅과 관련된다.

렉시컬 스코프 (Lexical Scope)

• 함수가 선언된 위치를 기준으로 상위 스코프가 결정되는 방식이다.
• 함수가 어디서 호출되었는지가 아니라 어디서 정의되었는지에 따라 스코프가 정해진다.

호이스팅이란?

• "끌어올린다"라는 의미를 지닌다.
• 변수 및 함수 선언문이 스코프 내 최상단으로 끌어올려지는 현상을 말한다.
• 대입문은 끌어올려지지 않는다.
• 실행 컨텍스트 생성 시 렉시컬 스코프 내의 선언이 끌어올려지는 것을 호이스팅이라고 한다.

호이스팅 예시

console.log(a);
var a = 2;

1. 컴파일러는 JS 엔진이 인터프리팅을 하기 전에 컴파일을 하는데, 이때 var a = 2;를 2개의 구문으로 나눈다.
2. var a;와 a = 2;
3. var a;는 변수 선언문에 해당한다.
4. 컴파일할 때 처리하고, a = 2;는 실행할 때까지 냅둔다.
5. 따라서 변수 a는 호이스팅이 되고 콘솔에는 아래와 같은 결과가 출력된다.
6. undefined → 변수 선언문만 호이스팅되고 초기화가 안 되었기 때문.

함수 선언문과 함수 표현식

• 함수 선언문은 호이스팅 되지만, 함수 표현식은 호이스팅 되지 않는다.

함수 선언문

hello(); // "Hello!" 정상 출력

function hello() {
  console.log("Hello!");
}

• function 함수이름() {} 형태로 작성한다.
• 함수 전체가 호이스팅 되기 때문에 선언 전에 호출해도 정상적으로 동작한다.

함수 표현식

hello(); // TypeError: hello is not a function

var hello = function () {
  console.log("Hello!");
};

• 변수에 함수를 대입하는 형태로 작성한다.
• var hello는 호이스팅 되면서 undefined로 초기화된 상태이다. 함수 대입은 호이스팅 되지 않기 때문에, 선언 전에 호출하면 undefined를 함수로 호출하는 꼴이 되어 TypeError가 발생한다.

TypeError와 ReferenceError의 차이

• var + 함수 표현식 → 호이스팅 + undefined로 초기화 → undefined를 함수로 호출 → TypeError
• let, const → 호이스팅은 되지만 초기화 자체가 안 됨 (TDZ) → 변수에 접근 자체가 불가 → ReferenceError

let, const와 호이스팅

• let, const도 호이스팅 자체는 된다.
• 하지만 let, const는 초기화 전에는 접근 자체가 불가능하다.
• 때문에 해당 변수를 사용 시에 ReferenceError가 발생한다.

TDZ (Temporal Dead Zone)

• let, const로 선언된 변수가 호이스팅은 되었지만, 초기화되기 전까지 접근할 수 없는 구간을 TDZ(Temporal Dead Zone) 라고 한다.
• 변수 선언 이전의 코드 영역에서 해당 변수에 접근하면 ReferenceError가 발생하는 이유가 바로 이 TDZ 때문이다.

최종 정리

호이스팅이란 변수 및 함수 선언문이 스코프 내 최상단으로 끌어올려지는 현상을 말합니다. JavaScript 엔진은 코드를 실행하기 전에 컴파일 단계를 거치는데, 이때 실행 컨텍스트가 생성되면서 렉시컬 스코프 내의 선언들이 먼저 수집됩니다. 이 과정에서 var로 선언된 변수는 선언부만 끌어올려지고 대입문은 그대로 남기 때문에 선언 전에 접근하면 undefined가 출력됩니다. 함수 선언문은 통째로 호이스팅 되지만, 함수 표현식은 변수처럼 취급되어 undefined로 초기화된 상태이므로 선언 전에 호출하면 TypeError가 발생합니다. let과 const도 호이스팅 자체는 되지만 TDZ(Temporal Dead Zone)로 인해 초기화 전까지 접근이 불가능하여 ReferenceError가 발생합니다. 이처럼 TypeError는 값은 있지만 함수가 아닌 것을 호출할 때, ReferenceError는 변수 자체에 접근할 수 없을 때 발생하는 것이므로 그 차이를 명확히 이해하는 것이 중요합니다.