SEO 키워드: JavaScript 변수, let와 const 차이, 자바스크립트 초보

---

# 📌 서론 – “왜 변수 선언이 이렇게 복잡할까?”

프로그래밍을 처음 시작한 사람이라면 “변수는 변수일 뿐인데 왜 이렇게 여러 가지 선언 방법이 필요할까?”라는 궁금증에 빠지기 마련입니다. 특히 JavaScript는 var, let, const 세 가지 키워드가 존재하면서 초보자에게 혼란을 주곤 합니다.

이 글에서는 JavaScript 변수 선언의 역사를 짚어보고, var가 가진 함정, let과 const가 왜 등장했는지, 그리고 let와 const 차이를 실제 코드 예시와 함께 쉽게 설명합니다. 초보자도 바로 적용할 수 있는 실전 팁을 제공하니, 끝까지 읽고 여러분의 코드 품질을 한 단계 끌어올려 보세요!

👉 원문 참고: The Secret Life of JavaScript: Let, Const, and Why Variables Are Complicated

---

# 📚 본론

# 1️⃣ JavaScript 변수 선언의 탄생 – var의 등장

1995년 넷스케이프에서 탄생한 JavaScript는 당시 웹 페이지를 동적으로 바꾸기 위한 간단한 스크립트 언어였습니다. 초기 버전에서는 var 하나만이 변수 선언 키워드였죠.

js

var message = 'Hello, world!';

var는 함수 스코프(function scope) 를 갖습니다. 즉, 변수가 선언된 함수 전체에서 접근 가능하고, 블록(if, for 등) 내부에서 선언해도 블록 밖으로 “누수(leak)”됩니다.

js

function test() {

  if (true) {

    var leaked = 'I escape!';

  }

  console.log(leaked); // 'I escape!' 출력

}
test();

이러한 특성은 예상치 못한 버그를 만들기 쉽습니다. 특히 대형 프로젝트에서 변수 이름이 겹치면 의도치 않은 값이 덮어써지는 상황이 빈번히 발생했습니다.

---

# 2️⃣ var가 가진 대표적인 함정 3가지

| # | 함정 | 설명 | 예시 |

|---|------|------|------|

| 1 | 호이스팅(Hoisting) | 선언부가 코드 최상단으로 끌어올려져, 선언 전에 접근이 가능해 보인다. | console.log(x); var x = 10; // undefined |

| 2 | 함수 스코프 | 블록 레벨이 아닌 함수 레벨이라 블록 내부 변수도 외부에 노출. | 위의 leaked 예시 |

| 3 | 재선언 허용 | 같은 스코프 안에서 같은 변수명을 재선언해도 오류가 나지 않는다. | var a = 1; var a = 2; // a = 2 |

이러한 문제점 때문에 ES6(ECMAScript 2015)에서는 let과 const 라는 새로운 선언 키워드가 도입되었습니다.

---

# 3️⃣ let과 const – 현대 JavaScript의 핵심

# 3-1️⃣ 블록 스코프(Block Scope)

let과 const는 블록 레벨 스코프를 가집니다. 즉, {} 로 감싼 영역 안에서만 유효합니다.

js

{
  let blockVar = '블록 안';

  const blockConst = '변경 불가';

}
console.log(blockVar);   // ReferenceError

console.log(blockConst); // ReferenceError

# 3-2️⃣ 호이스팅은 여전하지만 “TDZ(Temporal Dead Zone)” 존재

let·const도 선언부가 호이스팅되지만, TDZ 라는 구역이 있어 선언 전 접근 시 ReferenceError가 발생합니다.

js

console.log(a); // ReferenceError

let a = 5;

# 3-3️⃣ 재선언 금지, 재할당 차이

• let : 같은 스코프 내 재선언 불가, 재할당 가능.

• const : 재선언·재할당 모두 불가 (단, 객체·배열은 내부 값 수정 가능).

js

let mutable = 1;

mutable = 2; // OK

const immutable = 10;

immutable = 20; // TypeError

const obj = { x: 1 };

obj.x = 2; // OK (객체 자체는 변하지 않음)

---

# 4️⃣ 언제 let을 쓰고 언제 const를 써야 할까?

# ✅ 기본 원칙 – 가능하면 const부터 선언

1. 값이 절대 변하지 않을 경우 → const

   • API 엔드포인트, 설정값, 고정 문자열 등

2. 값이 변할 가능성이 있을 때 → let

   • 루프 인덱스, 사용자 입력값, 상태값 등

Tip: const를 기본으로 선언하고, 나중에 “재할당이 필요해졌다”는 판단이 들면 let으로 바꾸는 것이 좋은 습관입니다.

# 📌 실전 예시 – 반복문에서의 선택

js

// ❌ var 사용 (버그 위험)

for (var i = 0; i < 5; i++) {

  setTimeout(() => console.log(i), 100); // 5 5 5 5 5

}

// ✅ let 사용 (블록 스코프)

for (let i = 0; i < 5; i++) {

  setTimeout(() => console.log(i), 100); // 0 1 2 3 4

}

# 📌 객체와 배열은 언제 const?

js

const colors = ['red', 'green'];

colors.push('blue'); // OK – 배열 자체는 변하지 않음

colors = [];         // TypeError

위와 같이 값 자체가 변하지 않는 경우라면 const를 유지하고, 참조 자체를 바꿀 경우에만 let을 사용합니다.

---

# 5️⃣ 초보자를 위한 실전 팁 5가지

| 번호 | 팁 | 설명 |

|------|----|------|

| 1 | 코드 리뷰 시 var 금지 | 팀 규칙에 var 사용을 금지하고 let/const만 사용하도록 설정합니다. |

| 2 | ESLint prefer-const 규칙 활용 | 자동으로 재할당되지 않는 변수를 const로 바꿔줍니다. |

| 3 | TDZ를 이해하고 디버깅 | ReferenceError가 뜨면 선언 순서를 다시 확인하세요. |

| 4 | 불변 객체(Immutable) 만들기 | Object.freeze() 로 객체를 완전 불변으로 만들면 버그 예방에 효과적입니다. |

| 5 | 타입스크립트와 함께 사용 | 타입스크립트는 변수 선언 시 타입까지 강제하므로 let/const 활용이 더욱 명확해집니다. |

---

# 🏁 결론 – 지금 바로 코드에 적용해 보세요!

var가 남아 있는 레거시 코드가 아직도 많지만, let과 const 를 올바르게 사용하면 예측 가능한 스코프, 안전한 재할당 정책, 그리고 읽기 쉬운 코드를 만들 수 있습니다.

1. 기존 프로젝트에 var가 있다면 단계적으로 let·const 로 교체해 보세요.

2. 새 파일을 만들 때는 무조건 const 로 시작하고, 필요하면 let 으로 바꾸는 습관을 길러 보세요.

3. ESLint와 Prettier 같은 도구를 설정해 자동으로 코딩 스타일을 관리하면 자바스크립트 초보도 깔끔한 코드를 유지할 수 있습니다.

행동 유도: 오늘 당장 프로젝트의 첫 번째 var 변수를 찾아 let 혹은 const 로 바꿔 보세요. 작은 변화가 큰 품질 향상으로 이어집니다!

---

# 📚 참고 자료

• MDN – let

• MDN – const

• ESLint – prefer-const 규칙

---

이 글은 JavaScript 변수와 let와 const 차이에 초점을 맞춘 자바스크립트 초보를 위한 입문 가이드입니다. 앞으로도 최신 웹 개발 트렌드와 실전 팁을 다루는 포스트를 기대해 주세요!