📗호이스팅

이번 콘텐츠에서는 개념 설명을 위해 var 키워드를 활용해 변수 선언을 합니다만, 실제로는 const, let 만 사용하는 것이 컨벤션이니 var 키워드의 사용은 지양하세요.

Hoist라는 영어 단어의 의미부터 알아볼까요?

(흔히 밧줄이나 장비를 이용하여) 들어올리다

(화물장애인을 들어올리기 위한) 승강 장치

어떤 사물을 끌어올리는 장비를 일반적으로 Hoist라고 합니다.

자바스크립트에서 우리가 사용하는 모든 변수 선언문은 스코프 내에서 최상위로 Hoisting 됩니다.

var a = 1;
console.log(a);

위와 같은 예제를 실행한다면 콘솔의 출력 결과는 분명 1이겠죠? 그렇다면 아래 예제는 어떨까요?

console.log(a);
var a = 1;

위의 예제를 실행했을때 에러가 발생할 것 같다고 생각하실 수도 있지만, 실제로 콘솔에 나타나는 출력 결과는 undefined이고, 이것이 바로 Hoisting이라는 현상 때문입니다.

우리가 작성한 실제 코드는 위와 같더라도, 해당 코드가 실행되는 "코드 구동 흐름"은 아래와 같다고 생각하시면 됩니다.

var a;  // 이 코드 구문은 var a = undefined; 와 같은 의미입니다.
console.log(a);
a = 1;

우리 코드의 최상위로 이동한 부분이 있죠? 바로 "변수 선언" 부분입니다.

우리가 작성하는 모든 변수 선언문은 해당 코드가 속한 스코프 내에서 최상위로 끌어올려진 상태로 실행됩니다. 우리 코드가 실행되기 전에 진행되는 전처리 작업 중 하나라고 생각하셔도 좋습니다. 중요한 부분은 "변수 선언문"만 끌어올려진다는 점입니다. 변수에 값을 대입 혹은 할당하는 구문은 우리가 실제로 작성한 흐름과 같이 실행됩니다.

아래와 같은 예제를 한번 생각해볼까요?

var a = 1;

function foo () {
  console.log(a);
  var a = 2;
}

foo();

위와 같은 코드를 실제로 작성했다고 가정할 경우, 실행되는 실제 "흐름"은 아래와 같다고 이해하시면 좋을것 같습니다.

var a = 1;

function foo () {
  var a;
  console.log(a);
  a = 2;
}

foo();

foo 함수 내부에 있던 a 변수 선언문이 종속된 스코프 내에서 최상위로 끌어올려진다는 사실을 감안한다면, 콘솔의 출력 결과에 대해 이해가 가실겁니다.

Function Expression (함수 표현식)

모든 변수 선언문에 대해 해당하는 흐름이기 때문에, 함수를 대입하는 경우에도 동일하게 적용됩니다. 그래서 함수 표현식으로 함수를 작성하는 경우에는 항상 실행문의 위치와 함수를 대입하는 구문의 위치가 중요합니다.

d();

var d = function () {
  console.log('I am inside function d');
};

d();

Function Declaration (함수 선언식)

함수 선언식으로 작성된 함수의 경우에는 항상 최상위로 Hoisting 되어 실행문의 순서가 중요하지 않아 편리합니다.

j();

function j () {
  console.log('j');
}

j();

조사해볼 것

우리가 자주 사용하는 let 키워드와 const 키워드의 호이스팅은 어떻게 동작할까요? Temporal Dead Zone이라는 것은 어떤 개념일까요?