호이스팅(Hoisting)

1. 개념

 인터프리터가 변수와 함수의 메모리 공간을 선언전에 미리 할당하는 것.

 

2. 키워드에 따른 동작

 

var 키워드의 경우 선언과 함께 초기화가 진행되기 때문에 선언문 이전에 호출하면 undefined 출력

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

 

let, const 키워드의 경우 Hoisting은 동작하지만 초기화 전까지 변수를 호출할 수 없다.

const x = 'outer scope';(function() {
  console.log(x);
  const x = 'inner scope';
}());

console.log(x) 는 TDZ에 의해 ReferenceError를 발생하게 된다.
이는, let/const 선언은 호이스팅을 수행하기 때문이다.
undefined를 반환하는 var와는 달리, 초기화되기 전에 액세스할 때 에러가 발생한다.

 

3. TDZ(Temporal Dead Zone)

변수 스코프의 맨 위에서 변수의 초기화 완료 시점까지의 변수는 "시간상 사각지대"(Temporal Dead Zone, TDZ)에 들어간 변수라고 표현합니다. "시간상" 사각지대인 이유는, 사각지대가 코드의 작성 순서(위치)가 아니라 코드의 실행 순서(시간)에 의해 형성되기 때문입니다. 예컨대 아래 코드의 경우 let 변수 선언 코드가 그 변수에 접근하는 함수보다 아래에 위치하지만, 함수의 호출 시점이 사각지대 밖이므로 정상 동작합니다.  (MDN 출처)

{
    // TDZ가 스코프 맨 위에서부터 시작
    const func = () => console.log(letVar); // OK

    // TDZ 안에서 letVar에 접근하면 ReferenceError

    let letVar = 3; // letVar의 TDZ 종료
    func(); // TDZ 밖에서 호출함
}

 

4. 함수 표현식과 함수 선언문 차이 - 호이스팅관점

 https://velog.io/@hyun-jii/%ED%95%A8%EC%88%98%EC%84%A0%EC%96%B8%EB%AC%B8-%ED%95%A8%EC%88%98%ED%91%9C%ED%98%84%EC%8B%9D%EA%B3%BC-%ED%98%B8%EC%9D%B4%EC%8A%A4%ED%8C%85

함수선언문, 함수표현식과 호이스팅

 

Reference

- https://developer.mozilla.org/ko/docs/Glossary/Hoisting

- https://medium.com/korbit-engineering/let%EA%B3%BC-const%EB%8A%94-%ED%98%B8%EC%9D%B4%EC%8A%A4%ED%8C%85-%EB%90%A0%EA%B9%8C-72fcf2fac365