자바스크립트 기초) var, let, const 차이와 호이스팅 완벽 정리

자바스크립트에서 변수 선언은 var, let, const이 있다

실제 동작 레벨에서 보면 호이스팅 타이밍, 초기화 방식, 스코프 결정 구조에서 차이가 크며

프론트엔드 면접 질문으로도 많이 물어보는 것 같아 정리하게 되었다

---

1.호이스팅(Hoisting)

자바스크립트에서 코드는 실행되기 전에 변수 선언과 함수 선언이 먼저 메모리에 등록된다. 이 과정을 호이스팅이라고 부른다.
즉, 변수 선언이 작성 위치와 상관없이 스코프의 최상단으로 끌어올려진 것처럼 동작한다.

• var → 선언과 동시에 초기값(undefined)까지 호이스팅
• let, const → 선언만 호이스팅, 초기화는 실행 시점에서 이루어짐

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

console.log(b); // ReferenceError (TDZ)
let b = 20;

console.log(c); // ReferenceError (TDZ)
const c = 30;

실행 흐름

1. 실행 전, 엔진이 변수 a, b, c를 스코프에 등록
2. var a는 초기값까지 undefined로 세팅 → 선언문 이전 접근 가능
3. let과 const는 초기화되지 않아 TDZ 구간에서 접근 시 ReferenceError 발생

---

2.TDZ(Temporal Dead Zone)

TDZ는 변수가 선언은 되었지만 초기화되기 전까지 접근할 수 없는 구간이다.
let과 const에만 해당하며, 의도치 않은 참조를 방지하는 안전장치다.

{
  console.log(x); // ReferenceError
  let x = 5;      // TDZ 종료
  console.log(x); // 5
}

실행 흐름

• 블록이 시작되면 x가 메모리에 등록되지만 초기화되지 않음
• 초기화 전에 접근하면 ReferenceError
• let x = 5; 실행 시 TDZ 종료, 이후 값 접근 가능

---

3.스코프(Scope) 차이

• var → 함수 스코프(Function Scope)
  블록({}) 내부 선언이라도 바깥에서 접근 가능
• let / const → 블록 스코프(Block Scope)
  선언된 블록 내부에서만 접근 가능

if (true) {
  var v = 1;
  let l = 2;
  const c = 3;
}

console.log(v); // 1
console.log(l); // ReferenceError
console.log(c); // ReferenceError

실행 흐름

• v는 함수 스코프라서 블록을 벗어나도 접근 가능
• l과 c는 블록 스코프라서 블록 밖에서 접근 불가

---

4.중복 선언과 재할당

var a = 1;
var a = 2; // 가능

let b = 1;
let b = 2; // SyntaxError

const d = 1;
d = 2; // TypeError

실행 흐름

• var는 같은 스코프에서 중복 선언 가능, 마지막 선언이 덮어씀
• let/const는 중복 선언 불가 → SyntaxError
• let은 재할당 가능, const는 재할당 불가 → TypeError

---

5.const의 불변성 오해

const는 변수의 값이 불변한 것이 아니라, 참조가 고정된다.
참조하는 객체 내부 속성은 변경 가능하지만, 다른 객체로 참조 변경은 불가능하다.

const obj = { name: "Lee" };
obj.name = "Kim"; // 가능
obj = { name: "Park" }; // 불가능 (참조 변경 시도)

---

정리 및 추천 사용법

• 기본은 const 사용
• 값 변경이 필요할 때만 let
• var는 레거시 코드 유지보수 외 사용 지양
• 호이스팅과 TDZ 이해를 통해 안정적인 변수 사용 가능