let, var, const의 차이점과 호이스팅

호이스팅 (hoisting)
자바스크립트는 실행시점에 변수와 함수에 대해 호이스팅을 수행합니다. 호이스팅이란 사전적인 의미로 끌어올린다 라는 의미로 변수와, 함수를 소스의 맨 위의 위치로 이동합니다.

(JavaScript) 스코프(Scope)란?
ES6(ES2015)이전에는 변수를 선언할 수 있는 키워드가 var뿐이었습니다. 하지만 ES6에서는 let, const 키워드가 추가되어 이를 이용해서도 변수를 선언할 수 있게 되었습니다. 그럼 var, let, const의 차이점에 대해 알아보겠습니다.
var, let, const의 차이점
1. var는 함수 레벨 스코프이고 let, const는 블럭 레벨 스코프입니다.
2. var로 선언한 변수는 선언 전에 사용해도 에러가 나지 않지만 let, const는 에러가 발생합니다.
3. var는 이미 선언되어있는 이름과 같은 이름으로 변수를 또 선언해도 에러가 나지 않지만 let, const는 이미 존재하는 변수와 같은 이름의 변수를 또 선언하면 에러가 납니다.
4. var, let은 변수 선언시 초기 값을 주지 않아도 되지만 const는 반드시 초기값을 할당해야 합니다.
5. var, let은 값을 다시 할당할 수 있지만 const는 한번 할당한 값은 변경할 수 없습니다(단, 객체 안에 프로퍼티가 변경되는 것까지 막지는 못합니다).
2번 차이점의 경우를 보시면 ‘그럼 var는 호이스팅이 되고 let, const는 호이스팅이 안되기 때문에 그러는건가?’ 라고 생각하실 수 있는데요. 그렇지는 않습니다. 자바스크립트에서 사용하는 var, let, const, function, class 등등의 선언 키워드들은 모두 호이스팅이 되는데요.
var의 경우 호이스팅되면서 초기 값이 없으면 자동으로 undefined를 초기값으로 하여 메모리를 할당합니다. 그래서 var의 경우 선언 전에 해당 변수를 사용하려고 해도 메모리에 해당 변수가 존재하기 때문에 에러가 발생하지 않습니다.

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

console.log(num); // Uncaught ReferenceError: num is not defined
let num = 1;
console.log(num); // 1
// 호이스팅 되었을 때
let num;
console.log(num); // 값이 할당되기 전이므로 아직 num은 메모리에 존재하지 않음. TDZ.
num = 1;
console.log(num); // 1

const obj = { first: 1 };
// 에러 발생
obj = 1; // Uncaught TypeError: Assignment to constant variable.
// 에러 발생하지 않음.
obj.first = 2;
obj.second = 2;
delete obj.first;

위와 같이 const 변수가 가리키는 값 자체를 변경하려고 하면 에러가 발생하지만 객체 내의 프로퍼티의 추가, 변경, 삭제를 하는 것은 문제가 없습니다. 만약 객체의 프로퍼티도 변경되지 않게 객체를 선언하고 싶으시다면 Object.freeze() 메소드를 사용할 수 있습니다(Object.freeze()는 얕은 동결이기 때문에 객체 안에 있는 또다른 객체의 프로퍼티 변경까지 동결하지는 못합니다).

var의 경우 버그 발생과 메모리 누수의 위험 등이 있기 때문에 var말고 let, const를 사용하시는 것이 좋습니다.