JS 단원 01: var, let, const 차이와 도입 배경

1. var의 한계와 문제점

var는 ES5까지 유일한 변수 선언 방식이었지만 몇 가지 중요한 문제점이 있습니다.

1-1. 함수 스코프만 존재 (블록 스코프 X)

if (true) {
  var a = 1;
}
console.log(a); // 1 (의도한 범위 밖에서도 접근됨)

1-2. 호이스팅 (선언이 끌어올려짐)

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

자바스크립트는 위 코드를 내부적으로 이렇게 해석합니다:

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

→ 선언은 끌어올려지지만, 할당은 호이스팅되지 않음

2. ES6에서 let과 const의 등장

2-1. 블록 스코프 지원

if (true) {
  let a = 1;
}
console.log(a); // ReferenceError

2-2. 재선언 불가

let x = 10;
let x = 20; // SyntaxError

(var는 재선언 가능)

2-3. TDZ(Temporal Dead Zone)

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

변수가 선언되기 전에는 접근 자체가 불가능한 안전장치.

3. const의 특징

• 상수 선언 (단, 객체의 속성은 변경 가능)
• 선언과 동시에 초기화 필요
• 값 변경 시 오류

const PI = 3.14;
PI = 3.15; // TypeError

const user = { name: "Tom" };
user.name = "Jane"; // 가능 (참조는 동일하므로)

4. 실제 사용 기준

5. 브라우저 지원 이슈

• IE11에서는 let, const 미지원 (ES6 미구현)
• Babel이나 TypeScript로 트랜스파일링 필요
• 대부분의 모던 브라우저에서는 100% 지원됨

npx babel script.js --out-file compiled.js

6. 실전 예제 비교

var 사용 시 문제

function testVar() {
  for (var i = 0; i < 3; i++) {
    setTimeout(() => console.log(i), 100);
  }
}
testVar(); // 3, 3, 3

let으로 해결

function testLet() {
  for (let i = 0; i < 3; i++) {
    setTimeout(() => console.log(i), 100);
  }
}
testLet(); // 0, 1, 2

const로 객체 선언

const config = {
  port: 3000,
  debug: true
};

config.port = 8080; // 가능
config = {}; // 오류

요약 정리

• var: 함수 스코프, 호이스팅 문제, 재선언 허용
• let: 블록 스코프, TDZ로 안전성 증가
• const: 불변 참조값, 객체는 속성만 변경 가능
• 모던 자바스크립트에서는 let, const를 기준으로 코드 작성

심화학습

Q1. const로 선언한 객체에서 내부 값을 바꾸는 게 허용되는 이유는?
A1. const는 "참조 주소가 불변"일 뿐, 참조된 객체 내용은 변할 수 있기 때문입니다.

Q2. 호이스팅으로 인한 의도치 않은 버그를 방지하려면 어떤 규칙을 따라야 하나요?
A2. 모든 변수는 사용 전에 선언하고, var 대신 let/const를 사용해야 합니다.

Q3. let과 const 중 어떤 것을 기본으로 사용해야 할까?
A3. 기본적으로 const를 사용하고, 값이 변하는 경우만 let을 쓰는 것이 불변성을 유지하는 좋은 습관입니다.