[자바스크립트] var,let,const 차이점

var,let,const는 모두 자바스크립트에서 사용하는 변수이지만, 각각 다르게 작동합니다.

 

*호이스팅이란

->

---

1. 중복 선언

• var: 같은 스코프에서 여러 번 변수를 선언해도 오류가 발생하지 않습니다. 예를 들어:
  var x = 1; var x = 2; //중복 선언 허용

  console.log(x); // 2

   
• let: 같은 스코프에서 중복 선언을 허용하지 않습니다. 중복 선언 시 에러가 발생합니다.
   

  let y = 1; //

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

   
• const: let과 동일하게 중복 선언을 허용하지 않습니다.
   

  const z = 1; //

  const z = 2; // SyntaxError: Identifier 'z' has already been declared

---

2. 스코프(Scope)

• var: 함수 스코프를 가집니다. 즉, 변수가 선언된 함수 내부에서만 유효합니다. 블록 스코프(예: if 문, for루프 등) 내에서 선언되어도 해당 블록 외부에서 접근할 수 있습니다.
   

  if (true) {

       var a = 1;

  } console.log(a); // 1 (블록 스코프 무시)

   
• let 및 const: 블록 스코프를 가집니다. 변수가 선언된 블록 내부에서만 유효하며, 블록 외부에서는 접근할 수 없습니다.
   

  if (true) {

      let b = 1;

      const c = 2;

  }

  // console.log(b); // ReferenceError: b is not defined

  // console.log(c); // ReferenceError: c is not defined

---

3. 호이스팅(Hoisting)

• var: 선언이 호이스팅되어 스코프의 최상단으로 이동합니다. 다만, 초기화는 호이스팅되지 않으며 undefined로 초기화됩니다.
   

   

  console.log(d); // undefined (선언은 호이스팅됨)

  var d = 1;

   
• let 및 const: 선언이 호이스팅되지만, **일시적 사각지대(Temporal Dead Zone, TDZ)**에 놓입니다. 선언되기 전에는 변수에 접근할 수 없습니다.
   

  // console.log(e); // ReferenceError: Cannot access 'e' before initialization

  let e = 1;

  // console.log(f); // ReferenceError: Cannot access 'f' before initialization

  const f = 2;