보통 자바스크립트를 배울 때 var로 변수를 선언하는 방법부터 배웁니다.
하지만 var은 이제 const와 let으로 대체합니다.
먼저 const와 let이 공통으로 가지는 특징인 블록 스코프에 대해 알아봅시다.
if (true) {
var x = 3;
}
console.log(x); // 3
if (true) {
const y = 3;
}
console.log(y); // Uncaught ReferenceError : y is not defined
코드는 크롬 개발자 도구(F12)의 Console 탭에 적으면 됩니다.
x는 정상적으로 출력되는데 y는 에러가 발생합니다.
var을 const으로 바꿨을 뿐인데 차이가 발생하는 것입니다.
var은 함수 스코프를 가지므로 if 문의 블록과 관계없이 접근할 수 있습니다.
하지만 const와 let은 블록 스코프를 가지므로 블록 밖에서는 변수에 접근할 수 없습니다.
블록의 범위는 if, while, for, function 등의 중괄호입니다.
함수 스코프 대신 블록 스코프를 사용함으로써 호이스팅 같은 문제도 해결되고 코드 관리도 수월해졌습니다.
const와 let이 var과 다른 점은 어떤 스코프를 취하는지입니다.
그렇다면 const와 let의 차이는 무엇일까요?
const는 한 번 대입하면 다른 값을 대입할 수 없습니다.
const에 다른 값을 대입하려고 하면 에러가 발생합니다.
또한, 초기화 시 값을 대입하지 않으면 에러가 발생합니다.
아래 예제를 따라해보세요.
const a = 0;
a = 1; // Uncaught TypeError : Assignment to constant variable.
let b = 0;
b = 1; // 1
const c; // Uncaught SyntaxError : Missing initializer in const declaration
자바스크립트를 사용할 때 한 번 초기화했던 변수에 다른 값을 대입하는 경우는 의외로 적습니다.
따라서 기본적으로 변수 선언 시에는 const를 사용하고,
다른 값을 대입해야 하는 상황이 생겼을 때 let을 사용하면 됩니다.