[JS/TIL] let과 const는 호이스팅이 되는가?(feat. TDZ)

호이스팅

JavaScript에서 호이스팅(hoisting)이란, 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 의미. 즉 스코프 안의 어디에서든 변수 선언은 최상위에서 선언된 것과 동등하다.

  var x = 'outer scope';
  (function() {
    console.log(x); // undefined
    var x = 'inner scope';
  }());

let과 const는 호이스팅이 되는가?

	console.log(x); // ReferenceError: x is not defined
	const x = 'hello';

위 예제를 보면, let은 호이스팅을 수행하지 않는다고 생각할 수 있다.

  name = 'hello' // ReferenceError: Cannot access 'name' before initialization
  let name = 'hi'

위 예제에서 만약 name이 호이스팅 되지 않았다면, 두 번째 let선언에서
Identifier 'name' has already been declared에러가 발생해야한다.
근데 초기화 하기전에 엑세스 할 수 없다는 에러가 발생

const 는 선언과 동시에 초기화, 할당까지 이루어진다.

var는 런타임 이전에 자바스크립트 엔진에 의해 암묵적으로 '선언단계'와 '초기화단계'가 한번에 진행된다.

그러나, let 키워드로 선언한 변수는 '선언'과 '초기화'단계가 분리되어 진행된다. const 키워드로 선언한 변수는 반드시 선언과 동시에 초기화해야 한다.

즉, 런타임이전에 선언은 실행되지만 초기화단계는 변수 선언문에 도달했을 때 실행된다.
스코프의 시작점부터 초기화 시작지점까지 변수를 참조할 수 없는 구간을
TDZ(일시적 사각지대)라 한다.

  console.log(foo) // ReferenceError: foo is not defined
  // 런타임 이전에 선언, 아직 변수 초기화 X(TDZ)

  let foo // 변수 선언문에서 초기화 단계 실행

  console.log(foo) // undefined

  foo = 1 // 할당문에서 할당단계 실행
  console.log(foo) // 1

결론
var는 변수 선언전에도 참조할 수 있지만 할당을 하지 않았기에 undefined.
그러나 let 과 const 의 경우 식별자가 호이스팅 후 실제 코드에서 선언되기 전까지 TDZ에 있어서 let , const 선언이 있는 곳 이전에는 해당 변수에 참조할 수 없게 된다.

호이스팅은 다 함