자바스크립트 var let const 차이

자바스크립트의 변수 선언 방식인 var, let, const의 차이점을 알아보았다.

1. 변수 재선언이 되느냐

---

var VS let, const

우선 var로 변수 선언을 했을 때

var dis = 'hello';
console.log(dis); //hello

var dis = 'hihihi';
console.log(dis); //hihihi

똑같은 변수명으로 한 번 더 선언 했지만, 오류 나지 않고 각 다른 값이 출력된다.
이는 유연한 변수 선언으로 간단한 테스트에는 편리 할 수 있겠으나, 코드량이 많아 진다면 어디에서 어떻게 사용 될지도 파악하기 힘들뿐더러 값이 바뀔 우려가 있다.

ES6 이후에는 이를 보완하기 위해 let, const를 만들었다.

let dis = 'hello';
console.log(dis);

let dis = 'hihihi';
console.log(dis); // SyntaxError: Identifier 'dis' has already been declared

'dis'가 이미 선언되었단 오류 메시지가 뜬다. const 도 마찬가지이다. 변수 재선언이 불가능하다. 그럼 두 개의 차이점은 무엇일까?

let dis = 'hello';
console.log(dis); //hello

dis = 'hihihi';
console.log(dis); //hihihi

let은 변수 재할당이 가능하다.

const dis = 'hello';
console.log(dis); 

dis = 'hihihi';
console.log(dis); //TypeError: Assignment to constant variable.

const는 변수 재할당, 변수 재선언이 불가능하다.

let과 const의 가장 큰 차이는 immutable의 여부이다.

2. 호이스팅(hoisting)

---

호이스팅이란? var 선언문이나 function 선언문 등을 해당 스코프의 선두로 옮긴 것처럼 동작하는 특성을 말한다.

console.log(dis); // ReferenceError: Cannot access 'dis' before initialization

let dis;
console.log(dis); //undefined

dis = 1;
console.log(dis); //1

var과 달리 let으로 선언된 변수를 선언문 이전에 참조하면 참조에러가 발생한다.
그 이유는 let으로 선언된 변수는 스코프의 시작에서 변수의 선언까지 일시적 사각지대(Temporal Dead Zone; TDZ)에 빠지기 때문이다.


변수는 선언 단계 > 초기화 단계 > 할당 단계 에 걸쳐 생성되는데

var 으로 선언된 변수는 선언 단계와 초기화 단계가 한 번에 이루어진다.

console.log(dis); //undefined

var dis;
console.log(dis); //undefined

dis = 1;
console.log(dis); //1

하지만 let으로 선언된 변수는 선언 단계와 초기화 단계가 분리되어 진행된다.

console.log(dis); //ReferenceError: Cannot access 'dis' before initialization

let dis;
console.log(dis); //undefined

dis = 1;
console.log(dis); //1

3. 그럼 뭘 써야 할까

---

변수 선언엔 기본적으로 const를 쓰는 것이 좋고, 재할당이 필요한 경우에만 let을 쓰도록 한다.
const를 쓰면 의도치 않은 재할당을 방지해주기 때문에 좀 더 안전하다.

참고문서

-> https://velog.io/@bathingape/JavaScript-var-let-const-%EC%B0%A8%EC%9D%B4%EC%A0%90