var를 선언 했을 때 블록 스코프 범위, 반복 선언, 호이스팅에 대한 문제점을 가지고 있습니다.
이 문제를 해결하기 위해서 let과 const를 선언을 권장합니다.
var는 블록 스코프(범위) 내에서 선언을 했지만 외부에서도 선언 된 var 변수를 사용 할 수 있습니다. 이 때 생기는 문제는 변수의 유지 관리가 어렵고 선언 된 변수 의도를 알 수 없기 때문에 버그를 발생 할 수 있습니다.
let과 const는 선언된 블록 내에서만 존재 할 수 있기 때문에 블록 스코프 범위 내에서 선언 된 변수를 외부에서 사용하지 못 합니다.
var 는 동일한 변수명으로 반복적으로 선언이 가능합니다. 코드상 문법을 맞지만 자바스크립트 엔진에서 두 번 이상 선언된 변수는 엔진이 무시를 합니다. 때문에 전역에서 동일한 변수명으로 다른 곳으로 선언이 된다면 유지 관리가 어렵게 됩니다.
let과 const는 동일한 범위에서 동일하게 선언이 될 경우 오류가 발생합니다.
마지막으로 var는 호이스팅이 됩니다. var 선언이 함수의 맨 위에 이동하는 것처럼 동작을 합니다.
const example = () => {
console.log(answer) // undefined
answer = 42;
var answer = 67;
}
자바 스크립트 엔진에서 코드를 실행 하기 전에 var 선언을 먼저 처리하고 생성한 함수를 스캔을 합니다. 그렇기 때문에 함수 맨 위에 선언 된 var 변수는 기본값이 undefined로 선언되어 있어 맨 위에서 기본값으로 할당이 됩니다.
let과 const는 호이스팅이 되지만 var 호이스팅과 다르게 동작합니다. 아래에서 선언 된 let과 const 변수는 위에서 할당을 하면 변수를 참조 할 수 없는 구간인 임시 데드존(TDZ)에 포함이 됩니다. 자바스크립트 엔진에서 코드를 실행하기 전에 let과 const를 먼저 처리를 하지만 임시 데드존에 참조 된 변수를 확인 후 ReferenceError 에러를 발생합니다.
그렇기 때문에 호이스팅이 발생하지만 호이스팅이 발생하지 않는 것처럼 동작하게 보입니다.
위 문제를 해결하기 위해서 let과 const를 권장 하는 이유가 됩니다.
참고사항
- 모던 자바스크립트 DeepDeive
