[JS]var, let, const의 차이 + TDZ

프론트엔드에서는 변수를 다루를 때 var, let, const를 사용해서 선언합니다. 각각이 어떤 차이를 가지고 있는지에 대해서 한번 다루어 보고자 합니다. 

Var 

스코프 

var는 함수 스코프를 가집니다. 그렇기 때문에 변수가 선언된 함수 내에서만 유효합니다. 블록 스코프를 지원하지 않기 때문에 if, for등의 블록안에서 선언해도 블록 외부에서 접근이 가능합니다. 

호이스팅

var로 선언된 변수는 호이스팅되어 변수 선언이 코드의 최상단으로 끌어 올려집니다. 하지만 초기화는 호이스팅되지 않으므로 선언 전에 접근하면 undefined를 반환합니다. 

function testVar() {
  if (true) {
    var x = 10; // 블록 내부에서 선언
  }
  console.log(x); // 블록 외부에서도 접근 가능
}
testVar(); // 출력: 10

Let 

스코프

let은 블록스코프를 가집니다. 블록내에서만 유효하며 블록 외부에서는 접근할 수 없습니다. 

 

호이스팅

let으로 선언된 변수도 호이스팅 되지만 TDZ(Temporal Dead Zone)때문에 초기화 전에 접근하려 하면 ReferenceError가 발생합니다.

function testLet() {
  if (true) {
    let y = 20; // 블록 내부에서 선언
    console.log(y); // 출력: 20
  }
  console.log(y); // ReferenceError: y is not defined
}
testLet();

 

const 

스코프 

const도 let과 마찬가지로 블록 스코프를 가집니다. 

 

상수 

const로 선언된 변수는 재할당이 불가능합니다. 하지만 참조형 데이터(예: 배열, 객체)의 경우, 내부 값은 변경할 수 있습니다. 

 

호이스팅 

const도 호이스팅되지만 let과  마찬가지로 TDZ때문에 초기화 이전에 접근하면 referenceError가 발생합니다.

const z = 30;
z = 40; // TypeError: Assignment to constant variable.

const obj = { name: "Alice" };
obj.name = "Bob"; // 객체 내부의 속성은 변경 가능
console.log(obj.name); // 출력: Bob

 

결론 

const를 기본으로 사용하는 것이 좋습니다. 변수에 재할당이 필요하지 않다면 const로 선언해 안정성을 높이는 것이 좋습니다. 

let은 재할당이 필요한 경우에만 사용하는 것이 좋습니다. 

var는 사용하지 않는 것이 권장됩니다. 함수 스코프와 호이스팅으로 인해 예기치 않은 동작이 발생할 수 있습니다.

 

---

++ TDZ에 대해서 

TDZ(temporal Dead Zone)은 자바스크립트에서 let과 const로 선언된 변수를 초기화 전에 접근하려고 할 때 발생하는 특별한 구역을 의미합니다. TDZ는 변수 선언이 호이스팅되지만, 초기화가 되지 않은 상태에서 접근을 시도하면 에러를 발생시키는 구역입니다. 

function testTDZ() {
  console.log(a); // ReferenceError: Cannot access 'a' before initialization
  let a = 10; // 변수 'a'의 초기화
}

testTDZ();

let a=10;으로 a변수를 선언했지만 선언만 호이스팅되고 초기화는 나중에 이루어지기 때문에, console.log(a)에서 초기화 전인 TDZ구간에서 a에 접근하려 하면 ReferenceError가 발생합니다. 

 

var의 경우에는 TDZ의 영향을 받지 않습니다. var는 함수 스코프로 동작하며, 선언은 호이스팅되지만 TDZ가 적용되지 않기 때문에 초기화 전에 접근해도 undefined로 값이 반환됩니다. 

function testVar() {
  console.log(c); // 출력: undefined
  var c = 30; // 변수 c의 초기화
}

testVar();

 

그렇다면 TDZ는 왜 필요한걸까요? 

TDZ는 예기치 않은 오류를 방지하고 코드의 안정성을 높이는 데 중요한 역할을 합니다. let과 const를 사용함으로써 변수가 초기화 되기 전에 접근하는 실수를 줄이기 위해Javascript엔진이 이를 강제로 막아줍니다.