frontend/javascript

🟨 1-2. var, let, const 완벽 비교 — 변수 선언의 모든 것

mirabo01 2025. 11. 5. 21:08

프로그래밍에서 변수(variable) 는 데이터를 저장하는 상자다.
하지만 자바스크립트에서는 변수 선언 방식이 세 가지나 있다.
👉 var, let, const

단순히 “새로운 문법이니까 let, const 쓰면 된다” 수준이 아니다.
이 세 가지는 스코프(Scope) 와 호이스팅(Hoisting),
그리고 값 변경 가능성까지 다르게 작동한다.

이번 편에서는 그 차이를 한눈에, 완벽히 정리해보자.

💡 1. 변수란 무엇인가?

“변수는 데이터를 저장하기 위한 이름 있는 공간이다.”

let name = "기범"; 
let age = 25;

name, age는 각각 “변수 이름(식별자)”이고,
"기범", 25는 그 안에 담긴 값(Value) 이다.

📦 2. var, let, const의 기본 차이 요약

구분 var let const

재선언 ✅ 가능 ❌ 불가능 ❌ 불가능
재할당 ✅ 가능 ✅ 가능 ❌ 불가능
스코프 함수 스코프 블록 스코프 블록 스코프
호이스팅 선언 & 초기화됨(값은 undefined) 선언만 호이스팅 선언만 호이스팅
사용 시기 ES5 이전 ES6 이후 ES6 이후

🔍 3. var의 문제점

🧩 1) 함수 스코프(function scope)

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

✅ var는 블록({})을 무시하고, 함수 단위로만 영역을 구분한다.
그래서 의도치 않게 변수 값이 덮어씌워질 수 있다.

🧩 2) 호이스팅 문제

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

var로 선언된 변수는 선언이 코드의 맨 위로 끌어올려진다.
(= “호이스팅”)

자바스크립트는 내부적으로 다음과 같이 처리한다 👇

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

그래서 ReferenceError는 나지 않지만, undefined가 출력된다.
이게 의도치 않은 버그를 자주 만든다.

🧱 4. let — 블록 스코프 + 안전한 변수 선언

let count = 1; 
if (true) { 
  let count = 2; 
  console.log(count); // 2 
} 
console.log(count); // 1

✅ let은 {} 블록 내부에서만 유효하다.
✅ 서로 다른 블록에서 동일한 이름을 써도 충돌하지 않는다.

⚠️ 호이스팅은 여전히 존재하지만 “일시적 사각지대(TDZ)”로 보호된다

console.log(num); // ReferenceError 
let num = 10;

선언은 호이스팅되지만,
값이 초기화되기 전까지는 접근할 수 없는 Temporal Dead Zone (TDZ) 상태에 놓인다.

이 덕분에 “선언 전에 접근하는 실수” 를 방지할 수 있다.

🔒 5. const — 상수(Constant) 선언용

const PI = 3.14; 
PI = 3.14159; // ❌ TypeError

✅ const는 재할당이 불가능하다.
✅ 단, 객체나 배열의 내부 값은 변경 가능하다.

const user = { name: "기범", age: 25 }; 
user.age = 26; // ✅ 가능

💡 const는 “주소 값”이 고정된다는 뜻이다.
객체 내부의 프로퍼티는 주소를 유지한 채 변경 가능하다.

⚙️ 6. 스코프 차이 한눈에 보기

function example() { 
  var a = 1; 
  let b = 2; 
  const c = 3; 
 
  if (true) { 
    var a = 10; // 같은 함수 내에서 재선언됨 
    let b = 20; // 새로운 블록 스코프 
    const c = 30; // 새로운 블록 스코프 
    console.log(a, b, c); // 10, 20, 30 
  } 
 
  console.log(a, b, c); // 10, 2, 3 
} 
example();

✅ var는 함수 전체에 영향을 끼침
✅ let, const는 블록 안에서만 작동

🧠 7. 실무에서의 변수 선언 기준

상황 권장 키워드 이유

변하지 않는 값 const 불변성 보장, 예측 가능한 코드
변할 가능성이 있는 값 let 안전한 블록 스코프
오래된 코드 호환 var ✅ 단, 새 코드에서는 비추천

💬 요약하자면:

“기본은 const, 필요할 때만 let, var는 버리자.”

🧩 8. 실전 예제

const MAX_COUNT = 5; 
let current = 0; 
 
while (current < MAX_COUNT) { 
  console.log(`현재 값: ${current}`); 
  current++; 
} 
 
console.log("끝!");

✅ 상수(MAX_COUNT)는 변하지 않고,
✅ 반복문 내의 변수(current)만 변경된다.

→ 코드의 의도와 안정성이 명확하게 구분된다.

🏁 9. 마무리 — “let과 const는 안정성과 의도를 담은 선언문이다”

과거에는 var 하나로 모든 변수를 선언했지만,
ES6 이후 자바스크립트는 “의도를 명확히 하는 언어”로 발전했다.

💬 “var는 과거의 유산, let과 const는 현재의 기준이다.”

다음 편에서는
✅ 1-3. 자료형 완전 정리 — String, Number, Boolean, Null, Undefined, Symbol
을 통해 자바스크립트의 데이터 구조를 본격적으로 파헤쳐보자.