[Javascript] 호이스팅에 대해 알아보기

호이스팅이란 선언한 변수 및 함수가 코드의 최상단으로 올라오는 것처럼 보이는 것을 의미

호이스팅은 크게 변수 호이스팅과 함수 호이스팅으로 나뉜다.

변수 호이스팅

JS에서 변수를 선언할 때 var, let, const 키워드를 사용한다.

num = 10;
console.log(num); //10

console.log(num1); //undefind
var num1 = 10;
console.log(num1); //10

console.log(num2); //ReferenceError
let num2 = 10;

console.log(num3); //ReferenceError
const num3 = 10;

위에서 설명했듯이 세번째 줄을 보면, num1이 아직 선언되지 않았음에도 불구하고, 오류가 나지 않고 undefind로 출력 결과가 나온 것을 볼 수 있다.

그와 반대로 let과 const키워드를 사용하였을 때에는 오류가 나는 것을 볼 수 있다.

그렇다면 let과 const는 호이스팅이 되지 않는 것일까?

그것은 아니다.

let과 const 둘 다 호이스팅이 되지만 키워드의 특성 상 선언과 초기화가 같이 되지 않기 때문에 변수를 참조할 수 없는 구간이 발생한다.

그러한 구간을 TDZ라고 한다.

TDZ(Temporal Dead Zone)

TDZ는 일시적 사각지대로, 변수를 사용하는 것을 비허용하는 개념상의 공간이다.
해당 공간에 있는 값에 접근하게 되면 ReferenceError가 발생한다.

이러한 TDZ의 주요 목적은 프로그래밍 오류를 줄이는데에 있다. 이는 대표적으로 초기화 되지 않는 변수를 사용하는 것을 방지할 수 있다.

함수 호이스팅

함수 호이스팅 또한 변수 호이스팅과 같은 규칙을 따른다.

console.log(hi()); // "Hello, world!"
function hi() {
  return "Hello, world!";
}

console.log(hello()); // is not a function 에러 표시
var hello = function() {
  return "Hello, world!";
};

함수 선언식은 호이스팅되어 함수 전체가 스코프의 최상단으로 끌어올려진다.

함수 표현식은 변수 호이스팅 규칙을 따르므로, 호이스팅되지 않는다.

📍참고

[JS] - 호이스팅이란? 완벽하게 이해하기 (예제코드, var let const 의 차이점, var를 사용하면 위험한 이유 )