[FE/JavaScript] 호이스팅(Hoisting)

📌 호이스팅(hoisting)

• 변수 및 함수 선언문이 스코프 내의 최상단으로 끌려올려지는 현상을 말함
• 주의 : 선언문이 올려지는것이지 대입문은 끌여올려지지 않는다.

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

컴파일러는 자바스크립트 엔진이 인터프리팅(Interpreting)을 하기 전에 컴파일을 하는데
이 때, var a = 2;구문을 var a와 a = 2 두개의 구문으로 본다.

var a는 변수 선언문으로 컴파일을 할 때 처리하고, a = 2는 실행할 때까지 내버려둔다.
변수 a는 호이스팅 된다.

따라서 위 console.log(a)의 결과는 undefined 라는 결과가 나온다.

📌 함수 호이스팅

f();
function f() { console.log(`함수 호이스팅`) };

의 결과는 함수 호이스팅이다.

🔸주의 : 함수 표현식은 호이스팅 되지 않는다.

f();
var f = function() {}

위 경우는 변수 f의 호이스팅이 발생해 참조에러는 발생하지 않지만 undefined이기 때문에 TypeError가 발생한다.

🔸주의 : 함수와 변수 선언문 중에하는 함수 선언문이 먼저 호이스팅된다.

f();
var f = function(){ console.log('변수 호이스팅') }
function f() {
  console.log('함수 호이스팅');
}

의 결과는 함수 호이스팅이다.

출처

You don't know JS, Scope and Closures : Chapter 5: The (not so) Secret Lifecycle of Variables