LHJ

I'm a FE developer.

2.1.1 const, let

12 Jun 2020 » node_book

2.1.1 const, let

보통 자바스크립트를 배울 때 var로 변수를 선언하는 방법부터 배웁니다.
하지만 var은 이제 constlet이 대체합니다.
먼저 constlet이 공통으로 가지는 특징인 블록 스코프에 대해 알아봅시다.

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는 에러가 발생합니다.
varconst로 바꿨을 뿐인데 차이가 발생하는 것입니다.
var함수 스코프를 가지므로 if문의 블록과 관계없이 접근할 수 있습니다.
하지만 constlet블록 스코프를 가지므로 블록 밖에서는 변수에 접근할 수 없습니다.
블록의 범위는 if, while, for, function 등의 중괄호입니다.
함수 스코프 대신 블록 스코프를 사용함으로써 호이스팅 같은 문제도 해결되고 코드 관리도 수월해졌습니다.

constletvar과 다른 점은 어떤 스코프를 취하는지입니다.
그렇다면 constlet의 차이는 무엇일까요?
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을 사용하면 됩니다.