[var, let, const] 자바스크립트 변수 선언의 차이점과 쓰임새

728x90

var, let, const - JavaScript 변수 선언 

JavaScript에서 변수를 선언할 때 var, let, const 중 무엇을 써야 할지 헷갈리시나요? 이 세 가지는 비슷해 보이지만 스코프, 재할당, 호이스팅 등에서 중요한 차이를 가지고 있습니다.

 

---

1.  var, let, const 비교표

구분	var	let	const
스코프	함수 스코프	블록 스코프	블록 스코프
재선언	✅ 가능	❌ 오류	❌ 오류
재할당	✅ 가능	✅ 가능	❌ 불가능
호이스팅	✅ 됨 (초기화 안 됨)	✅ 됨 (초기화 안 됨, TDZ 존재)	✅ 됨 (초기화 안 됨, TDZ 존재)
주 사용 시기	과거 코드 유지보수용	일반 변수 선언	상수나 객체 참조 고정

a.  var (과거의 변수 선언 방식)

function test() {
  if (true) {
    var x = 10;
  }
  console.log(x); // 10 (블록 밖에서도 접근됨)
}

 

• var는 함수 스코프(function scope)입니다.
• 블록 { } 안에서 선언해도 바깥에서 접근 가능합니다. → 의도치 않은 오류 발생 가능
• 재선언, 재할당 모두 가능합니다.

호이스팅을 주의해야 합니다.

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

• var는 선언이 끌어올려지되(hoisting), 초기화는 안 됩니다.
• 그래서 undefined가 출력됩니다.

b.  let (ES6 이후 기본 변수 선언)

if (true) {
  let y = 20;
}
console.log(y); // ❌ ReferenceError

• let은 블록 스코프(block scope)입니다.
• 재선언은 불가능하고, 재할당은 가능합니다.

TDZ (Temporal Dead Zone)

console.log(a); // ReferenceError
let a = 5;

• 선언 전 접근하면 에러가 생깁니다.
• 이 구간을 TDZ(일시적 사각지대)라고 부릅니다.

c.  const (재할당이 불가능한 변수 선언)

const z = 30;
z = 40; // ❌ TypeError: Assignment to constant variable.

• let과 동일하게 블록 스코프(block scope)입니다.
• 재선언, 재할당 모두 불가능합니다.
• 단, 객체나 배열은 속성 변경은 가능합니다.

const user = { name: "Alice" };
user.name = "Bob"; // ✅ 가능

• const는 값 자체는 바꿀 수 없지만, 참조된 객체는 수정 가능합니다.

 

---

2.  어떤 키워드를 언제 써야 할까?

상황	추천 키워드	이유
바뀌지 않아야 할 값	const	불변성 유지 & 실수 방지
바뀔 수 있는 값	let	가변 변수에 적합
구식 코드	var	가능하면 피하기 (호이스팅 이슈, 스코프 혼란)

 

---

3.  마무리

함께하면 좋은 자료

외부 사이트 :

• MDN Web Docs - var
• MDN Web Docs - let
• MDN Web Docs - const

블로그 글 :

[TDZ] 선언했는데 왜 에러가 날까?

[실행 컨텍스트] JavaScript는 이렇게 코드를 실행한다.

[호이스팅] 변수 선언의 비밀

[스코프] 변수는 어디까지 살아있을까?

 

---

반응형