[JS] var, let, const의 차이

🗣️ 변수를 선언할 때 쓰는 var, let, const의 차이에 대해 알려주세요.

• 의도: 자바스크립트 기본 지식, 스코프에 대한 이해도, 추가로 호이스팅에 대한 지식을 가지고 있는지 확인하는 질문

• 나의 답안

• 주어진 답안 (모범 답안)

  var의 경우에는 함수 스코프를 가지며, 초기화 전에 접근하면 호이스팅 덕분에 undefined를 반환합니다.

  ES6에서 추가된 const와 let의 경우에는 블록 스코프를 가지며 호이스팅은 일어나지만 초기화 전에 접근 시 오류가 발생합니다.

  const와 let은 초기화 이후 재할당이 가능하냐의 의미에서 다시 갈라집니다.
  const는 상수라는 뜻의 constant의 약자로 초기화 이후 재할당이 불가능합니다.
  따라서 코드의 예측 가능성을 높여주는 장점이 있다고 할 수 있습니다.

  현재에는 블록 스코프를 가졌다는 점과 유지 보수가 용이하다는 점 때문에 **const와 let만을 사용**하는 편입니다.

---

📝 개념 정리

JavaScript에서 var, let, const는 변수를 선언할 때 사용하는 키워드이며, 이들 사이에는 스코프(scope), 재할당 가능 여부, 호이스팅(hoisting) 등의 차이점이 있다.

🌟 var의 특징

1. 재선언 가능
   동일한 변수명을 여러 번 사용할 수 있다.

   var x = 1;
    var x = 2; // 문제 없이 동작

2. 재할당 가능
   변수의 값을 자유롭게 변경할 수 있다.

   var x = 1;
    x = 2; // 문제없이 값 변경 가능

3. 스코프
   var는 함수 스코프를 따른다.
   즉, 함수 내에서 선언된 변수는 함수 외부에서 접근할 수 없지만, 블록(if, for 등) 내에서 선언된 변수는 블록 밖에서도 접근 가능하다.

   function test() {
     var x = 1;
     if (true) {
       var y = 2;
     }
     console.log(y); // 2
   }
   
   test();

   • 여기서 변수 y는 블록 내에서 선언되었지만, 함수 스코프 덕분에 블록 외부에서도 접근할 수 있다.

4. 호이스팅(Hoisting)
   var로 선언된 변수는 호이스팅된다.
   즉, 변수 선언이 코드 실행 전에 해당 스코프의 최상위로 끌어올려진다.

   console.log(x); // undefined
    var x = 1;

   • 여기서 변수 x는 선언은 호이스팅되지만, 초기화는 호이스팅되지 않으므로 undefined가 출력된다.

---

🌟 let의 특징

1. 재선언 불가
   동일한 변수명을 다시 선언할 수 없다.

   let x = 1;
    let x = 2; // 🚨 오류 발생

2. 재할당 가능
   let으로 선언된 변수는 값을 변경할 수 있다.

   let x = 1;
    x = 2; // 문제없이 값 변경 가능

3. 스코프
   let은 블록 스코프를 따른다.
   즉, 변수는 {} 블록 내에서만 유효하며, 블록 외부에서는 접근할 수 없다.

   function test() {
     let x = 1;
     if (true) {
       let y = 2;
     }
     console.log(y); // 🚨 오류 발생 (블록 외부에서 접근 불가)
   }
   
   test();

4. 호이스팅(Hoisting)
   let도 호이스팅되지만, var와 달리 초기화 전에 접근할 수 없다.
   이것을 일시적 사각지대(TDZ, Temporal Dead Zone)라고 한다.

   console.log(x); // 🚨 오류 발생 (ReferenceError)
    let x = 1;

   • 변수 선언은 호이스팅되지만, 초기화 전에 접근하려고 하면 오류가 발생한다.

---

🌟 const의 특징

1. 재선언 불가
   const로 선언된 변수는 다시 선언할 수 없다.

   const x = 1;
    const x = <2; // 🚨 오류 발생

2. 재할당 불가
   const는 값을 재할당할 수 없다.
   상수처럼 한 번 설정한 값은 변경할 수 없다.

   const x = 1;
    x = 2; // 🚨 오류 발생 (재할당 불가)

   하지만, 객체나 배열을 선언한 경우 객체 내부의 값은 변경할 수 있다. 단, 객체 자체를 다시 할당할 수는 없다.

   const obj = { key: 1 };
    obj.key = 2; // 가능 (객체의 프로퍼티 값 변경)
    obj = { key: 3 }; // 🚨 오류 발생 (객체 자체를 재할당할 수 없음)

3. 스코프
   const도 블록 스코프를 따른다.
   let과 마찬가지로 변수는 {} 블록 내에서만 유효하며, 블록 밖에서는 접근할 수 없다.

4. 호이스팅(Hoisting)
   const도 호이스팅되지만, 초기화 전에 접근할 수 없으며 일시적 사각지대(TDZ)가 적용된다.

   console.log(x); // 🚨 오류 발생 (ReferenceError)
    const x = 3;

---

🌟 호이스팅(Hoisting)

호이스팅은 JavaScript에서 변수 선언이 해당 스코프의 최상단으로 끌어올려지는 현상을 말한다.
하지만, 호이스팅은 변수의 선언만 끌어올려지며 초기화는 끌어올려지지 않는다.

• var의 호이스팅

  • var로 선언된 변수는 선언과 초기화가 분리되며, 선언만 최상단으로 끌어올려진다.

    console.log(x); // undefined
     var x = 1;

  • 위 코드는 실제로 다음과 같이 동작한다.

    var x;
     console.log(x); // undefined
     x = 1;

• let과 const의 호이스팅

  • let과 const로 선언된 변수는 호이스팅되지만, 초기화되기 전까지는 접근할 수 없다. 이 기간을 일시적 사각지대(TDZ, Temporal Dead Zone)라고 하며, 이 기간 동안 해당 변수에 접근하려고 하면 오류가 발생한다.

    console.log(x); // 🚨 오류 발생
     let x = 1;

---

🌟 var, let, const의 차이점

키워드	스코프	재선언 가능 여부	재할당 가능 여부	호이스팅
var	함수 스코프	가능	가능	선언만 호이스팅(초기화 X)
let	블록 스코프	불가능	가능	TDZ 적용, 선언만 호이스팅
const	블록 스코프	불가능	불가능	TDZ 적용, 선언만 호이스팅