자바스크립트 호이스팅(Hoisting)

자바스크립트의 호이스팅은 자바스크립트 실행시 var 변수나 함수의 선언부가 유효한 범위의 최상위로 끌어올려지는 것을 말합니다.

호이스팅으로 번거로움이 발생하기 때문에
되도록이면 함수는 상단에 선언하고, let이나 const를 사용하는것이 좋지만 아직 ES5도 많이 사용되기 때문에 호이스팅 개념에 대해 이해하고 있는 것이 좋습니다.

var 변수의 호이스팅

기본개념은 아래와 같이 자바스크립트 실행시 변수가 호이스팅되어 상단에 끌어올라오고 아래에서 다시 값이 할당됩니다.

실행전

var test1 = "테스트1";
var test2 = "테스트2";

실행후

var test1;
var test2;

test1 = "테스트1";
test2 = "테스트2";

그렇다면 var 선언을 함수내에서 했을때는 어떻게 될까요?
결론은 함수내의 상단으로 호이스팅되어, 함수밖에서는 사용할 수 없습니다.

function test(){
  console.log("테스트입니다.");
  var testVar = "test함수내 선언한 변수";
}

test();
alert(testVar);

이 코드를 실행하면 아래와 같이
Uncaught ReferenceError: testVar is not defined
가 발생합니다.
왜냐하면 var testVar 는 test()함수내에서만 호이스팅 되기 때문에
함수밖에서는 사용할 수 없습니다.

추가로 let, const 는 호이스팅되지 않습니다!

함수(표현식)의 호이스팅

실행전

sample();
function sample(){
}

실행후

function sample(){
}
sample();

실행전에는 아래에 있던 함수선언부가 실행시 상단으로 끌어올려지기 때문에 에러가 나지 않고 정상 실행됩니다.

함수(선언식)의 호이스팅

함수 선언식을 사용할 경우 호스팅으로 인해 함수명이 변수로 먼저 선언되어 주의할 필요가 있습니다.

우선 함수선언식에서 호이스팅이 일어나는 간단한 예제입니다.

실행전

var sample = function(){
}

실행후

var sample;
sample = function(){
}

sample 변수가 미리 선언되고, 그 이후에 function부분이 할당됩니다.

그럼 이제 주의할 부분은, sample이 변수로 선언되어 있기 때문에 function이 할당되기 전에 sample()을 호출하면 에러가 발생하는 것을 살펴보겠습니다.

sample(); //에러 (변수로 호이스팅되기때문에 함수호출방식은 에러발생
var sample = function(){
}
sample(); //정상 실행