Hoisting 이란?

Hoist란 변수 선언을 끌어올리는 것을 말한다. 즉,
1) 변수가 함수 내에서 정의되었을 경우, 선언이 함수의 최상위로 끌어올려지며
2) 변수가 함수 바깥에서 정의되었을 경우, 전역 컨텍스트의 최상위로 끌어올려진다.

1) 변수가 함수 내에서 정의되었을 경우, 선언이 함수의 최상위로 호이스트 된다.

아래 함수에서 var a; 가 아예 선언되지 않았다면, ReferenceError: a is not defined 오류를 반환할 것이다. 하지만 var a;가 함수 내 최상위로 호이스트 되었기 때문에 컴퓨터는 console.log(a)만나면 'a가 선언은 됐는데, 할당된 값이없는데?' 하며 undefined를 반환한 것이다.

function hoist () { 
  console.log(a); //undefined
  var a = "A";
  console.log(a) //'A'
  // 
}

hoist()

위의 코드를 컴퓨터가 읽는 순서는 아래와 같다.

function hoist () { 
  var a;  //선언
  console.log(a); //undefined ('a가 선언은 됐는데, 할당된 값이없는데?')
  a = "A"; //할당
  console.log(a) //'A'
}

hoist()

2) 변수가 함수 바깥에서 정의되었을 경우, 전역 컨텍스트의 최상위로 변경 된다.

var hoist; 는 함수 바깥에서 정의되어 전역 컨텍스트의 최상위에서 읽힌다. 컴퓨터는 hoist();를 만나고, '음, hoist가 선언은 되어있는데 함수는 아닌걸?'하고 type error를 반환한다. 마찬가지로, console.log(hoist)에게는 var hoist;에게 할당된 값이 없기때문에 undefined를 반환한다.

hoist(); //TypeError: hoist is not a function
console.log(hoist)  //undefined

var hoist = 
    function () {
  console.log("hoist!");
}

위의 코드를 컴퓨터가 읽는 순서는 아래와 같다.

var hoist;  //선언
hoist(); //TypeError: hoist is not a function ('음, `hoist`가 선언은 되어있는데 함수는 아닌걸?')
console.log(hoist)  //undefined ('hoist가 선언은 됐는데, 할당된 값이없는데?')

hoist =  //할당
    function () {
  console.log("hoist!");
}