What is Hoisting?

Hoisting이란 무엇인가

 JavaScript에서 Hoisting은 interpreter가 변수와 함수의 선언 위치를 이들이 선언되기 이전에 미리 할당하는 것을 의미한다.

즉 JavaScript에서 선언문을 해당 Scope의 최상위로 끌어 올리는 동작이다.

실제로 변수와 함수의 선언이 물리적으로 코드의 상단으로 옮겨지는 것은 아니다.

Hoisting은 변수와 함수의 선언만 최상위로 올라오고 할당은 원래 위치에서 일어난다.

 

console.log(name) // undefined

let name = "Lee"

console.log(name) // Lee

 

위 코드를 살펴 보자.

첫 번째 console.log(name)을 보면 결과 값이 undefined이다.

JavaScript에 Hoisting이 없었다면 첫 번째 console.log(name)은 Error를 발생시켰을 것이다.

변수의 선언이 되어 있지 않기 때문이다.

하지만 hoisting이 일어나 변수의 선언이 최상단으로 끌어올려지기 때문에 Error를 발생시키지 않는다.

다만 변수의 할당은 hoisting이 일어나지 않으므로 변수의 선언만 존재하고 할당은 일어나자 않은 undefined를 출력한다.

두 번째 console.log(name)은 변수의 선언과 할당이 된 후이므로 hoisting과 관계없이 할당된 값인 "Lee"임을 알 수 있다.

 

앞서 언급한 것처럼 hoisting은 함수에서도 일어난다.

 

console.log(muFunc()); // "Hello, World!"

function myFunc(){
	return "Hello, World!"
};

 

위 코드에서 console.log(myFunc)이 먼저 호출되고 함수 선언이 다음으로 이루어졌지만 hoisting을 통해 "Hello, World!"가 출력된다.

하지만 변수로 할당하는 함수 표현식은 변수 hoisting과 동일하게 작동한다.

 

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

var myFunction = function() {
    return "Hello, world?";
};

 

함수의 선언 부분은 hoisting되지만 할당된 함수는 hoisting 되지 않기 때문에 아래와 같은 Error를 발생시킨다.