[hoisting, scope] 호이스팅과 스코프

호이스팅과 스코프

호이스팅

호이스팅은 JavaScript의 실행 컨텍스트에서 변수와 함수 선언이 코드 실행 전에 해당 스코프의 최상단으로 끌어올려지는 것처럼 보이는 현상이다. 중요한 점은 선언만 끌어올려지고, 초기화는 끌어올려지지 않는다는 것이다.

JavaScript에서 변수를 선언할 때 사용하는 주요 키워드에는 var, let, const가 있다.

스코프(Scope)

스코프란 변수가 유효한 범위를 정의한다. JavaScript에는 두 가지 주요 스코프가 있다.

• 전역 스코프(Global Scope): 스크립트 전체에서 접근할 수 있는 변수.
• 지역 스코프(Local Scope): 특정 함수나 블록 내에서만 유효한 변수.

var는 함수 스코프를 따르고, let과 const는 블록 스코프를 따른다.

var

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

첫째줄의 변수 x 는 undefined가 반환된다.

var로 선언된 변수는 호이스팅 시 선언과 함께 undefined로 초기화된다.
그래서 변수 선언 전에 변수 x 를 출력하면 에러 없이 undefined가 출력된다. 나중에 x에 값이 할당되면 그 이후의 호출에서는 할당된 값이 반환됩니다.

let & const

console.log(x); // ReferenceError: Cannot access 'x' before initialization
let x = 5;
console.log(x); // 5

let과 const로 선언된 변수도 호이스팅은 되지만, var와 다르게 초기화되지 않는다.
선언은 스코프의 최상단으로 끌어올려지지만, 초기화는 실제 선언문에 도달했을 때 이루어진다.
그 사이에 있는 영역은 TDZ(Temporal Dead Zone, 일시적 사각지대)에 속하는데, 이 구간에서는 변수를 참조할 수 없기 때문에 ReferenceError가 발생한다.

호이스팅을 시각적인 관점에서 간단하게 정리하자면,

• var: 선언과 함께 초기화(undefined) → console.log 호출 시 undefined가 반환된다.
• let과 const: 선언만 호이스팅, 초기화는 선언 시점에서 → console.log 호출 시 ReferenceError가 발생한다.

이후 포스팅에서는 호이스팅, 스코프와 밀접한 관련이있는 실행 컨텍스트에 대해 포스팅하도록 하겠다.