1. var
let과 var는 크게 다르지 않음
하지만 var는 한 번 선언된 변수를 다시 사용할 수 있고
에러가 나오지 않음
let의 경우
에러를 반환함
선언하기 전에 사용할 수 있다
var aaa = "hi"를 선언하기 전에 콘솔에 찍어도 에러가 나오지 않음.
let의 경우
애초에 정의되지 않았다고 오류가 발생함
이유
다음과 같이 var는 실제로 코드가 이동하지는 않으나 최상위로 끌어올라감.
이를 호이스팅이라고 한다.
왜 그러면 console.log에는 undefined가 뜰까??
이유는 선언은 호이스팅 되지만 할당은 호이스팅이 되지 않기 때문임.
그렇다면 let과 const는 호이스팅이 되지 않느냐??
그렇지 않음.
let과 const도 호이스팅이 되며 호이스팅이란 스코프 내부 어디서든 변수 선언은 최상위에 선언된 것 처럼 행동한다.
let과 const는 var와 같이 에러를 반환하지 않는 이유는 무엇일까?
2. TDZ(Temporal Dead Zone)
TDZ란 선언 전에 변수를 사용하는 것을 허용하지 않는 것
https://ui.toast.com/weekly-pick/ko_20191014
let과 const는 할당을 하기 전에는 사용할 수 없음.
let과 const는 TDZ의 영역에 존재하는 변수임
선언만 호이스팅이 되고 할당은 호이스팅이 되지 않기 때문에 사용할 수 없게 되는 것임.
이렇게 사용하면 예측 가능하게 하고 잠재적인 에러를 줄일 수 있음
작동이 잘되는 예시
작동이 안되는 예시
실제 작동 예시
let이 호이스팅 되지 않는 구나가 아니라 호이스팅은 스코프 단위로 일어나기 때문에 let age = 20 범위는 함수 showAge부분이다.
let age = 20은 showAge함수 부분에서 호이스팅되고 변수 할당 전에 사용이 되었으므로 에러를 발생한다.
변수의 선언단계를 보면
가. 선언단계
나. 초기화단계
다. 할당단계
거치는데
var의 경우는
가. 선언 및 초기화 단계
나. 할당 단계
이렇게 되기 때문에 var를 사용해도 에러가 발생하지 않음
(초기화 단계는 undefined를 할당해주는 단계)
반면 let의 경우는
가. 선언단계
나. 초기화단계
다. 할당단계
초기화 단계는 실제 코드에 도달하였을 경우 실행되기 때문에 호이스팅시 레퍼런스 오류가 발생하게 된다.
const는
선언단계 + 초기화 + 할당 같이 된다.
그래서 할당을 하지 않으면
이렇게 에러가 발생한다.
3. 스코프
var는 함수스코프
let, const는 블록스코프
블록스코프는 모든 코드 블록 내에서만 유효하며 외부에서는 접근을 할 수 없음
즉 지역변수를 의미함
함수스코프
가능
블록스코프인 let과 const를 사용할 경우 에러가 발생함
var 역시 함수 내부에서 선언되면 그 범위를 벗어날 수 없다
결론으로는 함수 내부에서 선언하면 그 함수 밖에서는 어떠한 경우라도 호출할 수 없다.
