[JS] 호이스팅(Hoisting)

호이스팅이란

코드 실행 전에 변수나 함수의 선언문이 해당 스코프의 가장 위로 끌어올려지는 것을 말한다. 따라서 변수가 선언되기도 이전에 변수를 참조하여 사용할 수 있는 일이 가능하게 되지만, 이는 예상치 못한 에러를 발생할 수 있어 권장되는 방식이 아니다.

변수 호이스팅

원리

먼저 간단한 예를 보며 호이스팅이 되는 과정을 이해해보자.

console.log(amIHoisted); // undefined
var amIHoisted = true;
console.log(amIHoisted); // true

논리적으로 생각했을 때 첫번째 줄에서 에러를 뿜어내야할 것 같지만 그렇지 않다. 왜냐하면 두번째 줄의 amIHoisted 변수 선언문이 가장 위로 호이스팅 되기 때문이다. 게다가 var 키워드로 선언된 변수는 할당된 초기값이 없을 시 기본값 undefined로 초기화가 되기 때문에 에러를 발생시키긴 커녕 undefined 값을 얻게 되는 것이다.

아래는 위의 코드가 실행되기 전, 컴파일 타임에 해석되는 과정이다.

var amIHoisted; // 선언 + undefined로 초기화
console.log(amIHoisted); // undefined

amIHoisted = true; // 실제 값 초기화
console.log(amIHoisted); // true

반면에 선언문이 없다면 변수는 호이스팅 되지 않는다.

console.log(amIHoisted); // Uncaught ReferenceError: amIHoisted is not defined
amIHoisted = false;

하지만 초기화는 자동적으로 선언을 발생시키기 때문에 아래와 같이 초기화문이 먼저 온다면, 정상적으로 변수를 참조하여 원하는 값을 사용할 수 있게 된다.

amIHoisted = false;
console.log(amIHoisted); // false

let, const 의 호이스팅

let, const 키워드로 선언한 변수도 호이스팅이 발생한다. 하지만 var로 선언된 변수와는 달리 undefined로 초기화가 되지 않기 때문에 ReferenceErrorr가 발생한다.

console.log(iAmHoisted); // Uncaught ReferenceError: Cannot access 'iAmHoisted' before initialization
const amIHoisted = true;

예제

호이스팅의 범위를 알 수 있는 예제이다. 호이스팅은 변수의 스코프에 영향을 받는다. 따라서 무조건 스크립트의 최상단이 아니라 변수가 위치한 스코프 안의 최상단으로 끌어올려진다.

var number = 1;
function hoistingTest() {
    // var number; // 함수의 지역 변수 호이스팅이 발생한다.
    console.log(number);
    var number = 2;
}

hoistingTest(); // undefined

함수 호이스팅

선언식으로 작성된 함수는 호이스팅과 동시에 값의 초기화가 발생한다. var 변수처럼 undefined로 초기화가 되는 게 아니라 실제 함수 객체가 할당이 된다. 따라서 함수 선언문 이전에도 함수를 호출해서 동작시키는 것이 가능해진다.

hoistingTest(); // It Works!

function hoistingTest() {
    console.log('It Works!');
}

아래처럼 표현식으로 작성된 함수는 일반 변수와 같은 방식으로 호이스팅이 발생한다.

hoistingTest(); // Uncaught ReferenceError: hoistingTest is not defined

const hoistingTest = () => {
    console.log('It Works!');
}

참고
https://developer.mozilla.org/en-US/docs/Glossary/Hoisting
https://www.educative.io/courses/javascript-interview-handbook/YMBzwk2zxBA