호이스팅(Hoisting)이란?

JavaScript 2021. 11. 7. 21:09

자바스크립트를 사용하는 개발자라면 '호이스팅'이란 말을 많이 들어봤을 것이다.

호이스팅은 프론트엔드 면접 질문에 빠지지 않고 등장하는 단골소재다.

보통 내가 많이 주워 들은 답변은, "변수의 선언을 코드의 최상단으로 옮기는 것" 이다. 그렇게 대답이 나오고 나면 디테일한 질문 없이 다음 질문으로 넘어가곤 했다. 뭔가 너무 피상적으로 알고 있다는 생각에 좀 더 파헤쳐 보고 싶어졌다.

호이스팅이란..

MDN문서에선 호이스팅을 아래와 같이 정의한다(번역이 좀 이상하게 되어있어서 원문으로 가져왔다).

the process whereby the interpreter allocates memory for variable and function declarations prior to execution of the code

해석하자면 '코드를 실행하기 전에 인터프리터가 변수와 함수의 선언을 위해 메모리 공간을 할당하는 프로세스' 정도가 될 것 같다.

JS 엔진은 코드 실행을 하기 전에 미리 코드를 확인하며 메모리 공간을 할당하는데, 아래 세 가지 경우로 나뉜다

함수 : 전체 함수에 대한 참조와 함께 저장
var : undefined 로 초기화 되어 저장
let, const : 초기화 없이 저장

즉, 맨 위에서 얘기했던 "변수의 선언을 코드의 최상단으로 옮기는 것"은 코드를 실행한 결과를 봤을 때 우리가 이해하기 쉽도록 풀어쓴 말이다. 실제로 코드가 옮겨져서 실행되는 것은 아니다. 실행 전에 함수랑 변수를 확인해서 메모리 공간에 저장해두는것 뿐. 마찬가지로 "let, const는 호이스팅이 일어나지 않는다"라기보단 초기화되지 않은 상태로 메모리 공간에 저장되기 때문에 코드 실행을 통해 초기화한 이후에 변수를 사용할 수 있는 것 뿐이다.

var 를 사용할때 호이스팅

console.log("a : "+a) // a: undefined
a = 3;
console.log("a : "+a) // a : 3
a = 6;
console.log("a : "+a) // a : 6

// 밑에서 선언해줘도 위 코드를 돌리는데에 문제가 없다. 
// a를 let으로 선언할 경우엔 ReferenceError가 발생한다
var a;

함수와 함수 표현식

test1(); // 나는 함수
test2(); // TypeError: test2 is not a function
test3(); // ReferenceError: test3 is not defined

function test1() {
    console.log("나는 함수");
}

var test2 = () => {
    console.log("var 함수표현식");
}

const test3 = () => {
    console.log("const 함수표현식");
}

- test1 : function 이 이미 메모리에 저장되어 있기 때문에, 선언 전에 호출이 가능하다. -> 함수 호이스팅이라고 부른다

- test2 : test2가 undefined로 초기화되어 메모리에 저장되어 있는 상태이다. 초기화 전(함수 표현식 도달 이전)에 함수를 실행시키려 하니 TypeError가 발생한다.

- test3 : test3가 초기화되지 않았기 때문에 ReferenceError가 발생한다.

결론

호이스팅으로 인한 예상치 못한 에러를 만나지 않기 위해서는, 아래 3 가지를 잘 지켜주면 될 것 같다.

var 대신 let과 const를 사용할 것
스코프 최상단에서 선언과 초기화를 함께 할 것
함수는 함수표현식을 통해 정의할 것