JavaScript - 호이스팅 (Hoisting)

호이스팅이란 변수의 정의가 그 스코프에 따라 선언과 할당으로 분리되는 것을 의미한다. 쉽게 말하면 아직 선언되지 않은 변수나 함수를 호출하여 사용하는 것을 말한다.

 

이는 자바스크립트의 동작 방식 때문이다. 자바스크립트 함수는 실행되기 전 함수 안에 필요한 변수값들을 모두 모아서 유효범위의 최상단에 선언한다.

 

 

다음 코드를 노드에서 실행시켜보자. 기본적으로 함수를 호출하기 위해선 당연히 함수를 선언해주어야 한다.

 

function myFunc () {
    console.log('hello world!');
}

myFunc();

 

결과

 

PS C:\Users\bumsu\nodejs-projects\노드js교과서> node hello
hello world!

 

그런데 myFunc()을 선언되기 전 앞에다 두어도 실행이 잘 된다.

 

myFunc();

function myFunc () {
    console.log('hello world!');
}

 

결과

 

PS C:\Users\bumsu\nodejs-projects\노드js교과서> node hello
hello world!

 

이렇게 함수나 변수 등을 끌어 올려와 작동시키는 것을 호이스팅 (Hoisting) 이라고 한다. 그러나 이 경우는 웬만하면 피해야한다. 가독성이 어려워지거나 실수를 유발할 수 있기 때문이다.

 

변수의 경우는 함수와 조금 다르다. 다음과 같은 코드를 실행해보자.

 

var pizza = 'pizza';
console.log(pizza);
console.log(chicken);
var chicken = 'chicken';

 

결과

 

PS C:\Users\bumsu\nodejs-projects\노드js교과서> node hello
pizza
undefined

 

보면 pizza는 선언이 된 후에 로그에 찍혔기 때문에 콘솔에 제대로 잘 찍히지만, chicken의 경우 그렇지 않고 undefined라고 찍힌다. 이는 자바스크립트의 구동 방식이 chicken이라는 변수를 먼저 선언한 후, 'chicken'이라는 값이 할당되는 방식이기 때문이다. 그러나 이는 var에게만 유효하다. let 또는 const를 사용한 변수 선언을 호이스팅하려 하면 에러가 발생한다.

 

또한 var의 형태로 함수를 정의해주고 실행하는 형태도 호이스팅을 할 수 없다. 변수와 비슷하게 먼저 선언이 undefined로 된 후에 함수에 필요한 내용을 받아오는 형태이기 때문이다. 가령 아래와 같은 코드를 실행하면 var로 선언해주었음에도 에러가 발생한다.

 

myFunc();

var myFunc = function() {
    console.log('hello world!');
};

 

 

var 변수와 함수의 호이스팅을 적절히 이용할 수도 있겠지만, 당연히 부작용이 있다. 먼저 가장 중요하게, 코드의 가독성과 유지보수가 어려워진다. 호이스팅을 방지하기 위해 let과 const를 사용할 수도 있다 (그와 상관없이, 항상 var보다 let과 const의 사용이 훨씬 권장되기는 한다).

 

 

출처

https://beomy.tistory.com/7

https://gmlwjd9405.github.io/2019/04/22/javascript-hoisting.html