TDZ로 시작된 변수선언 정리.
const,let,var 재선언, 재할당 가능 유무만 알고 넘어갔던 지난 날.
저 한문장에 안에 내포된 큰 의미를 알때가 됐다.
var의 문제점
- 호이스팅 발생.
- 변수 중복 선언이 가능.
(var 자체가 Function-scoped(지역변수)라 함수 내부 최상단으로 이동하기 때문 = 지역, 전역 변수는 차후에 다룰 예정)
1. 호이스팅(Hoisting)이란
(host = 올리다. 높이달다. 끌어올리다.)
변수나 함수를 선언했을 때 코드 범위(scope) 내의 최상단으로 끌어올려지는 것처럼 보이는 현상
선언과 동시에 대입하는 코드는 끌어올려지지 않음.
//호이스팅 발생
console.log(a); //undefined
var a;
//호이스팅 없음
console.log(a); // undefined
var a = 5;
console.log(a); // 52. var는 호이스팅이 발생할까?
구성이 원래 실행 컨테스트의 Lexical Environment는 Environment Record(환경 레코드)와 Outer LexicalEnvironment Reference (외부 렉시컬 환경 참조 컴포넌트)로 구성이 되어있다.
고로 js 엔진은 코드가 실행되기 전에 이미 쫙 훑어버려서 호이스팅이 일어남!
Lexical Environment = 내부 숨김 연관 객체
( Lexical : 어휘의, 사전의)
- 실행중인 함수
- 코드 블록{...}
- 스크립트 전체 는 렉시컬 환경을 갖는다.
Environment Record(환경 레코드)
유효 범위 안의 식별자와 결과값을 바인드(묶어서) 해서 기록하는 영역.
함수선언, 변수명이 담기며 컨테스트 내부 전체를 처음부터 쭉 훑음.
?그러면 let,const는 왜 호이스팅이 안 일어나는거죠?
이유를 알기 이전에 놀라운 반전.
사실 호이스팅은 정말 위로 끌어올려진 것이 아닌, 변수나 함수를 선언 이전에 사용할 수 있기 때문에 끌어 올려진 것처럼 보였던 것이다!
let, const는 왜 안보이는건데? 이 친구들은 TDZ에 들어가기 때문!
3. TDZ(Temporal Dead Zone)
- TDZ는 일시적인 사각지대로, 선언 되기 전이나 초기화 되기 전 상태의 변수 사용 허용치 않은 공간
변수를 사용하는 것을 비허용하는 개념상의 공간. - let, const, class 구문의 유효성을 관리
// 예시
white; // throws `ReferenceError`
const white = '#FFFFFF';
whiteconst white = '#FFFFFF'; 이 구문 전까지 ,
white 변수는 tdz에 있다.
아직 안에 있는 변수에 접근하게 되면 위처럼 에러가 남.
즉! 변수 선언을 함으로써 사용 자격을 얻게 됨!!
(선언 안한 곳은 데드존)
4. TDZ 영향을 받는 구문
이전에 알아야 할 사항
∙ 선언 : 변수가 scope에 등록
∙ 초기화 : 변수가 메모리에 적재되며 Undefined값을 가지게 돰.
∙ 할당 : 실제 값을 변수에 할당· const
재할당, 재선언 불가능.
const는 선언, 초기화, 할당이 한번에 이루어짐. => 영향 받음.
ex)
carrot; // 'tdz 존' `ReferenceError`
const carrot = good; // 변수 선언
carrot; => good // 사용 가능
재할당 불가능)
const qwer = 23;
qwer = 23; //오류
재선언 불가능)
const qwer = 'good';
const qwer = 'nope'; // 오류· let
재할당 불가능, 재선언 가능.
let는 선언, 초기화, 할당이 따로 이루어짐. => 영향 받음.
!
재할당 가능)
const qwer = 23;
qwer = 23; // 가능
재선언 불가능)
let qwer = 'good';
let qwer = 'nope'; // 오류· class
선언 후 class 사용 가능
ex)
class Car {
constructor(color) {
this.color = color;
}
}
// Works!
const myNissan = new Car('red');
myNissan.color; // => 'red'
5. TDZ 영향을 받지 않는 구문
· var
재할당, 재선언 가능.
선언과 초기화 단계가 동시에 이루어 짐. => 영향 안 받음.
재할당 가능)
var qwer = 23;
var = 23; // 가능
재선언 가능)
var qwer = 'good';
var qwer = 'nope'; // 가능· function
선언과 초기화 단계가 동시에 이루어 짐. => 영향 안 받음.
right('qwerty') // "ok qwerty"
function right (name) {
return `ok ${name} :)`
}
hello('qwerty') // "ok qwerty"요약
- var대신 const, let을 이용하자.
- const, let, class 사용시에는 항상 순서에 주의하자.
- TDZ 영향 받는 친구들은 선언 먼저 하고, 변수 사용하기.
참고 블로그
https://ingg.dev/hoisting/
https://ui.toast.com/weekly-pick/ko_20191014
https://dmitripavlutin.com/javascript-variables-and-temporal-dead-zone
https://velog.io/@sisofiy626/JavaScript-%ED%98%B8%EC%9D%B4%EC%8A%A4%ED%8C%85%EC%9D%98-%EC%9B%90%EB%A6%AC%EC%99%80-TDZ%EA%B0%80-%EB%B0%9C%EC%83%9D%ED%95%98%EB%8A%94-%EC%9B%90%EC%9D%B8
