자바스크립트 변수 var·let·const 차이
웹 개발을 시작했다면 자바스크립트 변수(JavaScript Variables)의 개념과 선언·초기화 방법을 확실히 알아두셔야 합니다. 변수는 데이터를 저장하는 메모리 공간으로, 프로그램 흐름에서 값 추적과 상태 관리를 담당합니다. 이번 글에서는 var, let, const의 차이점부터 이름 규칙, 묵시적 선언의 위험성까지 초보자도 이해할 수 있도록 상세히 설명드립니다.
변수 선언과 초기화: var vs let vs const
var 선언 (ES5 이전 방식)
var는 함수 스코프를 가지며 선언이 호이스팅(끌어올림)돼 예기치 않은 버그를 유발할 수 있습니다.
var month; // 선언
var date = 25; // 선언 + 초기화
month = 12; // 값 재할당
주의: 선언 없이 값을 대입하면 묵시적으로 전역 변수가 생성됩니다.
price = 1000; // 전역 공간 오염 – 지양
let 선언 (ES6)
- 블록 스코프를 가지며 호이스팅되더라도 TDZ (Temporal Dead Zone)로 보호되어 안전합니다.
- 재할당 가능, 재선언 불가.
let count = 10;
count = 15; // ✅ 재할당
// let count = 20; ❌ 재선언 오류
const 선언 (ES6)
- 블록 스코프 + 재할당 불가 – 상수로 사용
- 객체 프로퍼티는 변경 가능 → 불변 객체로 사용하려면
Object.freeze()활용
const PI = 3.14;
// PI = 3.1415; ❌ TypeError
const car = { brand: "Tesla" };
car.brand = "BYD"; // ✅ 프로퍼티 변경 가능
타입 유연성과 기본값
동적 타입 언어의 유연성
자바스크립트 변수는 값의 타입을 자유롭게 변경할 수 있습니다.
var data = 10; // Number
data = [10, 20, 30]; // Array – 타입 변경
- 이미 선언된
var data;를 다시 선언해도 무시됩니다. - 초기화하지 않으면 자동으로
undefined가 할당됩니다.
let num; // undefined
console.log(num); // undefined
num = 10;
변수 이름(식별자) 규칙 & 네이밍 팁
| 규칙 | 허용 예 | 금지 예 |
|---|---|---|
| 영문·숫자·언더스코어·달러 사용 | firstName, $age, _count |
1stPlace |
| 숫자로 시작 ❌ | user1 |
123user |
| 예약어 사용 ❌ | – | var, function |
- Camel Case가 가장 널리 쓰입니다:
firstName,totalPrice. - 상수(
const)는 대문자 + 밑줄로 표현하기도 합니다:MAX_WIDTH.
묵시적 변수 선언의 위험성
total = 5000; // 선언 키워드 없음 → 전역 변수로 생성
- 전역 네임스페이스 오염 → 다른 스크립트와 충돌 가능
'use strict'모드에서는 ReferenceError 발생
베스트 프랙티스
- 항상
let또는const사용- 가능한 좁은 블록 스코프에 선언해 측면 효과 최소화
요약: var·let·const 비교
| 특징 | var | let | const |
|---|---|---|---|
| 스코프 | 함수 | 블록 | 블록 |
| 호이스팅 | O (값 undefined) |
O (TDZ) | O (TDZ) |
| 재선언 | 가능 | 불가 | 불가 |
| 재할당 | 가능 | 가능 | 불가 |
| 사용 시점 | 레거시 유지보수 | 일반 변수 | 상수 & 불변 의도 |
질문 정리
Q1. var 를 완전히 사용하지 않아도 되나요?
A. 신규 프로젝트라면 let·const만으로 충분합니다. 레거시 코드 유지보수 시에만 var를 이해하고 사용하세요.
Q2. const 객체의 프로퍼티를 변경해도 되나요?
A. const는 변수 재할당만 막습니다. 객체 내용을 불변으로 유지하려면 Object.freeze()가 필요합니다.
Q3. 블록 스코프란 무엇인가요?
A. { ... } 로 감싸진 영역을 의미합니다. let·const로 선언한 변수는 해당 블록을 벗어나면 접근할 수 없습니다.
Q4. 호이스팅이란?
A. 런타임 전에 변수·함수 선언이 스코프 최상단으로 끌어올려지는 현상입니다. let·const는 TDZ 덕분에 초기화 전 접근 시 오류가 발생해 안전합니다.
Q5. 변수 네이밍에서 헝가리언 표기법을 써도 될까요?
A. 최신 자바스크립트 생태계에선 Camel Case가 표준입니다. 헝가리언은 가독성을 떨어뜨리므로 권장되지 않습니다.
댓글남기기