[JavaScript] const, let, var 차이점

keyword	const	let	var
중복 선언 가능 여부	❌	❌	⭕
재할당 가능 여부	❌	⭕	⭕
변수 스코프 유효 범위	블록 레벨	블록 레벨	함수 레벨
변수 호이스팅 방식	⭕(다른 방식)	⭕ (다른 방식)	⭕

---

1️⃣ 중복 선언 가능 여부

	const	let	var
중복 선언 가능 여부	❌	❌	⭕

중복 선언 가능 여부란?

• 같은 이름의 변수를 한 스코프 안에서 다시 선언할 수 있는지 여부

차이점

• const, let : 불가 - 이미 선언된 변수를 다시 선언하려 하면 SyntaxError
• var : 허용 - 동일 스코프 안에서 다시 선언해도 에러 없음

var x = 1;
var x = 2; // ⭕ 값이 2로 덮임
console.log(x); // 2

let y = 1;
let y = 2; // ❌ SyntaxError
const z = 1;
const z = 2; // ❌ SyntaxError

문제점

• var에서 중복 선언 허용은 예상치 못한 값 덮어쓰기를 일으킴

2️⃣ 재할당 가능 여부

	const	let	var
재할당 가능 여부	❌	⭕	⭕

재할당 가능 여부란?

• 선언한 변수를 나중에 다른 값으로 바꿀 수 있는지 여부

차이점

• const : 불가능 - 단, 객체/배열 내부 값 변경은 가능
• let, var : 가능

const a = 10;
a = 20; // ❌ TypeError

예외

• const는 재할당이 불가능하고 재선언도 불가하지만, 객체/배열의 내부 값 변경은 가능

const obj = { n: 1 };
obj.n = 2; // ⭕ 가능 (객체 내부는 수정 가능)

3️⃣ 변수 스코프 유효 범위

keyword	const	let	var
변수 스코프 유효 범위	블록 레벨	블록 레벨	함수 레벨

변수 스코프 유효 범위란?

• 변수가 사용될 수 있는(유효한) 범위

차이점

• const, let : 블록 레벨 스코프 - { } 안에서만 유효
• var : 함수 레벨 스코프 - 오직 함수 단위로만 제한

if (true) {
  var v = 10;
  let l = 20;
}
console.log(v); // 10
console.log(l); // ReferenceError

문제점

• var는 for/if 블록을 무시하기 때문에, 의도치 않게 변수가 바깥에서 접근 가능

4️⃣ 변수 호이스팅 방식

keyword	const	let	var
변수 호이스팅 방식	⭕(다른 방식)	⭕ (다른 방식)	⭕

변수 호이스팅 방식이란?

• 선언이 스코프 최상단으로 끌어올려지는 현상

차이점

• const, let : 선언만 호이스팅되고 초기화는 원래 자리에 남음 (그 사이 구간은 "Temporal Dead Zone(TDZ)") - 참조하면 ReferenceError
• var : 선언+초기화가 같이 호이스팅되어 undefined로 세팅됨 - 참조 시 에러 없이 undefined

console.log(x); // undefined
var x = 5;

console.log(y); // ReferenceError (TDZ)
let y = 5;

포인트

• 이 차이 때문에 var는 예측하기 어려운 버그를 유발할 수 있음

---

5️⃣ 결론

var는 가급적 사용하지 않도록 하자..