자바스크립트에서 var, let, const 는 모두 변수를 선언할 때 사용하지만, 범위(scope), 재할당 가능 여부, 호이스팅(hoisting) 동작 등에서 중요한 차이가 있습니다.
✅ var vs let vs const — 핵심 차이
| 구분 | var | let | const |
|---|---|---|---|
| 선언 범위(Scope) | 함수 스코프(function scope) | 블록 스코프(block scope) | 블록 스코프(block scope) |
| 재선언 가능 여부 | ✅ 가능 | ❌ 불가능 | ❌ 불가능 |
| 값 재할당 | ✅ 가능 | ✅ 가능 | ❌ 불가능 |
| 호이스팅 | ✅ 일어나며, 값은 undefined 로 초기화 | ✅ 선언만 호이스팅, 초기화 X → 사용하는 순간 오류 | ✅ 선언만 호이스팅, 초기화 X → 사용하는 순간 오류 |
✅ 1) var (오래된 방식 – 되도록 사용 안함)
|
1 2 3 4 5 6 |
var a = 10; var a = 20; // 재선언 가능 → 문제 발생 가능 console.log(a); // 20 |
✅ 함수 스코프
❌ 블록 스코프가 아니라 아래처럼 오류 없이 출력됨:
|
1 2 3 4 5 6 7 |
if (true) { var x = 1; } console.log(x); // 1 (블록 밖에서도 접근 가능) ← 위험 |
✅ 2) let (일반적 변수 선언)
|
1 2 3 4 5 6 |
let b = 10; b = 20; // 재할당 가능 console.log(b); // 20 |
✅ 블록 스코프
❌ 재선언 불가
|
1 2 3 4 5 6 7 |
if (true) { let y = 1; } console.log(y); // ReferenceError (블록 밖 접근 불가) |
✅ 3) const (상수 선언, 변하지 않는 값)
|
1 2 3 4 5 |
const c = 10; c = 20; // ❌ TypeError: Assignment to constant variable |
✅ 블록 스코프
✅ 상수라서 재할당 불가
❗ 단, 객체나 배열은 내부 값 변경 가능
|
1 2 3 4 5 6 7 8 9 |
const obj = { a: 1 }; obj.a = 2; // ✅ OK console.log(obj.a); // 2 const arr = [1,2]; arr.push(3); // ✅ OK |
✅ 호이스팅 동작 비교
|
1 2 3 4 5 |
console.log(a); // undefined var a = 10; |
var는 호이스팅되며 undefined로 초기화됨
|
1 2 3 4 5 |
console.log(b); // ReferenceError let b = 10; |
let은 선언만 올라가고 초기화는 안됨 → 초기화 전 사용하면 오류
|
1 2 3 4 5 |
console.log(c); // ReferenceError const c = 10; |
const도 동일
✅ 요약: 실무에서 어떻게 쓰나?
✔ var는 사용 지양 (스코프 문제 많음)
✔ 값이 바뀔 수 있으면 let
✔ 절대 바뀌지 않는 값이면 const
✅ 예제
|
1 2 3 4 5 6 7 8 |
const API_URL = "https://test.com/api"; // 변경되지 않는 값 let count = 0; // 변경 가능 count++; var oldStyle = true; // 가급적 사용 ❌ |