[JavaScript] var, let, const

자바스크립트에서 변수 선언 방식인 var,let,const의 차이점에 대해 알아보았습니다.

첫 번째로

변수의 선언 방식이 다릅니다.

var의 경우에는 변수 선언 방식에 있어서 큰 단점을 가지고 있습니다.

var name="hyunhee";
console.log(name) //hyunhee

var name="park"
console.log(name) //park

위 코드에서 이미 할당된 변수에 변수를 한 번 더 선언했는데도 에러가 나오지 않고 다른 값이 출력되는 것을 볼 수 있습니다.
이러한 경우는 변수 선언이 유연함으로 간단한 테스트에는 편리하지만 코드량이 많아진다면 파악도 힘들고 값이 바뀌는 경우가 생길 수 있습니다.

그래서 ES6 이후, 이를 보완하기 위해 우가된 변수 선언 방식이 let과 const입니다. 위의 코드를 살짝 바꿔보자면

let name="hyunhee"
console.log(name) //hyunhee

let name="park"
console.log(name) //Uncaught SyntaxError:Identifier 'name' has already been declared

name이 이미 선언 되었다는 오류가 나옵니다.(const도 마찬가지)
이는 let과 const는 변수 재선언이 불가하다는 것을 보여줍니다.

그렇다면 let과 const의 차이점은 무엇일까요?
이 둘의 차이점은 immutable의 여부입니다. let은 재할당이 가능합니다.
(재선언과 재할당의 차이를 기억 할 것!)

let name="hyunhee"
console.log(name) //hyunhee

name="park"
console.log(name) //park

let과 다르게 const는 재할당이 안됩니다.그러니까 재선언과 재할당 모두 불가능 하다는 말 입니다.

const name="hyunhee"
console.log(name) //hyunhee

const name="park"
console.log(name) //Uncaught SyntaxError:Identifier 'name' has already been declared

name="lulu"
console.log(name) //Assignment to constant variable

두번째로

호이스팅에서 차이가 있습니다.

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

자바스크립트는 ES6에서 도입된 let,const를 포함하여 모든 선언(var,let,const,function,class)을 호이스팅합니다.
하지만 var로 선언된 변수와는 달리 let으로 선언된 변수를 선언문 이전에 참조하면 참조에러(ReferenceError)가 발생합니다.

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

console.log(bar) //Error:Uncaught ReferenceError:bar is not defined
let bar;

이는 let으로 선언된 변수는 스코프의 시작에서 변수의 선언까지 일시적 사각지대(Temporal Dead Zone)에 빠지기 때문입니다.

변수는 "선언 단계 👉🏽 초기화 단계 👉🏽 할당 단계"에 걸쳐 생성되는데 var로 선언된 변수는 선언 단계와 초기화 단계가 한 번에 이루어집니다.
하지만 let으로 선언된 변수는 선언 단계와 초기화 단계가 분리되어 진행됩니다.

정리

var / let / const

변수 선언에는 기본적으로 const를 사용하고 let은 재할당이 필요한 경우에 한정해 사용하는 것이 좋습니다. 그리고 객체를 재할당하는 경우는 생각보다 흔하지 않습니다. const 키워드를 사용하면 의도치 않은 재할당을 방지해 주기 때문에 보다 안전합니다.

ES6를 사용한다면 var 키워드는 사용하지 않는 것이 좋습니다.
재할당이 필요한 경우에 한정해 let 키워드를 사용하고 이때 변수의 스코프는 최대한 좁게 만듭니다.

변경이 발생하지 않는(재할당이 필요 없는 상수) 원시 값과 객체에는 const 키워드를 사용합니다. const 키워드는 재할당을 금지하므로 var, let 보다 안전하기 때문입니다.

변수를 선언하는 시점에는 재할당이 필요할지 잘 모르는 경우가 많습니다. 그리고 객체는 의외로 재할당을 하는 경우가 드물기에 변수를 선언할 때에는 일단 const 키워드를 사용하도록 합니다. 반드시 재할당이 필요하다면 그 때 const를 let 키워드로 변경하는 것을 추천합니다.