호이스팅 정리

자바스크립트의 큰 특징중 하나라고 할 수 있는 호이스팅에 대해 포스팅하겠습니다.

호이스팅은 '특정 실행 컨텍스트(scope)안에서 선언된 변수 이름과 함수 선언 내용을 해당 실행 컨텍스트 최상단에 올려놓는 것'이라고 할 수 있습니다.

아래 코드에서

var a = 1;
 
var outer = function() {
 
    var inner = function() {
        console.log(a);
        var a = 3;
    }
 
    inner();
    console.log(a);
 
}
 
outer();
console.log(a);

출력은 undefined, 1, 1 이 됩니다. inner 함수 안에서 undefined가 뜨는 이유가 바로 호이스팅 때문인데요, 전역으로 a라는 변수가 선언되어있음에도 불구하고 같은 실행 컨텍스트(inner 함수)에 선언된 변수 a를 호이스팅하여 우선적으로 찾게 됩니다. 

중요한것은 변수는 호이스팅 될 때 이름만 호이스팅 되고, 할당 된 내용은 같이 호이스팅이 되지 않는다는 것입니다. 

하지만 함수 선언문으로 작성된 함수는 함수 이름 뿐만 아니라 선언된 함수 내용까지 같이 호이스팅이 되는데요,

function sum(x, y) {
    return x+y;
}
 
var outer = function() {
 
    var inner = function() {
        console.log(sum(10,20));
 
        function sum(x, y) {
            return x*y;
        }
 
    }
 
    inner();
    console.log(sum(10,20));
 
}
 
outer();
console.log(sum(10,20));

따라서 이 코드의 출력은 200, 30, 30 이 됩니다.

반면에 함수 표현식으로 작성 된 아래 코드에서는 inner 함수 안의 sum 함수의 이름만 호이스팅이 되고 해당 함수의 내용은 호이스팅 되지 않아 에러를 띄우는 것을 확인 할 수 있습니다.

var sum = function(x, y) {
    return x+y;
}
 
var outer = function() {
 
    var inner = function() {
        console.log(sum(10,20));
 
        var sum = function(x, y) {
            return x*y;
        }
 
    }
 
    inner();
    console.log(sum(10,20));
 
}
 
outer();
console.log(sum(10,20));

호이스팅은 var 선언인 경우 또는 함수 선언문인 경우 에만 적용이 됩니다. 따라서 아래와 같은 let 선언에서는 에러가 나게 됩니다.

var a = 1;
 
var outer = function() {
 
    var inner = function() {
        console.log(a);
        let a = 3;
    }
 
    inner();
    console.log(a);
 
}
 
outer();
console.log(a);

호이스팅은 굉장히 편하기능이지만, 또한 굉장히 헷갈립니다. 특히 규모가 커져 복잡해질수록 호이스팅으로 인한 에러에 주의해야 합니다.