변수 호이스팅 [심화]

이미 한 번 변수 호이스팅에 대해 다뤄본 적이 있지만 자바스크립트 스터디에서 심화적으로 다뤄보기로 했다.

1. 변수 호이스팅이란?

자바스크립트에서 호이스팅(Hoisting)은 변수 선언과 함수 선언을 코드의 맨 위로 끌어올려지는 현상을 일컫는다.
그래서 개발자가 어느 라인 위치에 코드를 선언해도, 실행 되기전 코드가 최상단으로 끌어올려지고 실행되게 된다.

2. var 변수 호이스팅의 특성

• var 키워드로 변수를 선언하면 변수 호이스팅에 의해 변수 선언문이 스코프의 선두로 끌어 올려진 것처럼 동작한다.
• 즉, 변수 호이스팅에 의해 var 키워드로 선언한 변수는 변수 선언문 이전에 참조할 수 있다.
• 단 할당문 이전에 변수를 참조하면 언제나 undefined를 반환한다.

3. 호이스팅의 원인 (실행 컨텍스트)

소스코드의 평가 과정에서는 선언문으로 작성된 변수와 함수 등을 실행하여 변수와 함수 식별자를 키로 하여 실행 컨텍스트가 관리하는 환경에 등록한다.
자바스크립트 엔진은 함수선언문 해석 -> 변수 초기화 -> 코드실행 순서로 진행된다.
그러므로 코드를 실행할 땐 이미 함수 선언문과 변수가 생성되어있는 상태이다.

4. 변수 호이스팅이 일으킬 수 있는 에러

아래 코드를 보면 foo를 선언하는 코드는 맨 아래 있는데 위에 있는 console.log(foo)에서 레퍼런스에러가 뜨지 않는다!
보통 초기화되지 않은 변수는 접근할 시 레퍼런스 에러가 뜨는데, var변수는 값을 지정 안 하더라도 undefined로 미리 초기화를 해주기 때문이다.

console.log(foo) // undefined

foo = 123;

var foo;

이렇듯 var 변수는 런타임 이전에 자바스크립트 엔전에 의해 암묵적으로 '선언 단계'와 '초기화 단계'가 한번에 진행된다.
즉 선언 단계에서 스코프 (실행 컨텍스트의 렉시컬 환경)에 변수 식별자를 등록해 자바스크립트 엔진에 변수의 존재를 알린다.
그리고 즉시 초기화 단계에서 undefined로 변수를 초기화한다.
그리고 런타임 환경에서 변수 할당문에 도달하면 비로소 값이 할당된다.

5. 선언과 초기화가 분리되어 실행되는 let/const 키워드

let/const 키워드로 선언한 변수는 "선언 단계"와 "초기화 단계"가 분리되어 진행된다.
만약 초기화 단계가 실행되기 이전에 변수에 접근하려고 하면 참조 에러ReferenceError가 발생한다.
스코프의 시작지점부터 초기화 시작 지점까지 변수를 참고할 수 없는 구간을 일시적 사각지대(Temporal Dead Zone)이라 부른다.

(일시적 사각지대는 진짜 특수한 공간을 일컫는건 아니고, 현재 런타임에서 실제 초기화 코드에 도착하기 까지를 나타내는 것에 불과하다.)

6. let/const에서도 변수 호이스팅이 발생한다는 증거

let/const로 선언한 변수는 변수 호이스팅이 발생하지 않는 것처럼 보인다. 하지만 그렇지 않다.
호이스팅이 발생하지 않는다면 아래 코드는 전역변수를 참조해서 정상적으로 실행될 것이다.
그러나 아래 코드는 ReferenceError가 뜬다.

let foo = 1;
{
  console.log() // ReferenceError
  let foo = 2; // 지역변수
{

let/const도 호이스팅이 발생하긴 한다. 그러나 TDZ에 넣고 초기화를 막고 있는 것 뿐이다.

참고: 이건 제대로 전역변수를 참조해온다. 렉시컬 스코프 상에서 선언이 이루어지지 않았기 때문이다.

let foo = 1;
{
  console.log() // 1
  foo = 2; // 지역변수
{

자바스크립트는 ES6에서 도입된 let, const를 포함해서 모든 선언(var, let, const, function, function*, class)을 호이스팅한다.
단 let, const, class를 사용한 선언은 호이스팅이 발생하지 않는 것처럼 동작한다.

7. 함수 호이스팅과 변수 호이스팅과의 차이

위에 서술한 것처럼 자바스크립트에선 함수 선언식도 호이스팅이 된다.
그러나 변수 호이스팅은 undefined로 초기화 해놓는 반면,
함수 호이스팅은 함수의 선언을 통째로 끌어올린다. 따라서 함수를 선언하기 전에 호출해도 정상적으로 작동한다.
(함수 스코프 내의 스크립트들이 정상 작동한다.)

그러나 어디서든 함수를 호출할 수 있다는 자유는 때론 에러의 원인이 되기도 한다.

이런 에러를 막고싶다면 함수 표현식을 쓰는 것이 좋다.

함수 선언식 (호이스팅 발생)

foo() // happy day

function foo() {
    console.log("happy day")
}

함수 표현식 (호이스팅 발생은 하나 실제 표현식에 도달하기 전까진 값을 할당하지 않는다)

foo() // ReferenceError

const foo = () => {
    console.log("happy day")
}