자바스크립트 호이스팅이란?

자바스크립트에서 호이스팅(hoisting)이란 무엇일까? 호이스팅을 이해하려면 스코프의 개념과 전역 변수, 지역 변수의 의미를 이해해야 한다. 이번 포스팅에서는 변수 호이스팅과, var, let, const 키워드의 사용, 함수 호이스팅에 대해 정리해 보려 한다.

자바스크립트 변수 호이스팅

자바스크립트는 기본적으로 위에서 아래로 차례차례 코드를 실행해 간다. 따라서 변수를 선언하기 전에, 변수를 호출하면 오류가 발생해야 한다. 그러나 자바스크립트의 호이스팅 기능은 모든 변수 선언문이 해당 스코프의 최상단으로 끌어 올려 처리한다.

console.log(bear); // undefined

bear = "A market is in bearish trend.";

console.log(bear); // "A market is in bearish trend.";

var bear;

변수를 선언하기 전에 먼저 출력을 했지만, 프로그램은 '정상적'으로 실행되었다. 첫 번째 console.log(bear); 에서 undefined 가 나오는 이유는 값 할당 이전에 변수를 참조했기 때문이다. 즉, 해당 코드는 다음과 같은 순서로 실행된다.

var bear;

console.log(bear); //undefined

bear = "A market is in bearish trend.";

console.log(bear); // "A market is in bearish trend.";

var 대신 let, const를 사용해야 하는 이유

ES5까지는 변수를 선언하는 유일한 키워드는 var 뿐이었다. 그러나 var는 중복 선언이 가능하기 때문에, 프로그래머의 실수로 값이 재할당되는 실수가 발생하기도 했다.

 

이러한 단점을 보완하기 위해 ES6부터 새로운 변수 키워드인 let과 const가 등장했다. 차이점은 let은 재할당이 가능하지만, const는 재할당이 불가능하다는 것이다. 그러나 const에 객체를 할당한 경우, 값을 변경할 수 있기 때문에 언제나 고정된 값은 아니다.

 

정리하자면, 기본적으로 const를 사용하되, 재할당이 필요한 경우에는 let을 사용하는 것이 좋다.

함수 호이스팅

다음의 경우처럼 함수 정의 이전에 함수를 호출해도 이는 정상적으로 함수가 실행된다. 함수 호이스팅 때문이다.

bear(); // "A market is in bearish trend."

function bear() {
    console.log("A market is in bearish trend.");
}

이러한 함수 호이스팅은 스코프 단위로 작동한다.

var x = 'global';

function foo() {
    console.log(x); // undefined
    var x = 'local'; 
}

foo();
console.log(x); // global

그러나 모든 함수가 호이스팅 되는 것은 아니다. 다음처럼 함수 표현식을 통해 만든 함수는 호이스팅 되지 않는다. 이 경우 함수 호이스팅이 아닌 변수 호이스팅이 발생하는 것이며, 따라서 이를 참조하면 undefined가 된다. undefined를 호출할 수는 없으므로, 타입 에러가 발생한다.

bear(); //  bear is not defined

let bear = function () {
    console.log("A market is in bearish trend.");
}