오늘은 계속 봐도 계속 혼돈이 왔던 var, let + 호이스팅에 대해 기록해보려고 한다.
호이스팅이란? 🤷🏻♀️
자바스크립트 엔진이 코드를 실행하기 전, 변수선언/함수선언을 해당 스코프의 최상단으로 끌어 올리는 것을 말한다. (메모리에 먼저 선언)
- 모든 선언은 호이스팅이 일어난다.
- 할당이 아닌 선언이다. 값 할당은 포함되지 않는다.
var
var, let, const 중 가장 먼저 세상에 나온 var
문제1)
console.log(name);
var name = 'jane';
console.log(name);첫번째 줄에서 name을 선언하기 전에 name을 출력하고 있지만, 에러가 나지 않는다.
그 이유는, 자바스크립트 엔진을 통해 name 변수가 호이스팅 되었기 때문이다. (메모리에 name 이라는 변수가 있기 때문)
- var는 호이스팅 시 선언과 함께 undefined로
초기화도 함께된다.
문제2)
for(var i=0; i<5; i++) {
console.log(i);
}
console.log(i);마지막 출력 결과는 5이다. for문 안에서 사용하던 변수를 밖에서 출력해도 오류가 나지 않는다.
그 이유는, var 변수는 지역변수와 전역변수의 개념이 확실하지 않다.
- var에서는 함수를 제외한 모든 변수들은 전역변수로 호이스팅이 된다. (함수는 지역변수로 호이스팅)
- for, if 문 안에서 작성한 변수도 모두 전역변수로 호이스팅 되어 밖에서 사용해도 오류가 나지 않는다.
let
이러한 var 의 문제 때문에 새로운 변수 선언 방식인 let 이 등장하게 되었다.
var를 let으로 바꾸어 다시 실행해본다면?
문제1 에서는 초기화 전에 name에 접근할 수 없다는 오류가 발생하며,
문제2 에서는 i가 정의되지 않았다 는 오류가 발생한다.
let에서의 호이스팅?
let 변수도 호이스팅이 된다. 그런데 TDZ (Temporal Death Zone)이라는 개념이 더해졌다.
TDZ 개념을 적용해본다면, 변수가 호이스팅이 되었어도 변수 할당이 되기 전까진 해당 변수에 접근할 수 없다는 것이다. => 일시적으로 문제1 의 첫번째줄은 Death Zone이 되는것!
- let 변수는 호이스팅 시 초기화를 하지 않는다.
- 스코프의 시작 점부터 초기화 시작 지점까지의 구간을
일시적 사각지대 (TDZ)라고 부른다.
[참고 강의]
