JS |var let const 차이 , TDZ 설명

변수의 선언 3단계 설명 

변수의 선언 개념부터 이해

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

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

---

 var let const 각 변수의 선언 설명과 TDZ 발생하는 변수 

 

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

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

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

 

ECMA6  이후로 생긴 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 키워드는 선언과 초기화가 동시에 이루어지므로 TDZ에 빠지지 않습니다.