[JavaScript] var, let, const

1. 구분

구분	var	let	const
변수 재선언	가능	불가능	불가
값 재할당	가능	가능	불가능
스코프	함수 스코프	블록 스코프	블록 스코프
호이스팅	호이스팅 발생(초기화는 undefined)	호이스팅 발생(TDZ로 초기화 전에 접근시 에러)	호이스팅 발생(TDZ로 초기화 전에 접근시 에러)
초기값 설정	초기값 설정 없이 선언 가능	초기값 설정 없이 선언 가능	선언과 동시에 초기값 설정 필요
특징	과거 자바스크립트에서 사용하던 방식	새로운 변수 선언 방식	새로운 상수 선언 방식

 

---

2. 주요 차이점 설명

변수 재선언

• 재선언은 이미 선언된 변수를 동일한 이름으로 다시 선언하는 것을 의미한다.
• var는 동일한 이름으로 여러 번 선언이 가능하다.
• let과 const는 동일한 이름으로 재선언이 불가능하다.

var y = 10;
var y = 20; // y를 다시 선언 (재선언)

값 재할당

• 재할당은 이미 선언된 변수에 새로운 값을 할당하는 것을 의미한다.
• var와 let은 값을 재할당할 수 있다.
• const는 선언과 동시에 초기값을 설정해야 하며, 이후 값을 재할당할 수 없다.

let x = 10;
x = 20; // x에 새로운 값 20을 할당 (재할당)

스코프

• 스코프(scope)는 변수, 함수, 객체 등이 접근할 수 있는 범위를 정의하는 개념이다.
• var는 함수 스코프를 가진다. 즉, 함수 내에서 선언된 변수는 함수 내부에서만 접근이 가능하다.

function myFunction() {
  var localVar = "나는 이 함수에 국한되어 있어요";
  console.log(localVar); // 함수 내부에서 localVar를 출력한다. 결과: "나는 이 함수에 국한되어 있어요"
}

myFunction();

console.log(localVar); // 함수 외부에서 localVar에 접근하려고 하면 에러가 발생한다. 결과: ReferenceError: localVar is not defined

• let과 const는 블록 스코프를 가진다. 즉, 중괄호 {} 내에서 선언된 변수는 해당 블록 내에서만 접근이 가능하다.

{
  // blockScopedVar 변수를 블록 내부에서 선언한다.
  let blockScopedVar = "나는 이 블록에 국한되어 있어요";
  
  // 블록 내부에서 blockScopedVar를 출력한다.
  console.log(blockScopedVar); // 결과: "나는 이 블록에 국한되어 있어요"
}

// 블록 외부에서 blockScopedVar에 접근하려고 하면 에러가 발생한다.
console.log(blockScopedVar); // ReferenceError: blockScopedVar is not defined

호이스팅(Hoisting)

• var는 변수 선언이 호이스팅되어 선언된 변수는 초기화되지 않은 상태로 위로 끌어올려진다. 초기값은 undefined이다.
• let과 const도 호이스팅되지만, 초기화 전에는 접근할 수 없고 접근 시 에러가 발생한다. 이를 일시적 사각지대(TDZ, Temporal Dead Zone)라고 한다.

초기값 설정

• var와 let은 초기값 설정 없이 선언할 수 있다.
• const는 선언과 동시에 초기값을 설정해야 한다.