[Javascript] 함수 호이스팅

모든 변수는 함수 본문 어느 부분에서 선언 되더라도 내부적으로 함수의 맨 윗부분으로 끌어올려진다. 함수 또한 결국 변수에 할당되는 객체이기 때문에 동일한 방식이 적용된다.
함수 선언문을 사용하면 변수 선언 뿐 아니라 함수 정의 자체도 호이스팅되기 때문에 자칫 오류를 만들어내기 쉽다.

 

//안티패턴 

//전역 함수
function foo() {
	alert('global foo;);
}

function bar() {
	alert('global bar');
}

function hoistME() {
	console.log(typeof foo); // "function"
    console.log(typeof bar); // "undefined"
    
    foo(); // "local foo"
    bar(); // TypeError: bar is not a function
    
    //함수 선언문:
    //변수 'foo'와 정의된 함수 모두 호이스팅된다.
    function foo() {
    	alert('local foo');
    }
    
    //함수 표현식:
    //변수 'bar'는 호이스팅 되지만 정의된 함수는 호이스팅 되지 않는다. 
    var bar = function () {
    	alert('local bar');
    };
}
hoistMe();

hostMe()함수 내에서 foo와 bar를 정의하면, 실제 변수를 정의한 위치와 상관 없이 끌어올려져 전역 변수인 foo와 bar를 덮어쓰게 된다. 그런데 지역 변수 foo()는 나중에 정의 되어도 상단으로 호이스팅되어 정상 동작하는 반면, bar()의 정의는 호이스팅되지 않고, 선언문만 호이스팅된다. 때문에 bar()의 정의가 나오기 전까지는 undefined상태이고, 따라서 함수로 사용할 수도 없다. 또한 선언문 자체는 호이스팅되었기 때문에 유효범위 체인 내에서 전역 bar()도 보이지 않는다.

 

함수는 객체다
함수는 지역 유효범위를 제공한다.