[JS] Hoisting이란?

 

자바스크립트 엔진은 코드를 실행할 때 함수와 변수 선언을 코드 상단으로 끌어올리는 호이스팅 작업을 실행한다.  

 

왜 그럴까?

 

호이스팅를 통해 개발자는 변수 선언과 변수사용을 자유롭게 활용 가능하다. 즉 항상 상단에 변수 선언과 할당을 하지 않더라도 같은 스코프라면 언제든지 변수를 사용할 수 있게 되는 것이다. 

 

하지만 함수의 경우 선언식인지 표현식인지에 따라 약간의 차이가 발생한다. 

 

예를 들어 선언식의 경우 아래와 같이 작동을 한다. 

 

foo(); // "foo"

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

 

하지만 만약 표현식의 경우 변수 선언만이 호이스팅으로 이루어지기 때문에 아래와 같은 결과를 가지게 된다. 

 

foo(); // Uncaught TypeError: foo is not a function
var foo = function () { }

bar(); // Uncaught ReferenceError: Cannot access 'bar' before initialization
let bar = function () { }

baz(); // Uncaught ReferenceError: Cannot access 'baz' before initialization
const baz = function () { }