Hoisting이란?

Junyoung Song·2022년 3월 22일

JS

목록 보기

11/13

호이스팅이란 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는것을 의미합니다. 쉽게 말하자면 자바스크립트에서 변수와 함수의 선언이 코드가 실행되기 이전에 스코프에 최상단으로 이동하는것이라 생각하시면 됩니다.

변수와 함수가 가장 위로 이동하는것이기 때문에 변수나 함수를 정의 하는것보다 그것을 사용하는 코드가 더 앞에 오더라도 사용이 가능합니다.

예제

function catName(name) {
  console.log("제 고양이의 이름은 " + name + "입니다");
}

catName("호랑이");

/*
결과: "제 고양이의 이름은 호랑이입니다"
*/

일반적인 코드 작성입니다. 하지만 아래와 같이 작성하여도 함수를 사용하는데에는 지장이 없습니다.

catName("클로이");

function catName(name) {
  console.log("제 고양이의 이름은 " + name + "입니다");
}

/*
결과: "제 고양이의 이름은 클로이입니다"
*/

호이스팅은 초기화를 제외한 선언만 호스팅합니다. 그렇기 때문에 먼저 선언 하더라도 초기화는 되지 않았기 때문에 초기화 되기 이전에 불러올 경우 undefined를 출력하게 됩니다.

console.log(num); // 호이스팅한 var 선언으로 인해 undefined 출력
var num; // 선언
num = 6; // 초기화

선언을 하지 않고 초기화만 할 경우, 호이스팅이 없기때문에 ReferenceError가 발생하게 됩니다.

console.log(num); // ReferenceError
num = 6; // 초기화

let과 const의 경우도 호이스팅의 대상이지만, var와는 다르게 호이스팅할 경우 undefined로 변수를 초기화 하지 않습니다. 그렇기 때문에 초기화가 되지않은 let과 const의 접근하려 할 경우 ReferenceError가 발생하게 됩니다.