var,let,const

📌 You don't know JS와 https://poiemaweb.com/ 를 참고하여 작성한 글입니다.

var let const의 차이점은 무엇일까요?

1. var

• 함수레벨 스코프
• 중복 선언이 가능, 재할당도 가능

2. let

• 블록레벨 스코프
• 중복 선언이 불가능, 재할당은 가능

3. const

• 블록레벨 스코프
• 중복 선언이 불가능, 재할당도 불가능

let과 const는 호이스팅이 안되는것 일까요?

console.log(foo); // undefined
var foo;

console.log(bar); // Error: Uncaught ReferenceError: bar is not defined
let bar;

자세히 알아봅시다 🤔 (let,const가 ReferenceError 발생하는 이유도 알아봅시다)

변수는 3단계에 걸쳐 생성이 됩니다.

• 선언 단계 : 변수를 실행 컨텍스트의 변수객체에 등록한다. 이 변수 객체는 스코프가 참조하는 대상이 된다.
• 초기화 단계 : 변수 객체에 등록된 변수를 위한 공간을 메모리에 확보한다. 이 단계에서 undefined로 초기화 된다.
• 할당 단계 : undefined로 초기화된 변수에 실제 값을 할당한다.

var는 선언단계와 초기화단계가 한번에 이뤄집니다. 스코프에 변수를 등록(선언 단계)하고 메모리에 변수를 위한 공간을 확보한 후, undefined로 초기화(초기화 단계)합니다.! 따라서 변수 선언문 이전에 변수에 접근해도 undefined를 반환합니다.

그러나 let은 선언단계와 초기화단계가 분리되어 진행됩니다. 즉 스코프에 변수를 등록하지만 초기화 단계는 변수 선언문에 도달했을 때 이뤄집니다. 그래서 ReferenceError가 발생합니다. 초기화 이전에 변수에 접근하려고 하면 참조 에러(ReferenceError)가 발생합니다.

스코프의 시작 지점부터 초기화 시작 지점까지의 구간을 ‘일시적 사각지대(Temporal Dead Zone; TDZ)’라고 부른다.

그러면 호이스팅이 일어나지않는것과의 차이점이 없을까요?

let foo = 1; // 전역 변수

{
  console.log(foo); // ReferenceError: foo is not defined
  let foo = 2; // 지역 변수
}

전역변수 foo의 값이 출력될것 같지만 호이스팅이 발생되기 때문에 ReferenceError가 발생합니다.!