[Javascript] 호이스팅(Hoisting)은 어떻게 동작하는걸까?

1. 개요

Javascript에서 코드를 작성하거나, 읽다보면 아래와 같이 작성된 경우를 볼 수 있다.

doSomething();

...

function doSomething() {
  console.log("something");
}

doSomething함수가 정의되기 전 doSomething함수를 사용했다. 아직 정의되지 않은 함수를 사용했기 때문에 오류가 발생해야 할 것 같다.

하지만 코드를 실행해보면 코드가 오류 없이 정상적으로 동작한다. 왜 이런 현상이 나타나는걸까?

Javascript는 코드가 실행되기 전 호이스팅(Hoisting)이 일어나기 때문이다.

이번 글에서는 호이스팅이 무엇인지, 어떻게 동작하는지 알아보자!

 

2. Hoisting이란?

보통 호이스팅이라 하면 "모든 변수와 함수 선언이 코드의 상단으로 끌어올려지는 현상"이라 설명한다.

이 설명을 들으면 변수, 함수 선언이 물리적으로 코드의 상단으로 움직이는것처럼 느껴질 수 있는데 이는 실제 동작이 아니다.

MDN문서에 따르면 호이스팅은 변수, 함수 선언이 맨 위로 끌어올려지는 "것처럼"보이는 현상이다.

실제로 선언문이 움직이는것이 아니다.

MDN문서에 설명된 호이스팅

 

3. Hoisting의 동작

실제 호이스팅은 아래와 같이 동작한다.

 

1) Javascript가 코드를 실행하기 전 컴파일 단계에서 코드를 스캔(실행이 아님!)한다.

2) 이 과정에서 선언(변수, 함수 등)을 찾아 Lexical Environment라는 공간에 저장한다.
    Lexical Environment는 일종의 객체로 아래와 같이 변수, 함수등의 식별자를 정의한다.

// 작성된 코드
function testFunction() {
  const a = 1;
  const b = 2;
  const c = 3;

  function doSomething(){}
}

testFunction()

// Lexical Environment
{
  environmentRecord : {
    a : 1,
    b : 2,
    c : 3,
    doSomething : <Function>
  },
  outer : testFunction.[[Environment]]
}

3) 이후 Javascript코드가 실행되며 변수 함수 등은 Lexical Environment의 값을 참조하여 사용한다.

 

이런 동작 때문에 마치 "선언부가 물리적으로 끌어올려진것처럼"동작하는 것이다.

 

4. Hoisting이 일어날 때 타입별 동작

Lexical Environment에 식별자를 정의할 때 var, let, const, function은 각각 다르게 정의된다.

• var : undefined로 초기화된다. 변수 선언 전 호출하면 undefined를 출력한다.
• let, const : Lexical Environment공간에 저장되지만 초기화되지 않고 Temporal Dead Zone(TDZ)에 위치한다. 이 변수에 접근하려 하면 ReferenceError가 발생한다.
• function : "함수 전체 정의"가 Hoisting된다. 그렇기에 개요에서 다뤘던 코드가 문제없이 동작할 수 있었다.

doSomething(); // "something"

function doSomething() {
  console.log("something");
}

console.log(val1); // undefined

var val1 = 1;

console.log(val2); // ReferenceError

let val2 = 2;

console.log(val3); // ReferenceError

const val3 = 3;