JavaScript에서 var로 선언한 변수의 호이스팅(hoisting) 현상은 실행 컨텍스트(execution context)의 생성 단계에서 발생합니다. 자바스크립트는 코드를 실행하기 전에 두 단계를 거치는데, 이를 "생성 단계(creation phase)"와 "실행 단계(execution phase)"라고 합니다.
생성 단계 (Creation Phase)
생성 단계에서 자바스크립트 엔진은 스코프(scope)를 결정하고, 현재 실행 컨텍스트에 대한 변수 객체(variable object)를 생성합니다. 이 단계에서 발생하는 중요한 작업들은 다음과 같습니다:
1. 변수 호이스팅(Variable Hoisting): var로 선언된 모든 변수들은 해당 스코프의 최상단으로 끌어올려집니다(hoisted). 이때 변수는 undefined로 초기화됩니다. 실제 코드의 위치와 상관없이 변수 선언이 스코프의 최상단으로 이동하는 것처럼 동작합니다. 하지만, 변수의 할당은 실제 코드가 실행될 때 발생합니다.
2. 함수 선언 호이스팅(Function Declaration Hoisting): 함수 선언도 호이스팅되지만, 이 경우에는 함수 전체가 호이스팅됩니다. 이는 함수를 선언하기 전에 호출할 수 있음을 의미합니다.
3. 스코프 결정: 실행 컨텍스트의 스코프 체인이 생성되며, 이를 통해 현재 컨텍스트에서 접근할 수 있는 변수, 함수, 그리고 외부 환경을 결정합니다.
실행 단계 (Execution Phase)
실행 단계에서는 실제 코드가 실행됩니다. 이 단계에서 변수에 값이 할당되고, 실제 연산이 수행됩니다. var로 선언된 변수의 경우, 생성 단계에서 이미 undefined로 초기화되어 있으므로, 변수를 선언하기 전에 접근해도 오류가 발생하지 않고 undefined가 반환됩니다. 반면, let이나 const로 선언된 변수는 "일시적 사각지대(Temporal Dead Zone, TDZ)"에 속하게 되어 선언 전에 접근하려 하면 참조 오류(ReferenceError)가 발생합니다.
요약
따라서, var로 선언된 변수의 호이스팅 현상은 실행 컨텍스트의 생성 단계에서 변수와 함수 선언이 메모리 공간에 저장되면서 발생합니다. 이 과정에서 변수는 undefined로 초기화되며, 이는 변수 선언이 코드 상에서 실제 위치한 곳보다 먼저 처리됨을 의미합니다. 실행 단계에서 변수에 실제 값이 할당되며, 코드는 위에서 아래로 순차적으로 실행됩니다.
