[JS] 호이스팅이란

자바스크립트를 반복해 공부하다보니 호이스팅이라는 개념을 참 많이 들었다.

결론만 말하면

• var로 변수 선언을 지양하고 let, const 변수 선언을 사용해라.

var는 호이스팅뿐만 아니라 스코프 개념에서도 함수형 지역변수이므로 블록형 지역(for, if)에서 선언될 경우 전역변수에 해당되기 때문에 상당히 위험하다.

• 함수 표현식으로 선언을 해라.

이 두 가지였는데 조금 더 자세한 개념인 TDZ를 알게되어 포스팅 한다.

TDZ (Temporal Dead Zone)

변수 선언은 크게 세 단계가 존재한다.

1. 선언 단계 : 선언한 변수를 식별자가 담기는 객체에 할당하는 단계이다.
2. 초기화 단계 : 변수에 할당할 메모리 공간을 부여하는 단계이다.
3. 할당 단계 : 정의된 변수에 데이터가 할당되는 단계이다.

이렇게 총 3개의 단계를 거치는데, 이 중 1과 2 사이의 단계를 TDZ(Temporal Dead Zone)이라고 부른다.

TDZ는 변수에 할당할 메모리가 부여되기 전 단계로, 변수가 이 공간에 있을 경우 제대로 동작을 하지 못한다.

즉 let과 const와 같은 변수 선언의 경우 Hoisting이 발생하지 않는 것이 아니다 !!

let과 const도 var처럼 위로 모아지기는 하지만, 선언 단계 이후 초기화 단계 사이 TDZ에 머물러 메모리를 할당받지 못하기 때문에 오류가 나는 것이다.

console.log(letKeyword); //이 단계에서 TDZ에 속하게 된다.
let letKeyword = "let is safe";

console.log(constKeyword); // 이 단계에서 TDZ에 속하게 된다.
const constKeyword = "const is safe";

하지만 var는 선언 단계와 초기화 단계가 동시에 이루어지기 때문에 오류가 나지 않고 undefined가 뜨게 된다.

함수도 마찬가지이다.

함수 선언식과 표현식 모두 Hoisting이라는 것이 되기는 되지만 선언식은 선언 단계와 초기화 단계가 함께 이루어져 오류가 발생하지 않고, 표현식은 초기화 단계가 선언 단계와 분리되어 TDZ에 머물기 때문에 오류가 발생하게 되는 것이다.

함수 선언식, 오류가 발생하지 않는다.

fn1();

function fn1() {
  console.log("hoisting occurred");
}

함수 표현식, TDZ에 머물게 되어 오류가 발생한다.

fn2();
const fn2 = function () {
  console.log("error occurred");
};