변수 선언 방식과 var, let, const 의 차이를 알아보자

변수 선언

자바스크립트에서는 var, let, const 로 변수를 선언할 수 있습니다.

var score;
score = 80;

자바스크립트는 변수 선언을 두 단계로 처리합니다:

1. 선언 단계: 변수 이름을 등록하고, 메모리에 공간을 준비합니다.
2. 초기화 단계: 값을 넣기 전에 임시로 undefined를 자동으로 넣어둡니다.

❗ 초기화를 해두는 이유는, 전에 쓰던 쓰레기 값이 남아있지 않게 하기 위해서 입니다.

 

var / let / const 비교 표

항목	var	let	const
스코프	함수 스코프	블록 스코프	블록 스코프
재선언 가능 여부	가능	불가능 (같은 스코프 내에서)	불가능 (같은 스코프 내에서)
재할당 가능 여부	가능	가능	불가능
호이스팅 여부	O (초기화 없이 undefined로 됨)	O (하지만 TDZ로 인해 오류 발생)	O (하지만 TDZ로 인해 오류 발생)
초기화 필수 여부	선택	선택	필수
사용 추천 여부	추천하지 않음	일반적인 변수 선언에 사용	값 변경이 없을 경우 사용

 

스코프

var는 함수 스코프를 가지는 반면, let과 const는 블록 스코프를 가집니다.

function scopeTest() {
  if (true) {
    var x = 1;
    let y = 2;
    const z = 3;
  }

  console.log(x); // 1
  console.log(y); // ReferenceError
  console.log(z); // ReferenceError
}

• var로 선언된 x는 함수 전체에서 접근 가능
• let, const로 선언된 y, z는 블록을 벗어나면 접근 불가 

 

재선언과 재할당

var a = 1;
var a = 2; // OK

let b = 1;
// let b = 2; // SyntaxError: Identifier 'b' has already been declared

const c = 1;
// c = 2; // TypeError: Assignment to constant variable.

• var: 재선언, 재할당 모두 가능 (하지만 의도치 않은 버그 유발 가능성 있다.)
• let: 재선언 불가, 재할당은 가능
• const: 재선언, 재할당 모두 불가

Q. const는 정말 상수일까?

const arr = [1, 2, 3];
arr.push(4); // OK
arr = [5, 6]; // TypeError

const는 변수 자체의 재할당을 금지하는 것이지, 값의 내부 불변성까지 보장하지는 않습니다.

객체나 배열의 경우 내용 수정은 가능하지만, 다른 객체로의 재할당은 불가능합니다.

 

호이스팅과 TDZ

호이스팅이란? 자바스크립트가 코드를 실행하기 전에, 변수나 함수 선언을 먼저 메모리에 올려두는 동작을 말합니다.

쉽게 말해, 코드보다 위에 있는 것처럼 작동하게 만든다는 의미입니다.

✅ 변수 선언은 코드 실행 전에 먼저 일어나고,

✅ 값 넣는 건 실행할 때 일어나요 (런타임)

console.log(score); // undefined
var score = 80;

// 이 코드는 실제로는 이렇게 해석된다.

var score;          // 변수 선언 먼저
console.log(score); // undefined
score = 80;         // 값 할당

이 코드가 실행되는 순서는 다음과 같아요.

 

1. var score;

• 자바스크립트는 score라는 이름을 미리 메모리에 등록
• 값이 없으니까, 임시로 undefined를 넣어 둠.

2. score = 80; 

• 이제 undefined 대신 진짜 값인 80을 그 자리에 넣음.
• 메모리 공간은 새로 만들지 않고, 같은 자리에 값만 바꿔 넣는 것!

모두 호이스팅이 일어나지만, let과 const는 초기화가 되지 않기 때문에 그 전에 접근하면 에러가 납니다.

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

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

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

• var는 호이스팅되어 초기값 undefined로 존재
• let, const도 호이스팅은 되지만, 선언 전 접근 시 TDZ(Temporal Dead Zone) 때문에 오류 발생

ℹ️TDZ란?
변수가 선언되었지만 초기화되기 전까지는 접근할 수 없는 기간입니다.
ES6부터 도입된 개념으로, 런타임 오류를 방지하는 데 중요한 역할을 합니다.

 

정리 및 권장 사용 방식

• 항상 const를 우선 사용: 값이 바뀌지 않는다면 const로 선언하세요.
• 값이 변해야 한다면 let 사용: 루프 카운터 등은 let으로 선언.
• var는 사용 지양: 예기치 못한 스코프 문제와 호이스팅으로 인한 버그 가능성 때문에 가급적 사용하지 않습니다.