📌 호이스팅이란?

호이스팅이란 코드에서 선언이 마치 코드 최상단으로 옮겨진 것처럼 동작하는 것을 말한다.

1
2
3
4
5
6
7
8
9
// var 선언은 에러를 발생하지 않는다.
console.log(foo); // undefined
var foo = 1;
console.log(foo); // 1

// let/const 선언은 에러를 발생 시킨다.
console.log(bar); // ReferenceError: bar is not defined
let bar = 2;
console.log(bar); // 2

마치 위 예제를 보았을 때, let, const 키워드로 선언할 경우 호이스팅이 발생하지 않는 것처럼 느낄 수 있는데, let, const 키워드로 선언했을 경우에도 호이스팅이 발생한다.

위 예제에서 오류를 발생시키는 것은 var 키워드의 경우 변수 선언 단계와 초기화 단계가 동시에 진행되므로 이 때, 변수가 선언됨과 동시에 undefined로 초기화되어 오류를 발생시키지 않는다.

반면, let, const 키워드는 선언단계와 초기화 단계가 분리되어 진행되어 초기화 단계 이전에 해당 변수를 참조하게 되면 참조에러를 발생시킨다.

선언단계 ~ 초기화 단계 시작 전까지 구간을 Temporal Dead Zone(일시적 사각 지대)라고 한다.

📚 함수 호이스팅

호이스팅은 선언 단계가 마치 최상단으로 올라간 것처럼 동작하는 것을 말하므로 이는 변수 선언과 함수 선언 모두 해당될 수 있다.

변수 선언은 앞의 예제에서 다루었으니 함수 호이스팅 예제를 보자.

1
2
3
4
5
6
7
8
9
10
11
12
13
const numbers = [1, 2, 3, 4, 5];
const doubled = doubleNum(numbers);
const trippled = trippleNum(numbers);

const doubleNum = (num) => {
  return num.map((n) => n * 2);
};

const trippleNum = (num) => {
  return num.map((n) => n * 3);
};

// Uncaught ReferenceError: doubleNum is not defined
  • 위 예제에서는 화살표 함수가 표현식으로 선언되었으므로 변수 호이스팅이 발생하여 오류를 발생하는 것을 볼 수 있다.
1
2
3
4
5
6
7
8
9
10
11
12
13
const numbers = [1, 2, 3, 4, 5];
const doubled = doubleNum(numbers);
const trippled = trippleNum(numbers);
console.log(doubled); // [2, 4, 6, 8, 10]
console.log(trippled); // [3, 6, 9, 12, 15]

function doubleNum(num) {
  return num.map((n) => n * 2);
}

function trippleNum(num) {
  return num.map((n) => n * 3);
}
  • 위 예제에서는 함수 선언식으로 함수를 정의하여서 함수 호이스팅이 발생하여 오류를 발생시키지 않았다.