자바스크립트를 공부하며 가장 먼저 이해해야 하는 변수 선언 방식
자바스크립트를 처음 공부하다 보면 가장 먼저 마주치게 되는 것이 var, let, const입니다.
문법 자체만 보면 셋 다 변수를 선언하는 키워드처럼 보이기 때문에, 처음에는 “어차피 변수 만드는 거
아닌가?”라는 생각이 들기 쉽습니다.
저 역시 강의를 듣다가, 자바스크립트를 깊게 파고들 계획은 아니더라도 이런 가장 기본이 되는 차이는
알고 넘어가야겠다고 느꼈습니다.
특히 프런트엔드를 학습하거나, 기존 코드를 읽거나, 간단한 기능을 구현할 때도 var, let, const
의 차이를 모르면 코드가 왜 그렇게 작성되어 있는지 이해하기 어려워질 수 있습니다.
그래서 이번 글에서는 자바스크립트에서 변수를 선언할 때 사용하는 var, let, const가 각각 무엇
이고, 어떤 차이가 있는지 아주 기초적인 수준에서 가볍게 정리해보려고 합니다.
var, let, const는 모두 변수 선언 키워드이다
자바스크립트에서는 값을 저장하기 위해 변수를 선언합니다.
이때 사용하는 키워드가 바로 var, let, const입니다.
예를 들면 아래와 같습니다.
var name = "Tom";
let age = 20;
const country = "Korea";
이 코드는 각각 name, age, country라는 변수를 만들고 값을 저장한 것입니다.
겉으로만 보면 셋 다 비슷해 보이지만, 실제로는 동작 방식과 용도가 조금씩 다릅니다.
이 차이를 이해하려면 가장 먼저
“값을 다시 바꿀 수 있는가?”
그리고
“어디까지 사용할 수 있는가?”
이 두 가지를 중심으로 보면 이해가 쉬워집니다.
var는 예전 방식의 변수 선언이다
var는 자바스크립트에서 오래전부터 사용되던 변수 선언 방식입니다.
예전 코드에서는 많이 보이지만, 요즘은 let과 const를 더 자주 사용합니다.
var count = 1;
count = 2;
이처럼 var로 선언한 변수는 값을 다시 바꿀 수 있습니다.
즉, 재할당이 가능합니다.
문제는 var가 단순히 “값을 바꿀 수 있다”에서 끝나지 않는다는 점입니다.
var는 블록 단위가 아니라 함수 단위 스코프를 가지기 때문에, 코드가 길어질수록 예상하지 못한 동
작을 만들기 쉽습니다.
예를 들어 아래 코드를 보면,
if (true) {
var message = "hello";
}
console.log(message);
if 블록 안에서 선언했는데도 바깥에서 사용할 수 있습니다.
처음 배우는 입장에서는 꽤 어색하게 느껴질 수 있는 부분입니다.
즉, var는 예전 방식이고,
동작이 다소 헷갈릴 수 있기 때문에 지금은 특별한 이유가 없다면 많이 사용하지 않는 편입니다.
let은 값이 바뀔 수 있는 변수를 만들 때 사용한다
let은 var의 단점을 보완하기 위해 나온 방식입니다.
가장 기본적으로는 “값이 나중에 바뀔 수 있는 변수”를 만들 때 사용합니다.
let score = 10;
score = 20;
이처럼 let 역시 재할당이 가능합니다.
즉, 처음 넣은 값을 나중에 바꿀 수 있습니다.
하지만 var와 다른 점은 블록 스코프를 가진다는 점입니다.
if (true) {
let test = "hello";
}
console.log(test);
이 코드는 에러가 발생합니다.
왜냐하면 let은 자신이 선언된 블록 {} 안에서만 유효하기 때문입니다.
이 특징 덕분에 코드의 범위를 더 명확하게 관리할 수 있고,
실수로 다른 곳에서 같은 변수를 잘못 건드리는 일을 줄일 수 있습니다.
그래서 값이 변경될 가능성이 있는 변수라면 let을 사용하는 것이 일반적입니다.
const는 한 번 정하면 다시 바꿀 수 없는 값을 만들 때 사용한다
const는 상수처럼 사용하는 변수 선언 방식입니다.
한 번 값을 넣으면, 그 변수에 다른 값을 다시 넣을 수 없습니다.
const pi = 3.14;
pi = 3.14159;
위 코드는 에러가 발생합니다.
const로 선언한 변수는 재할당이 불가능하기 때문입니다.
즉, 변하지 않아야 하는 값이라면 const를 사용하는 것이 더 안전합니다.
예를 들면 아래와 같은 값들입니다.
const siteName = "My Blog";
const maxLength = 10;이 값들은 코드가 실행되는 동안 바뀌지 않는다는 의미를 더 분명하게 전달할 수 있습니다.
다만 여기서 하나 주의할 점이 있습니다.
const는 “변수 자체를 다시 가리키게 할 수 없다”는 뜻이지,
객체나 배열 내부까지 완전히 수정 불가능하다는 뜻은 아닙니다.
const user = { name: "Tom" };
user.name = "Jane";
이 코드는 가능합니다.
user라는 변수 자체를 다른 객체로 바꾸는 것은 안 되지만,
그 안의 속성값을 바꾸는 것은 가능하기 때문입니다.
이 부분은 초반에는 가볍게
“const는 재할당이 안 된다”
정도로 이해하고 넘어가도 충분합니다.
그래서 실제로는 무엇을 쓰면 될까
실무나 학습에서는 보통 다음과 같은 기준으로 생각하면 이해하기 쉽습니다.
먼저, 기본은 const로 시작합니다.
값이 바뀔 필요가 없다면 굳이 바뀔 수 있게 만들 이유가 없기 때문입니다.
그리고 정말로 값이 변경되어야 하는 경우에만 let을 사용합니다.
var는 과거 코드나 오래된 예제에서 볼 수는 있지만,
새로 작성하는 코드에서는 보통 잘 사용하지 않습니다.
정리하면 흐름은 이렇습니다.
- 바뀌지 않는 값 → const
- 바뀔 수 있는 값 → let
- 오래된 방식, 특별한 이유 없으면 지양 → var
이 기준만 잡고 있어도 초반 자바스크립트 코드를 읽는 데 훨씬 수월해집니다.
마무리
자바스크립트의 var, let, const는 모두 변수를 선언하기 위한 키워드이지만,
값을 다시 바꿀 수 있는지, 그리고 어디까지 유효한지가 서로 다릅니다.
처음에는 셋 다 비슷해 보여도, 이 차이를 알고 나면 코드가 훨씬 명확하게 보이기 시작합니다.
특히 자바스크립트를 깊게 공부하지 않더라도, 이런 기본 문법은 나중에 React나 간단한 프론트 코
드, 기존 프로젝트의 스크립트를 읽을 때 계속 마주치게 되는 부분이기 때문에 초반에 가볍게라도 정리
해두는 것이 도움이 됩니다.
결국 가장 실용적으로 기억하면 됩니다.
기본은 const,
필요할 때만 let,
그리고 var는 예전 방식이라는 점입니다.
자바스크립트를 처음 접할 때는 문법 하나하나가 낯설 수 있지만,
이런 기본 개념부터 천천히 정리해두면 이후의 흐름도 훨씬 편하게 따라갈 수 있습니다.