JavaScript의 Let 대 Var: 범위 및 임시 데드존 이해하기

ECMAScript 6에 도입된 let 문은 개발자들 사이에 혼란을 불러일으켰습니다. , 특히 기존 var 키워드와 어떻게 다른지 살펴보겠습니다. 이 기사에서는 범위 지정 규칙과 최상의 사용 사례를 강조하면서 이 두 변수 선언 간의 미묘한 차이를 자세히 살펴봅니다.

범위

기본적인 차이점은 범위 지정 동작에 있습니다. var로 선언된 변수는 정의된 함수(함수 범위)로 제한되는 반면, let 변수는 해당 변수가 포함된 블록(블록 범위)으로 제한됩니다. 즉, 변수의 범위가 훨씬 더 좁아져 해당 블록 외부에 정의된 변수와 상호 작용하지 못하게 됩니다.

예:

function run() {
  var foo = "Foo";
  let bar = "Bar";

  console.log(foo, bar); // "Foo Bar"

  {
    var moo = "Mooo"
    let baz = "Bazz";
    console.log(moo, baz); // "Mooo Bazz"
  }

  console.log(moo); // "Mooo"
  console.log(baz); // ReferenceError
}

run();

위의 예에서 var 변수 moo는 블록 외부에서도 계속 액세스할 수 있는 반면, let 변수 baz는 블록 외부에서 액세스할 때 ReferenceError를 발생시킵니다.

임시 데드존

또 다른 차이점은 시간적 데드존(TDZ)입니다. let 변수의 경우 선언 지점부터 정의된 블록 끝까지 TDZ가 존재합니다. 이 기간 동안 초기화 없이 let 변수에 액세스하면 ReferenceError가 발생합니다.

예 :

function test() {
  console.log(foo); // ReferenceError
  let foo = "Bar";
}

test();

이 코드에서 초기화되기 전에 let 변수 foo에 액세스하면 TDZ로 인해 ReferenceError가 발생합니다.

Let과 Var를 사용하는 경우

일반적으로 전역 범위를 오염시키고 변수 이름 충돌을 방지하려면 블록 내 변수에 let을 사용하는 것이 좋습니다. Var는 여러 블록이나 함수에서 액세스해야 하는 변수에 여전히 유용합니다.