js) var, let, const의 차이 (+TDZ)

ES6 이후 var은 잘 안쓰인답니다 🤭

var, let, const

자바스크립트에서 변수를 선언하는 방법에는 여러 가지가 있다.
대표적으로 var, let, const가 있는데, 이 세 가지 키워드는 각각 다른 특징을 가지며, 변수 선언 방식에 따라 코드의 동작 방식이 달라질 수 있다.

따라서 이들을 세 가지 관점에서 비교해볼 것이다.

• 중복 선언 가능 여부
• 스코프(scope)
• 호이스팅(hoisting)

---

🌱 중복 선언 허용

• var: 중복 선언 허용
  동일한 이름의 변수를 같은 스코프 내에서 여러 번 선언해도 오류가 발생하지 않는다.

  var name = "Jinwoo";
  var name = "Yun"; // 중복 선언 허용
  console.log(name); // Yun

  당연히, 재할당도 가능하다.

  var name = "Jinwoo";
  name = "Yun"; // 재할당 가능
  console.log(name); // Yun

• let: 중복 선언 불가
  같은 스코프 내에서 동일한 이름의 변수를 다시 선언하면 오류가 발생한다.

  let name = "Jinwoo";
  let name = "Yun"; // SyntaxError: Identifier 'name' has already been declared

  반면, 재할당은 가능하다.

  let name = "Jinwoo";
  name = "Yun"; // 재할당 가능
  console.log(name); // Yun

• const: 중복 선언 불가
  let과 동일하게 중복 선언이 허용되지 않는다.

  const name = "Jinwoo";
  const name = "Yun"; // SyntaxError: Identifier 'name' has already been declared

  하지만, let 과 달리 재할당은 불가능하다.

  const name = "Jinwoo";
  name = "Yun"; // Uncaught TypeError: Assignment to constant variable

---

🔭 스코프

변수에 접근할 수 있는 범위

• var: Function Scope (함수 스코프)
  변수가 선언된 함수 내부의 어디서든 참조가 가능하지만, 외부로는 참조가 불가능하다.
  함수 안에서는 지역 변수로 인식되고,
  함수 밖에서는 전역 변수로 취급된다.

  function getName() {
    if (true) {
      var name = "Jinwoo";
    }
    console.log(name); // 'Jinwoo' (블록 스코프 무시)
  }
  example();
  console.log(name); // ReferenceError: name is not defined

• let: Block Scope (블록 스코프)
  변수가 선언된 중괄호 {}로 감싸진 블록 내에서만 유효하다.

  if (true) {
    let name = "Jinwoo";
  }
  console.log(name); // ReferenceError: name is not defined

• const: Block Scope (블록 스코프)
  let과 마찬가지로 중괄호 내에서만 유효하다.

  if (true) {
    let name = "Jinwoo";
  }
  console.log(name); // ReferenceError: name is not defined

---

⛓️ 호이스팅

JavaScript의 변수, 함수 선언을 코드의 최상단으로 끌어올리는 JavaScript의 동작 방식

JavaScript가 실행되기 전에 내부적으로 선언 부분을 메모리에 먼저 등록한다.

한마디로, "선언이 코드보다 먼저 실행되는 것처럼 보이는 현상" 이다.

• var: 호이스팅 됨 (초기화는 undefined)
  변수 선언이 코드의 맨 위로 끌어올려지지만, 값은 할당되지 않고 undefined로 초기화됩니다.

  console.log(name); // undefined
  var name = "Jinwoo";
  console.log(name); // 'Jinwoo'

• let: 호이스팅 됨 (초기화 안 됨 — TDZ 발생)
  let도 호이스팅은 되지만 Temporal Dead Zone에 의해 선언 전에 접근하면 오류가 발생한다.

  console.log(name); //ReferenceError: Cannot access 'name' before initialization
  let name = "Jinwoo";

• const: 호이스팅 됨 (초기화 안 됨 — TDZ 발생)
  let과 마찬가지로 TDZ가 적용되어 선언 전에 접근하면 오류가 발생한다.

  console.log(name); //ReferenceError: Cannot access 'name' before initialization
  const name = "Jinwoo";

---

⚠️ TDZ (Temporal Dead Zone)

변수가 선언되었지만 아직 초기화되지 않은 상태

➡️ 선언만 되고 아직 초기화 되지 않은 변수가 머무는 공간

let 이나 const 로 선언한 변수들만 TDZ 동작 방식을 거친다.

console.log(value); // ReferenceError (호이스팅으로 선언은 됐지만 초기화되지 않음)
let value; // 초기화
console.log(value); // undefined (초기화 되었으므로 TDZ를 벗어남, 값이 할당되지 않음)
value = "사용 가능";
console.log(value); // '사용 가능'

console.log(value) // ReferenceError (호이스팅으로 선언은 됐지만 초기화되지 않음)
const value; // SyntaxError (const는 선언할 때 값도 할당해줘야함)
const value = '사용 가능'
console.log(value) // '사용 가능'

🍎 마무리

앞선 내용들을 보면 var만 왕따당하는 느낌이 든다 ㅋㅋ..

var를 사용하면 예기치 못한 문제가 발생할 수 있으니,
현재는 let 과 const 를 사용하는 게 권장된다고 한다!