질문 : Hoisting과 Temporal Dead Zone이 어떻게 연관되어 있는지 설명하세요.
-
호이스팅이란,
변수(혹은 모든 식별자)의 선언이 코드의 선두로 끌어 올려진 것처럼 동작하는 것입니다. 이는 함수 내 변수를 제외한 거의 모든 변수를 전역변수화 할 수 있게 합니다.
전역변수의 남용은 의도하지않은 변수값의 변경이 일어날 가능성이 큽니다.
이러한 오류를 막아줄 수 있는 것이 T.D.Z입니다. -
T.D.Z는 변수를 참조할 수 없는 일시적 사각지대 입니다.
변수를 선언만하고 초기화하지 않은 경우에 T.D.Z에 해당합니다. -
이를 통해 호이스팅을 통해 변수를 최상단으로 끌어올리더라도,
변수 선언문이 나오기 전까지는 해당 변수에 접근할 수 없도록 막아준다. -
크루답변 :
호이스팅은 var, let, const, function, class 키워드 등을 사용해서 선언하는 모든 식별자(변수, 함수, 클래스 등)이 코드의 선두로 끌어 올려진 것처럼 동작하는 자바스크립트 고유의 특징입니다.
우선 let,const와 var의 호이스팅 방식의 차이를 봐야합니다.
var의 경우 선언 단계와 함께 undefined로 초기화되므로 초기화 코드를 만나기 전부터 참조가 가능합니다.
반면에, let, const로 선언된 변수는 선언 단계와 초기화 단계가 분리되어 진행됩니다. 즉, 스코프에 변수를 등록하지만, 초기화 단계는 변수 선언문 코드에 도달했을때 이루어지기 때문에 초기화 이전에 변수에 접근하려고 하면 참조 에러(Reference Error)가 발생합니다.
따라서 스코프의 시작 지점부터 초기화 시작 지점까지는 변수를 참조할 수 없는데, 이를 Temporal Dead Zone이라고 합니다.
따라서, let과 const는 호이스팅이 되기는 하지만 초기화가 이루어지지 않은 상태 (Uninitialized)에서 호이스팅이 되기 때문에 초기화 단계를 만나기 전에는 참조할 수가 없으며 일시적 사각지대 (TDZ)가 생기는 것입니다.
예상꼬리질문 : JS에서 변수를 생성하는 방법?
- JS에서는 변수를 생성할 때 var, let, const를 사용한다.
- var는 선언과 초기화를 한번에 하기 때문에 변수 선언 이전에 변수를 참조할 수 있게되어 암묵적 전역 변수를 양산하는 등의 오류를 발생시킬 여지가 있다.
- let은 재할당이 가능하고, const는 재할당이 안되는 특징이 있다. - 따라서 의도치 않은 변경을 막기 위해서는 변수 선언에는 기본적으로 const를 사용하고 let은 재할당이 필요한 경우에만 한정해서 사용하는 것이 좋다.
예상 꼬리 질문 : 재할당이 필요한 경우라는게 어떤 경우?
- const로 선언된 객체는,
내용이 변경되더라도 객체 타입 변수에 할당된 주소값은 변경되지 않는다.
만약에 명시적으로 객체 타입 변수의 주소값을 변경(재할당)하여야 한다면
let을 사용래 변수를 선언한다.
예상 꼬리 질문 : 스코프
- 스코프는 함수의 유효범위를 뜻합니다. JS는 함수 레벨 스코프를 따릅니다.
따라서 함수가 아닌 블록 레벨의 스코프도 전역변수로 취급합니다.
전역변수의 남용을 막기 위해서 ES6부터는 변수를 선언할 때 let, const키워드를 사용합니다.
