TIL 95. Hoisting이란?

Hoisting이란?

• Hoisting은 JavaScript에서 변수와 함수 선언을 현재 스코프의 최상위로 끌어올리는 것.
• 컴파일 단계에서 변수와 함수 선언을 현재 스코프의 최상위로 이동시킴
• 그러나, 변수의 초기화는 호이스팅 X
  따라서 변수를 선언하고 값을 할당하기 전에 변수를 사용하면, 변수는 undefined 값을 가짐
• 함수 선언문으로 선언한 함수는 변수 선언과 마찬가지로 최상위로 끌어올려짐
• 함수 표현식, 화살표 함수로 선언한 함수는 호이스팅 X

변수 호이스팅

변수 호이스팅은 var 키워드로 선언된 변수에 대해서만 적용
const let은 TDZ(Temporal Dead Zone) 때문에 변수를 선언하기 전에 접근하면 ReferenceError가 발생

console.log(x);
var x = 10;

위 코드에서는 x 변수가 선언되기 전에 console.log(x)가 호출
x 변수의 선언이 호이스트되어 현재 스코프의 최상위로 이동하기 때문
따라서 위 코드는 다음과 같이 해석

var x;
console.log(x);
x = 10;

함수 호이스팅

함수 호이스팅은 함수 선언문에서만 적용
함수 표현식, 화살표 함수에서는 호이스팅 X

foo();

function foo() {
  console.log("Hello, world!");
}

위 코드에서는 함수 foo가 선언되기 전에 foo()가 호출
이는 함수 foo의 선언이 호이스트되어 현재 스코프의 최상위로 이동하기 때문
따라서 위 코드는 아래 코드로 해석

function foo() {
  console.log("Hello, world!");
}

foo();

하지만 함수 표현식에서는 호이스팅 X

foo();

var foo = function() {
  console.log("Hello, world!");
}

위 코드에서는 foo 변수가 선언되기 전에 foo()가 호출.
그러나 이 경우에는 함수 표현식으로 foo를 정의하였기 때문에, 호이스팅 X
따라서 위 코드는 Uncaught TypeError: foo is not a function에러가 발생

변수와 함수 호이스팅

변수 호이스팅과 함수 호이스팅이 모두 발생할 때, 함수 호이스팅이 변수 호이스팅보다 우선.
따라서 다음과 같은 코드에서는 함수 foo가 변수 x보다 먼저 호출.