2026-02-04

var, let, const

var / let / const 도입 배경

자바스크립트 초창기에는 var만 존재

→ Var의 문제점

• 스코프가 함수 단위라 예측이 어려움
• 선언 전 접근 가능 (undefined)
• 중복 선언 가능
• 의도치 않은 버그 발생 가능성 높음

⇒ 이 문제를 해결하기 위해 ES6(2015)에서 let과 const가 도입

스코프(Scope) 차이

• var : 함수 스코프

    if (true) {
    var a =10;
    }
    console.log(a);// 10
  

  • 블록({})을 무시
  • 함수만 경계가 됨

  → 코드 규모가 커질수록 변수 추적이 어려움

• let / const : 블록 스코프

    if (true) {
    let b =10;
    }
    console.log(b);// ReferenceError
  

  • {} 단위로 스코프 생성
  • 예측 가능성 높음

  → 현대 JS에서 기본 선택지

호이스팅(Hoisting) 관점 차이

• var

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

  • 선언 + 초기화(undefined)가 동시에 호이스팅됨
  • 선언 전 접근 가능

  → 버그를 숨기기 쉬움

• let / const

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

  • 선언은 호이스팅됨
  • 초기화 전 접근 불가
  • TDZ(Temporal Dead Zone) 존재

  → 안전장치 역할

TDZ (Temporal Dead Zone)

변수가 선언되었지만 초기화되지 않아 접근할 수 없는 구간

{
console.log(a);// ReferenceError
let a =3;
}

TDZ의 목적:

• 선언 전에 사용하는 실수 방지
• 코드 흐름을 명확하게 강제

→ let / const가 var보다 안전한 핵심 이유

재선언 가능 여부

• var — 재선언 가능

    var x =1;
    var x =2;// 문제 없음
  

  • 실수로 변수 덮어쓰기 쉬움

• let / const — 재선언 불가

    let y =1;
    let y =2;// SyntaxError
  

  • 변수 충돌 방지

재할당 가능 여부

• let : 재할당 가능

    let count =1;
    count =2;// 가능
  

• const : 재할당 불가

    constPI =3.14;
    PI =3.15;// TypeError
  

  • 객체의 내부 변경은 가능

      const obj = {a:1 };
      obj.a =2;// 가능
    

  • const는 “값 불변”이 아니라
  • 참조 불변

초기화 강제 여부

• var / let: 선언만 가능
• const: 선언과 동시에 초기화 필수

const a;// SyntaxError

⇒ 의도 없는 빈 상수 방지

전역 객체(window)와의 관계

• var

    var x =1;
    console.log(window.x);// 1
  

  • 전역 var는 window 객체의 프로퍼티

• let / const

    let y =2;
    console.log(window.y);// undefined
  

  • 전역 스코프에 선언돼도 window에 붙지 않음 → 전역 오염 방지

정리

• const: 변하지 않는 값을 선언할 때 사용
• let: 변할 수 있는 값을 선언할 때 사용
• var: 가능한 사용하지 않기

참고자료

• https://velog.io/@dongjun187/javascript-var-let-const-%EC%9D%98-%EC%B0%A8%EC%9D%B4%EC%A0%90
• https://jaygo-dev.tistory.com/1
• https://rondeveloper.tistory.com/40