Mingyu Kim

var, let, const

var, let, const는 변수의 스코프(Scope), 호이스팅(Hoisting), 재선언/재할당 가능성에 따라 주요한 차이가 있다.

var

ES6(ECMAScript 2015) 이전에 사용되던 변수 선언 방식

스코프 (Scope): 함수 스코프(Function Scope)를 가진다. 즉, 변수가 선언된 함수 내에서만 유효하며, 블록({}) 내부에서 선언해도 함수 전체에서 접근 가능하다.
호이스팅 (Hoisting): 변수 선언이 스코프의 최상단으로 끌어 올려지며(호이스팅), 초기값은 undefined다. 따라서 선언 전에 변수에 접근해도 오류가 나지 않는다.
재선언/재할당: 재선언 및 재할당 모두 가능한데, 이는 예기치 않은 버그를 유발할 수 있다.

특징	설명
스코프	함수 스코프
호이스팅	O (초기값 `undefined`)
재선언	가능
재할당	가능

function exampleVar() {
  if (true) {
    var x = 10;
  }
  // if 블록 밖에서도 접근 가능 (함수 스코프)
  console.log(x); // 10

  var x = 20; // 재선언 가능
}

let

ES6에서 도입되었으며, 유연하게 값이 변경될 수 있는 변수를 선언할 때 사용

스코프 (Scope): 블록 스코프(Block Scope)를 가진다. 변수가 선언된 블록({}), for 루프, if 문 내에서만 유효하다.
호이스팅 (Hoisting): O (TDZ 적용): 호이스팅되지만, 초기화 전 접근 시 에러가 발생한다 (일시적 사각지대, Temporal Dead Zone).
재선언/재할당: 재선언은 불가능하지만, 재할당은 가능하다.

특징	설명
스코프	블록 스코프
호이스팅	O (TDZ 적용)
재선언	불가능
재할당	가능

function exampleLet() {
  let y = 5;
  if (true) {
    let y = 10;
    console.log(y); // 10 (블록 내부)
  }
  // 블록 밖에서는 접근 불가능 (블록 스코프)
  // console.log(y); // 5 (바깥 스코프의 y)

  // let y = 20; // 에러 발생 (재선언 불가능)
  y = 30; // 재할당 가능
}

const

ES6에서 도입되었으며, 한 번 선언하면 값이 변하지 않는 상수(Constant)를 선언할 때 사용

스코프 (Scope): let과 마찬가지로 블록 스코프(Block Scope)를 가진다.
호이스팅 (Hoisting): O (TDZ 적용): let과 동일하게 초기화 전 접근 시 에러 발생.
재선언/재할당: 재선언 및 재할당 모두 불가능하다. 선언 시 반드시 초기값을 할당해야 한다.

💡 참고: 객체와 배열의 경우 const는 변수 자체의 재할당을 막지만, 객체나 배열의 내부 속성(값)을 변경하는 것(뮤테이션)은 허용된다.

특징	설명
스코프	블록 스코프
호이스팅	O (TDZ 적용)
재선언	불가능
재할당	불가능
초기값	필수

const PI = 3.14159;
// PI = 3.14; // 에러: 재할당 불가능

const config = { isEnabled: true };
config.isEnabled = false; // 객체 내부 속성 변경은 가능
// config = { isEnabled: false }; // 에러: 변수 자체 재할당 불가능

종합 비교

특징	`var`	`let`	`const`
스코프	함수 스코프	블록 스코프	블록 스코프
호이스팅	O (초기값 `undefined`)	O (TDZ 적용)	O (TDZ 적용)
재할당	가능	가능	불가능
재선언	가능	불가능	불가능
초기값 필수	선택적	선택적	필수

권장 사항

var 사용을 지양하고 다음 규칙을 따르도록 하자.

기본적으로 const를 사용 (대부분의 변수는 변하지 않는 값으로 선언하는 것이 안전)
값이 변경되어야 하는 경우에만 let을 사용 (예: 반복문 카운터, 조건부 값 할당)