var, let, const의 차이점

var, let, const는 JavaScript에서 변수를 선언하는 키워드이다.

이 셋은 비슷하게 보이지만 스코프(scope), 재할당 가능 여부, 호이스팅(hoisting) 등의 면에서 중요한 차이점이 있다.

 

📌 스코프 (Scope) – 변수의 “유효 범위”

변수나 함수가 접근 가능한 영역을 의미하는데 즉, 어디서 선언된 변수를 어디까지 쓸 수 있느냐를 결정한다.

종류에는 2가지가 있다.

1. 전역 스코프(Global Scope)
   코드 어디에서나 접근 가능한 변수

let globalVar = 'Hello';

function greet() {
  console.log(globalVar); // 접근 가능
}

 

1) 전역 스코프(Global Scope)
어디에서나 접근 가능

let globalVar = 'Hello';

function greet() {
  console.log(globalVar); // 접근 가능
}

 

 

2) 함수 스코프(Function Scope) – var만 해당
함수 내에서만 유효

function test() {
  var localVar = 123;
}

console.log(localVar); // 오류! 함수 밖에서 접근 불가

3) 블록 스코프(Block Scope) – let, const만 해당

중괄호 {} 내부에서만 접근 가능 (예: if, for, 함수 내부 등)

if (true) {
  let blockVar = 'Hi';
}
console.log(blockVar); // 오류! 블록 밖에서 접근 불가

 

 

 

📌 호이스팅 (Hoisting) – 끌어올리기

JavaScript는 실행 전에 변수 선언과 함수 선언을 "코드의 맨 위로 끌어올리는" 현상이 있는데 이를 호이스팅이라고 한다.

 

변수 선언의 호이스팅

• var는 선언이 호이스팅되고 초기값은 undefined로 설정
• let과 const도 호이스팅되지만, 초기화는 되지 않아서 접근하면 오류

console.log(x); // undefined (에러 아님)
var x = 10;

console.log(y); // ReferenceError: Cannot access 'y' before initialization
let y = 20;

스코프의 시작 지점부터 초기화 시작 지점까지의 구간을 TDZ(Temporal Dead Zone, 일시적 사각지대)라고 부른다. let이나 const는 선언되기 전에는 접근 자체가 막혀 있다.

 

개념	설명
스코프	변수가 접근 가능한 범위를 정함 (전역/함수/블록)
호이스팅	변수/함수 선언이 코드의 최상단으로 끌어올려지는 현상
var	함수 스코프, 호이스팅 됨 (초기값 undefined)
let / const	블록 스코프, 호이스팅은 되지만 TDZ 때문에 선언 전 사용 불가

 

var – 오래된 방식 (ES5 이전)

• 함수 스코프: 블록({})이 아니라 함수 단위로 스코프가 결정
• 재선언 가능: 같은 이름으로 여러 번 선언해도 에러 없음
• 호이스팅: 선언이 끌어올려지지만, 초기화는 안됨. 선언만 위로 올라가고 초기값은 undefined

function testVar() {
  if (true) {
    var x = 10;
  }

  console.log(x); // 10 (블록 외부에서도 접근 가능)
}

 

let – 현대적인 변수 선언 (ES6 이후)

• 블록 스코프: {} 내부에서만 유효
• 재선언 불가
• 재할당 가능: 값을 변경 가능
• 호이스팅: 선언은 끌어올려지지만, "Temporal Dead Zone(TDZ)" 때문에 초기화 전 접근은 에러가 발생

function testLet() {
  if (true) {
    let y = 20;
  }

  console.log(y); // ReferenceError
}

 

const – 상수 선언 (변경 불가 변수)

• 블록 스코프: let과 동일
• 재선언 불가, 재할당도 불가
• 단, 객체/배열의 내부 값은 변경 가능
• 호이스팅과 TDZ 적용

const z = 30;
z = 40; // TypeError: Assignment to constant variable


const arr = [1, 2];
arr.push(3); // 가능. 배열 내부 변경은 허용

 

키워드	스코프	재선언	재할당	호이스팅	TDZ (초기화 전 접근)
var	함수 스코프	가능	가능	O	X
let	블록 스코프	불가	가능	O	O
const	블록 스코프	불가	불가	O	O

 

권장사항은

1. 기본적으로 const 먼저 사용
2. 값이 바뀔 필요가 있을 때에만 let 사용
3. var는 버그의 원인이 되므로 사용 X