🔥 1. var는 함수 스코프, let은 블록 스코프
👉 var는 함수 내에서만 스코프를 가짐
function test() {
if (true) {
var x = 10;
}
console.log(x); // ✅ 10 (if문 블록을 벗어나도 접근 가능)
}
test();var로 선언된 변수는 함수 전체에서 유효해서, if문 블록을 빠져나와도x에 접근할 수 있음.- 문제점: 블록
{}을 빠져나와도 살아 있어서, 원하지 않는 값 변경이 일어날 수 있음.
👉 let은 블록 {} 내에서만 유효
function test() {
if (true) {
let y = 20;
}
console.log(y); // ❌ ReferenceError: y is not defined
}
test();let은 블록{}안에서만 유효하기 때문에,if블록 밖에서는y를 사용할 수 없음.- 안전성 증가! 블록 내에서만 변수를 사용하게 강제할 수 있음.
🔥 2. var는 중복 선언 가능, let은 불가능
👉 var는 같은 이름으로 여러 번 선언해도 오류 없음
var a = 1;
var a = 2;
console.log(a); // ✅ 2 (덮어쓰기됨, 오류 안 남)- 문제점: 같은 이름으로 변수를 다시 선언해도 오류가 안 나서, 의도치 않은 덮어쓰기가 발생할 수 있음.
👉 let은 중복 선언 불가능
let b = 1;
let b = 2; // ❌ SyntaxError: Identifier 'b' has already been declared- 안전성 증가! 같은 변수를 다시 선언하지 못하게 막아줌.
🔥 3. var는 호이스팅 시 undefined, let은 에러 발생
👉 var는 호이스팅(변수를 위로 끌어올림)될 때 undefined가 됨
console.log(c); // ✅ undefined (하지만 선언 전에 접근 가능)
var c = 3;var는 호이스팅될 때 선언만 위로 올라가고, 값은undefined로 남음.- 문제점: 초기화 전에 변수에 접근할 수 있어서 버그 발생 가능.
👉 let은 호이스팅되지만, 초기화 전에 사용하면 에러 발생
console.log(d); // ❌ ReferenceError: Cannot access 'd' before initialization
let d = 4;- 안전성 증가! 선언 전에 접근할 수 없게 막아줌.
🔥 4. var는 window 객체에 저장됨, let은 저장되지 않음
var x = "hello";
console.log(window.x); // ✅ "hello" (전역 변수로 등록됨)
let y = "world";
console.log(window.y); // ❌ undefined (전역 객체에 등록되지 않음)var로 선언한 변수는window객체의 속성으로 등록되지만,let은 그렇지 않음.- 보안 문제: 전역 변수 오염 가능성 있음.
🎯 결론: let이 더 안전하고, 유지보수가 쉽다!
| 비교 항목 | var | let |
|---|---|---|
| 스코프(Scope) | 함수(Function) 스코프 | 블록(Block) 스코프 |
| 중복 선언 | 가능 (오류 없음) | 불가능 (오류 발생) |
| 호이스팅 시 초기 값 | undefined | 에러 발생 |
window 객체 등록 | 됨 | 안 됨 |
📌 따라서 최신 JavaScript에서는 let을 먼저 쓰는 게 더 안전한 선택임!
📌
var는 과거에는 많이 썼지만, 지금은 거의 사용하지 않음.
let과 const를 사용해서 더 안전하게 코드를 작성하는 게 좋음.
