[15] let, const & 블록 레벨 스코프

console.log(foo); // 참조 에러가 발생한다 

let foo = 1;

 

 

foo를 선언/초기화하기 전 참조했더니, 참조에러가 뜬다.

 

var 처럼 런타임 이전에 선언 및 초기화가 함께 이루어지지만

let은  런타임 이전에 선언만 이루어지고 초기화는 이루어지지 않는다.

 

따라서 위와 같이 선언 이전에 참조하려고 하면 에러가 난다.

 

 

결론! let은 호이스팅이 발생하지 않는다. 

 

 

 

---

 

 

 

정말 그럴까~~~~~~~~~~~~~~~~~~~~~?

 

 

let foo = 1; 

{
  console.log(foo); // 💡 여기선 1이 출력될까, 참조 에러가 날까? 
  let foo = 2; 
}

첫번째 줄에서 foo가 선언되었고, 이는 전역 스코프에 해당하니 당연히 블록 내에서도 foo를 참조할 수 있다. 

따라서 console.log(foo)는 1을 출력한다. 

 

 

 

확인해보자.

맞지?

 

 

생각이 맞는 것 같다.

마지막 한 줄까지 더 추가해보고 확인해보자. 

 

 

 

?!?!?!?!?!?

 

^^;;; 나처럼 생각한 사람은 다시 모딥다 4장과 13장을 읽기 바란다...

(분명 저번주에 읽었는데..) 

 

 

 

정정한다.

결론! let은 호이스팅이 발생 하지 않는다 한다!!!

 

 

 4장을 다시 읽고 왔다

 

...
이처럼 변수 선언문이 코드의 선두로 끌어올려진 것처럼 동작하는 자바스크립트 고유의 특징을 변수 호이스팅이라한다. 
사실 변수 선언 뿐 아니라 var, let, const, function, function*, class 키워드를 사용해서 선언하는 모든 식별자(변수, 함수, 클래스 등)는 호이스팅 된다. 모든 선어눈은 런타임 이전 단계에서 먼저 실행되기 때문이다.  (43p)
...

 

 

 

13장도 다시 읽고 왔다.

 

변수를 참조할 때 자바스크립트 엔진은 스코프 체인을 통해 변수를 참조하는 코드의 스코프에서 시작하여 상위 스코프 방향으로 이동하며 선언된 변수를 검색한다. (195p)

 

 

let foo = 1; 

{
  console.log(foo); // 💡 여기선 1이 출력될까, 참조 에러가 날까? 
  let foo = 2; 
}

 

결국 이 코드에서 마지막 let foo =2 가 추가되면서 

이 블록 안에서는 이 블록 내에서 정의된 foo가 가장 먼저 탐색된다. 

따라서 console.log(foo) 는 foo의 TDZ(Temporal Dead Zone)에 해당하게 된다. 

 

 

 

 

 

 

결국 호이스팅이란 건 스코프를 함께 고려해서 이해해야 한다.

 

let도 런타임 이전에 선언이 먼저 처리되므로 호이스팅이 발생한다.

다만 var와 달리 선언과 동시에 undefined로 초기화되지 않고, 실제 선언문에 도달했을 때 초기화가 이루어진다.

 

그래서 선언문 이전 구간은 TDZ(Temporal Dead Zone)에 놓이게 되며,

이때 변수를 참조하면 ReferenceError가 발생한다.

 

또한 let은 블록 스코프를 가지므로 블록 내부에서 선언된 변수는 해당 블록의 시작
  지점부터 존재하는 것으로 처리되지만, 초기화되기 전까지는 접근할 수 없다.

 

 

 

 

내가 까먹을까봐 남기는 참고

 

1. 브라우저 환경에서 var로 선언한 전역변수는 window의 프로퍼티다