[JavaScript] 내가 보려고 저장 - let과 var의 차이점

1. 스코프(Scope)

• var: 함수 스코프
  • var로 선언된 변수는 함수 내에서만 유효합니다. 함수 바깥에서 선언하면 전역 변수로 간주됩니다.
  • 블록({}) 내에서 선언해도 블록을 무시하고 함수 스코프에 따라 동작합니다.
  javascript

  코드 복사

  function testVar() { if (true) { var x = 10; // 함수 스코프 } console.log(x); // 10 } testVar();
• let: 블록 스코프
  • let로 선언된 변수는 선언된 블록 내에서만 유효합니다.
  javascript

  코드 복사

  function testLet() { if (true) { let y = 20; // 블록 스코프 console.log(y); // 20 } console.log(y); // ReferenceError: y is not defined } testLet();

2. 변수 중복 선언

• var: 동일한 스코프에서 변수 중복 선언이 가능합니다.
  javascript

  코드 복사

  var a = 1; var a = 2; // 중복 선언 가능 console.log(a); // 2
• let: 동일한 스코프에서 변수 중복 선언이 불가능합니다.
  javascript

  코드 복사

  let b = 1; let b = 2; // SyntaxError: Identifier 'b' has already been declared

3. 변수 호이스팅(Variable Hoisting)

• var: 호이스팅 시 변수 선언이 함수 또는 전역 스코프의 최상단으로 끌어올려지며, 초기화는 끌어올려지지 않기 때문에 undefined로 초기화됩니다.
  javascript

  코드 복사

  console.log(c); // undefined var c = 3;
• let: 호이스팅은 되지만, 선언 전에 접근하면 ReferenceError가 발생합니다.
  javascript

  코드 복사

  console.log(d); // ReferenceError: Cannot access 'd' before initialization let d = 4;

4. 전역 객체와의 관계

• var: 전역 스코프에서 선언된 var 변수는 브라우저의 window 객체의 속성이 됩니다.
  javascript

  코드 복사

  var e = 5; console.log(window.e); // 5
• let: 전역 스코프에서 선언된 let 변수는 window 객체의 속성이 되지 않습니다.
  javascript

  코드 복사

  let f = 6; console.log(window.f); // undefined

5. TDZ(Temporal Dead Zone, 임시적 사각지대)

• **let**은 변수 선언 전에 접근할 수 없는 영역(TDZ)이 존재합니다. 선언 이전에 해당 변수에 접근하려고 하면 오류가 발생합니다.

---

요약

특징varlet

스코프	함수 스코프	블록 스코프
중복 선언	허용	허용되지 않음
호이스팅	초기화되지 않은 undefined	TDZ로 오류 발생
전역 객체(window) 연결	연결됨	연결되지 않음

var는 과거의 코드에서 많이 사용되었지만, 현재는 더 안전하고 예측 가능한 동작을 제공하는 let과 const를 사용하는 것이 권장됩니다.

 

둘의 사용 구분과 이유정도는 알고 나누어 사용하는것이 좋을 것 같다.