자바스크립트는 변수를 선언할 때 var, const, let 세 가지 키워드를 사용합니다. 이 세 가지 변수 타입은 각각 다른 특징을 가지고 있으며, 적절하게 사용하지 않으면 예기치 않은 결과를 가져올 수 있습니다. 따라서 각 변수의 특징을 이해하고 어떤 경우에 사용해야 하는지 잘 파악해야 합니다. 이번 글에서는 자바스크립트 변수 타입인 const와 let, 그리고 var에 대해 알아보고, 적절한 사용 방법에 대해서도 설명해드리겠습니다.
자바스크립트 const와 let의 차이점
자바스크립트에서 const와 let은 변수를 선언하는 데 사용됩니다.
const는 변하지 않는 값을 할당할 때 사용됩니다. 한번 값을 할당하면 다른 값을 재할당할 수 없기 때문에, 변수의 값이 변하지 않아야 할 경우에 사용합니다. 예를들면 주민등록번호가 있습니다.
let은 값을 변경해야 할 때 사용됩니다. 변수의 값을 언제든지 변경할 수 있습니다.
예를들면 나이, 로또번호 등이 있습니다.
예시 코드를 참고하여 자세히 알아보겠습니다.
const x = 10; // x는 변하지 않는 값입니다.
let y = 20; // y는 나중에 변경될 수 있습니다.
console.log(x); // 10이 출력됩니다.
console.log(y); // 20이 출력됩니다.
y = 30; // y의 값을 변경합니다.
console.log(y); // 30이 출력됩니다.
위의 코드에서, x는 const로 선언되어 있어 값을 변경할 수 없습니다. 그러나 y는 let으로 선언되어 있어 값을 변경할 수 있습니다.
그렇기 때문에 처음 console.log로 x와 y를 출력할때 값이 정상적으로 나오고 이후에 let으로 선언한 y의 값을 30으로 변경해준뒤 console.log로 출력하면 변경된 30값이 나오게됩니다.
const x =10;
console.log(x);
x = 20;
console.log(x);
#Uncaught TypeError: Assignment to constant variable하지만 값을 변경할수 없는 const로 선언된 변수에서는 변수의 값을 재할당후 출력하려고하면 type error가 발생합니다.
const와 let 기본적으로 뭘 사용해야할까?
const와 let을 사용하여 변수를 선언할 때, 변수를 선언할 때는 가능하면 const를 사용하는 것이 좋습니다. 이는 변수의 값을 변경하지 않을 것이라는 의도를 명확히 하여 코드를 보는사람도 이해하기가 쉽기 때문입니다. 기본적으로 const를 사용하고 변수의 값이 변경되어야 하는 경우에는 let을 사용하면 됩니다.
var 변수에 대해서
초기의 자바스크립트에서는 let와 const가 없었습니다. var은 let과 const가 나오기 전에 사용되던 변수 선언 방식입니다. 하지만 var은 기존에 선언한 변수를 중복 선언할 수 있어서 예기치 않은 버그를 발생시키기도 합니다.
예를 들어, var을 사용하여 변수 a를 두 번 선언하고 다른 값을 할당해보겠습니다.
var a = 10;
var a = 20;
console.log(a);
이 코드는 에러 없이 실행되며 변수 a에는 마지막으로 할당한 20이 저장됩니다. let과 유사하지만 다른점은 같은변수를 중복선언했다는 점입니다.
하지만 이런 코드는 프로그램의 유지 보수성을 낮추고, 중복된 변수가 늘어나면 이전에 변수를 사용했나 헷갈리기도하고 코드의 질을 떨어뜨립니다. 따라서 가능하면 var 대신 let이나 const를 사용하도록 합니다.
var함수 스코프, const&let 블록 스코프
또한, var은 함수 스코프(function scope)를 가지고 있습니다. 함수 스코프는 변수가 함수 블록 안에서만 유효하다는 의미입니다. 함수 스코프는 let과 const의 블록 스코프(block scope)와는 차이점이 있습니다.
function example() {
var a = 10;
if (true) {
var a = 20;
console.log(a); // 20
}
console.log(a); // 20
}이 코드에서 변수 a를 두 번 선언했지만, 두 번째 선언은 같은 함수내에 if 문 안에서 이루어졌습니다. 그럼에도 불구하고, 두 번째 console.log에서 a는 20을 출력합니다. 이는 var이 함수 스코프를 가지고 있어서 {}블록 바깥 전역 스코프에서도 해당 변수에 접근할 수 있기 때문입니다.
function example() {
let a = 10;
if (true) {
let a = 20;
console.log(a); // 20
}
console.log(a); // 10
}그러나 let과 const는 블록 스코프를 가지고 있어서 if 문 안에서 선언된 변수는 if 문 안에서만 유효합니다.
이 코드에서 두 번째 console.log에서는 변수 a의 값이 10으로 출력됩니다. 이는 let이 블록 스코프를 가지고 있어서 if 문 안에서 선언된 a와 전역에서 선언된 a가 서로 다른 변수이기 때문입니다.