var, let, const의 차이

1. var

특징

• 스코프: 함수 스코프(Function Scope). var로 선언된 변수는 블록 스코프가 아닌 함수 스코프를 가지며, 함수 내에서만 유효합니다. 함수 밖에서 선언된 var 변수는 전역 스코프(Global Scope)를 가집니다.

• 호이스팅: 변수 선언이 호이스팅됩니다. 즉, 선언은 코드의 상단으로 끌어올려지지만, 할당은 원래 위치에서 수행됩니다.

• 재선언: 같은 스코프 내에서 여러 번 선언할 수 있습니다.

예제

function exampleVar() {
  console.log(x); // undefined (호이스팅으로 인해 선언이 끌어올려짐)
  var x = 10;
  console.log(x); // 10
}

exampleVar();

2. let

특징

• 스코프: 블록 스코프(Block Scope). let으로 선언된 변수는 해당 블록 {} 내에서만 유효합니다.

• 호이스팅: 변수 선언이 호이스팅되지만, 선언된 변수를 사용할 수 있는 것은 변수 선언문이 실행된 후부터입니다. 즉, 변수를 사용할 수 없는 "일시적 사각지대(Temporal Dead Zone)"가 존재합니다.

• 재선언: 같은 블록 내에서 같은 이름으로 변수 재선언이 불가능합니다.

예제

function exampleLet() {
  console.log(x); // ReferenceError: x is not defined (일시적 사각지대)
  let x = 10;
  console.log(x); // 10
}

exampleLet();

3. const

특징

• 스코프: 블록 스코프(Block Scope). const로 선언된 변수는 해당 블록 {} 내에서만 유효합니다.

• 호이스팅: let과 마찬가지로 호이스팅되지만, 일시적 사각지대가 존재합니다.

• 재선언: 같은 블록 내에서 같은 이름으로 변수 재선언이 불가능합니다.

• 재할당: 변수 선언 후 값의 재할당이 불가능합니다. 하지만, 객체나 배열의 경우, 객체의 속성이나 배열의 요소는 변경할 수 있습니다.

예제

function exampleConst() {
  const y = 20;
  console.log(y); // 20

  // y = 30; // TypeError: Assignment to constant variable.

  const arr = [1, 2, 3];
  arr.push(4); // 배열 요소 추가는 가능
  console.log(arr); // [1, 2, 3, 4]
}

exampleConst();

요약

• var
• 스코프: 함수 스코프
• 호이스팅: 선언이 호이스팅됨, 값은 원래 위치에서 할당됨
• 재선언: 가능

• let
• 스코프: 블록 스코프
• 호이스팅: 선언이 호이스팅되지만, 일시적 사각지대가 있음
• 재선언: 같은 블록 내에서 불가능

• const
• 스코프: 블록 스코프
• 호이스팅: 선언이 호이스팅되지만, 일시적 사각지대가 있음
• 재선언: 같은 블록 내에서 불가능
• 재할당: 불가능 (객체 및 배열의 경우 내부 값 수정은 가능)