var, let, const
#var 문제점 # let 와 var 키워드의 차이 # TDZ # 실행컨텍스트 #변수 선언#변수명 # 초기값 # 재할당
var, let, const의 차이점
1. 변수 선언 전에 호출
✅ var undefined
⛔️ let, const는 에러
2. 재선언
✅ var는 이미 존재하는 동일한 변수명 선언 가능
⛔️ let, const
3. 선언시 초기값
✅ var, let 변수 선언시 초기값 안줘도 됨
⛔️ const 반드시 할당
4. 재할당
✅ var, let
⛔️ const는 한번 할당한 값은 변경할 수 없음(객체 속 프로퍼티 변경은 막지 못함)
만약 객체의 프로퍼티를 변경하고 싶지 않으면 Object.freeze() 사용
→답변: JavaScript는 es6 문법 도입 이전까지 var 키워드의 변수 재선언, 재할당 등의 특징때문에 여러 어려움을 겪었습니다. 이를 해결하기 위해 나온 키워드 들이 let, const 입니다. 이미 존재하는 동일한 변수명으로 이중 선언할 수 없도록 let, const 키워드들이 나왔기 때문에 var 키워드만이 재선언할 수 있습니다. (재선선언키워드)
또한 var로 선언한 변수는 선언 전에 호출하게 되면 undefined로 할당값을 초기화한 상태로 출력되는 반면 let , const 으로 선언한 변수는 참조 오류가 발생합니다. 이는 스코프의 시작에서 변수의 선언까지 일시적 사각지대(Temporal Dead Zone; TDZ)에 빠지기 때문입니다. 주의할 점은 let , const 이 호이스팅이 안되는 것처럼 보이는 데 호이스팅은 var , let , const 전부 된다는 점입니다. var의 경우 호이스팅 되면서 초기값이 없어도 자동으로 undefined를 초기값으로 메모리에 할당됩니다. 그러나 let, const의 경우 hoisting이 되면서 초기값이 없으면 자동으로 초기값을 메모리에 할당하지 않습니다. 따라서 선언 전에 메모리에 해당 변수가 존재하지 않고 TDZ를 떠날 수 없는 상황이 펼쳐지는 것입니다.
let 는 재할당이 가능하고 const는 한번 할당한 값은 변경할 수 없습니다. 다만 (객체 속 프로퍼티 변경은 막지 못하는 데 이 또한 막고 싶다면 Object.freeze()를 사용하면 됩니다.
정리하자면 불필요한 오류를 줄이기 위해 래거시한 var 키워드를 지양하고 변수 선언에는 기본적으로 const를 사용, 재할당이 필요한 경우에 한정해 let 을 사용하는 것이 좋습니다.
- 호이스팅이란? 앞서 선언하지 않은 변수가 먼저 선언되어 호출되는 것처럼 동작하는 프로세스
- TDZ? 발생변수가 선언되고 해당 변수에 값이 할당되기 전까지를 말한다.Temporal Dead Zone의 약자로 변수가 만들어지지고 TDZ가 생성되지만 코드 실행이 변수가 실제 있는 위치에 도달할 때까지 엑세스 할 수 없다.