TIL no. 50 - 호이스팅 (hoisting) 이 무엇인가요?

호이스팅이란,

javascript 함수 내의 모든 변수 선언들을 해당 함수 유효범위의 최상단으로 끌어올리는 것을 의미합니다.

정의만 들었을 때는 쉽게 이해가 되지 않을 수 있기 때문에 코드를 보면서 이해해 보도록 하겠습니다.

 

function ImHungry() {
	console.log(pizza);
    var pizza = 'pizza is good';
}

 

위의 간단한 코드를 보겠습니다.

ImHungry 라는 함수 안에서 console.log에 아직 선언되지 않은 pizza를 출력했습니다.

출력한 뒤에 pizza가 선언되었기 때문에 위의 코드에서 에러가 발생해야 할 것 같지만 자바스크립트에서는 undefined를 출력하고 넘어갑니다. 이 이유는 두번째 코드인 var pizza = 'pizza is good' 에서 var pizza를 해당 함수의 최상단으로 호이스팅하기 때문입니다.

 

호이스팅의 개념을 코드로 표현해보면,

 

function ImHungry() {
	var pizza;
    console.log(pizza);
    var pizza = 'pizza is good';
}

 

이 코드와 같이 표현된다고 생각하면 됩니다.

 

 

호이스팅 개념에서 주의할 점 !

- 함수 선언식에서는 호이스팅이 발생하지만 함수 표현식에서는 호이스팅이 일어나지 않습니다 .

- var 는 블록 레벨 스코프가 아닌 함수 블록안에서만 유효한 함수 스코프이기 때문에 일어나는 것입니다.

 

​

함수 선언문으로 함수를 정의하게 되면 생성과는 상관없이 호이스팅을 이용한 호출이 가능하기 때문에 간편하다고 생각할 수도 있습니다.

하지만 규모가 큰 애플리케이션을 개발하는 경우 너무 많은 코드를 변수객체에 저장하기 때문에 응답속도가 느려질 수 있습니다. 

대규모의 애플리케이션의 개발로 방대한 양의 코드일 경우 이미 선언한 이름으로 또 다시 변수를 선언하게 될 경우 유연하게 처리하려다 오류를 발생시킬 수도 있으니 이 또한 유의해야 합니다.

​

또한 함수 호이스팅이 함수 호출 전 반드시 함수를 선언하여야 한다는 규칙성을 무시하기 때문에 코드의 구조를 불규칙하게 만들 수 있어

함수표현식을 쓰는 것을 권장합니다.