JavaScript 변수 완전 정복: var, let, const의 차이와 올바른 사용법

변수란 무엇인가? 프로그래밍의 첫 번째 개념

변수(Variable)는 데이터를 담는 상자입니다. 이름표를 붙인 상자에 숫자, 문자, 리스트 등 다양한 데이터를 넣고, 필요할 때 꺼내 쓸 수 있죠.

JavaScript에는 변수를 선언하는 세 가지 키워드가 있습니다: var, let, const. 이 세 가지의 차이를 정확히 아는 것이 JavaScript 학습의 첫 걸음이자, 면접에서도 자주 나오는 질문입니다.

var — 왜 더 이상 쓰면 안 되는가

var는 ES6(2015년) 이전에 유일하게 사용하던 변수 선언 방식입니다. 세 가지 치명적인 문제가 있습니다:

문제 1: 함수 스코프 — var는 블록({})을 무시하고 함수 전체에서 유효합니다. for문 안에서 선언한 변수가 바깥에서도 접근 가능해 예측하기 어려운 버그를 만듭니다.

문제 2: 호이스팅(Hoisting) — var 선언이 코드의 맨 위로 끌어올려집니다. 선언 전에 변수를 사용해도 에러가 나지 않고 undefined가 됩니다. 이것이 디버깅을 극도로 어렵게 만듭니다.

문제 3: 재선언 가능 — 같은 이름으로 여러 번 선언해도 에러가 나지 않습니다. 500줄짜리 코드에서 같은 변수명을 실수로 재선언하면 찾기 힘든 버그가 됩니다.

let — 변하는 값을 담는 상자

let은 ES6에서 도입된 현대적인 변수 선언 방식입니다. var의 세 가지 문제를 모두 해결합니다.

블록 스코프: 중괄호 {} 안에서만 유효합니다. for문 안에서 선언하면 for문 밖에서 접근할 수 없어 안전합니다.

재할당 가능, 재선언 불가: 값은 바꿀 수 있지만, 같은 이름으로 다시 선언할 수는 없습니다. 실수를 방지해줍니다.

카운터, 반복문 인덱스, 사용자 입력값, 상태가 변하는 데이터 등에 let을 사용합니다.

const — 변하지 않는 값의 보호막

const는 한 번 할당하면 재할당할 수 없는 상수(Constant)를 선언합니다.

API URL, 설정값, 색상 코드, DOM 요소 참조 등 한 번 정하면 바꿀 이유가 없는 값에 사용합니다.

중요한 예외: 객체와 배열은 const로 선언해도 내부 값을 변경할 수 있습니다. const가 보호하는 것은 '상자 자체의 교체'이지, '상자 안의 내용물 변경'이 아닙니다.

실무에서의 황금 규칙

1단계: 기본은 무조건 const — 모든 변수를 const로 먼저 선언하세요.

2단계: 값이 변해야 할 때만 let — 재할당이 필요한 경우에만 let으로 변경합니다.

3단계: var는 절대 사용하지 않음 — 레거시 코드 유지보수 외에는 쓸 이유가 없습니다.

이 규칙만 지키면 변수 관련 버그의 90%를 예방할 수 있습니다. 대부분의 ESLint 설정에서도 no-var 규칙이 기본 활성화되어 있습니다.

스코프(Scope) 심화 이해

스코프는 변수가 유효한 범위를 의미합니다. JavaScript에는 전역 스코프, 함수 스코프, 블록 스코프 세 가지가 있습니다.

let과 const는 블록 스코프를 따릅니다. 중괄호 {} 안에서 선언된 변수는 그 블록 안에서만 접근할 수 있어 코드의 예측 가능성이 높아집니다.

스코프를 이해하면 클로저(Closure), 모듈 패턴, React의 상태 관리 등 고급 개념도 자연스럽게 이해할 수 있습니다.