var, let, const 차이와 TDZ 설명

변수의 선언 3단계 설명

자바스크립트는 변수는 선언 초기화 할당 이 3가지 의 단계를 거쳐 생성이 됩니다.

1. 선언→ 변수를 실행 컨텍스트의 변수 객체를 등록함 / 변수를 등록
2. 초기화는 -<실행 컨텍스트에 존재하는 변수 객체에 아까 .. 선언된 변수를 위한 메모리 만드는 단계//
3. 할당: 사용자가 undefined 로 초기화 된 메모리 에 다른 값을 할당 주는 단계임

• var : 변수 선언전에 선언단계와 초기화 단계를 동시에 진행한다.

그래서 실행 컨텍스트 변수 객체의 → 변수를 등록하고 , 메모리 를 undefined 로 만든다.

그래서 선언하기전에 호출을 해도 undefined 로 호출이 되는 호이스팅이 발생함

이크마 식스 이후로 생긴

• let, const 은 VAR 과 다르게 선언단계와 초기화 단계가 분리되서 진행이 된다.

그렇기 때문에 실행컨텍스트에 변수를 등록했지만 → 두번 째 메모리 초기화 단계에 메모리가 할당되지 않아 접근할 수 없어 참조 에러가 발생이 된다. 이것을 우리는 ㅊ호이스팅이 안된다는 것으로 오해한다.

이 구간에 TDZ 의해 메모리가 할당이 되지 않아 참조에러가 발생한다.

var, let, const의 차이

Var 선언은 전역 범위 혹은 함수 범위로 지정된다.

변수가 함수 외부에서 선언 될 때 의 범위는 전역이고 , 즉 함수 블록 외부에서 Var하면 선언된 모든 변수를 전체 윈도우 상에서 사용 가능하다.

함수 내에서 선언이 될 때 함수 범위로 지정하고 함수 내에서만 접근이 가능하다.

스코프 = 범위 . 변수에 접근 할 수 있는 범위를 말함

• var : 변수의 유효 범위가 함수 스코프(function scope)이며, 중복 선언 가능. 재할당 가능
• 함수내에서 선언된 변수는 함수 내에서만 유효하고,
• 함수 내에서는 블록 내외부에 관계없이 유효하다. 함수 외부에서는 참조불가.

---

• let&const 차이는 immutable(재할당)가능여부입니다.
• let : 변수의 유효 범위가 블록 스코프(block scope)이며, 중복선언 불가. 재할당 가능.
• const : 변수의 유효 범위가 상수로서의 블록 스코프(block scope)이며, 중복선언 불가. 재할당 불가.

함수, if절 외 for, while, try/catch 등 모든 코드블록 ({..}) 내부에서 선언된 변수는 코드 블록 내부에서만 유효함. 블록 외부부터 참조 불가.

TDZ(Temporal Dead Zone) 설명⇒ 일시적 사각지대

변수 선언하기 이전에 변수를 참조하는 영역이고

해당영역에서 선언 이전에 참조한 변수는 참조 에러가 발생한다.

TDZ 가 자바스크립트 에서 필요한 이유는 동적언어의 런타임 타입 체를 할 수 있기때문이다.

• TDZ : let과 const 키워드로 선언된 변수는 선언되기 이전에는 TDZ에 빠지게 됩니다.
• 이는 변수가 초기화되기 이전에 접근하려고 할 때 발생하는 오류입니다.
• var 키워드는

  // var 예시
  console.log(x); // undefined
  var x = 'Hello World';

// let 예시
console.log(y); // ReferenceError: Cannot access 'y' before initialization
let y = 'Hello World';

// const 예시
console.log(z); // ReferenceError: Cannot access 'z' before initialization
const z = 'Hello World';

위 코드에서 var x는 선언과 초기화가 동시에 이루어지므로 에러가 발생하지 않습니다. 하지만 let y와 const z는 초기화되기 이전에 접근하려고 하여 TDZ에 빠지게 되고, 따라서 에러가 발생합니다.