변수 호이스팅

이성훈·2024년 7월 28일

JavaScript deep dive hoisting scope

Javascript

목록 보기

5/11

Javascript Deep Dive pp.42-45, pp.212-214

런타임

소스코드가 한 줄씩 순차적으로 실행되는 시점이다.

호이스팅(hoisting)

변수 선언은 런타임 이전에 실행된다.
자바스크립트 엔진은 런타임 이전에 소스코드의 평가 과정을 거치면서 소스코드가 실행되기 위한 준비를 한다. 이 과정에서 모든 선언문을 소스코드에서 찾아내 먼저 실행하는데, 이를 호이스팅이라 한다. 소스코드의 평가 과정이 끝나고 나면 변수 선언을 포함한 모든 선언문을 제외하고 소스코드를 한 줄씩 순차적으로 실행한다.

모든 선언문을 제외한다고 되어 있는데, var x = 0 같은 경우는 선언문 var x와 할당문 x = 0의 단축 형태이므로, 할당문 x = 0만 남게 되는 것 같은데, 이게 맞는 지가 의문이다.

호이스팅 예제

console.log(a); // undefined. Reference error가 아님에 유의.
a = 10;
var a; // 변수 선언
console.log(a); // 10

var

변수의 선언과 초기화가 동시에 진행되며, 해당 변수를 undefined로 초기화한다.
주의할 점은 var의 관점에서는 초기화와 할당을 구분해야 한다는 것이다. 할당은 할당문이 따로 있어 런타임에 실행되지만, 초기화는 선언과 동시에 일어나므로 런타임 이전에 일어난다.

let

선언과 초기화가 따로 진행된다. 초기화도 할당과 마찬가지로 런타임에 발생하므로, 초기화를 최초의 할당으로 이해해도 괜찮다. 선언과 초기화 사이에 TDZ(Temporal Dead Zone, 임시 사각 지대)가 존재하여, TDZ에서 해당 변수 참조 시 ReferenceError가 발생한다.

console.log(a); // ReferenceError: Cannot access 'a' before initialization
let a;

참고로, 위 코드에서 선언문을 없애면 ReferenceError: a is not defined 로 에러 내용이 다르다.

var과 let의 또다른 차이점

var 키워드로 선언한 전역 변수와 전역 함수, 그리고 선언하지 않은 변수에 값을 할당한 암묵적 전역은 전역 객체 window의 프로퍼티가 된다. 전역 객체의 프로퍼티를 참조할 때 window를 생략할 수 있다. let 키워드로 선언한 전역 변수는 전역 객체의 프로퍼티가 아니다.

예제

var x = 1; // 전역 변수
y = 2; // 암묵적 전역
function foo() {} // 전역 함수
console.log(window.x);
console.log(x);
console.log(window.y);
console.log(y);
console.log(window.foo);
console.log(foo);