답변.

타입스크립트(및 현대 JavaScript)에서는 변수를 let, const, var를 사용하여 선언할 수 있으며, 이들 간에는 중요한 차이가 있습니다:

let — 블록 범위, 변수를 재정의할 수 있으나 같은 범위 내에서 두 번 선언할 수 없습니다.
const — 블록 범위, 값은 즉시 할당해야 하며, 재정의할 수 없습니다(단, const로 선언된 객체의 내부 속성은 변경 가능합니다!).
var — 함수 범위, 끌어올리기(hoisting) 메커니즘이 가능하며, 변수를 재선언하고 변경할 수 있습니다.

예시:

if (true) {
  let a = 10;
  const b = 20;
  var c = 30;
}
console.log(c); // 30 — 블록 밖에서도 볼 수 있습니다!
console.log(a); // Error: a is not defined
console.log(b); // Error: b is not defined

전형적인 시나리오:

const — 변경이 없어야 하는 값(상수, 설정, 함수 참조)을 위한 것입니다.
let — 실행 중에 변경되는 값(카운터, 루프 내 변수)을 위한 것입니다.
var — 사용하는 것을 권장하지 않으며, 구형 코드 지원을 위해서만 사용해야 합니다.

트릭 질문.

const가 객체를 완전히 변경 불가능하게 만들 수 있습니까? 설명하고 예를 들어 주십시오.

답변: 아니요, const는 참조 자체의 변경만 방지하며, 객체의 속성 변경에 대해서는 보호하지 않습니다!

const obj = { x: 1 };
obj.x = 2; // 이것은 허용됩니다!
obj = { x: 3 }; // 오류: 새 참조 할당

완전한 불변성을 위해서는 Object.freeze를 사용합니다:

const frozen = Object.freeze({ x: 1 });
frozen.x = 2; // 엄격 모드에서는 오류, 하지만 컴파일러가 항상 경고하지 않습니다!

주제에 대한 세부 사항 부족으로 인해 발생하는 실제 오류 예시.

이야기

대규모 프론트엔드 프로젝트를 타입스크립트로 마이그레이션하는 과정에서 개발자들이 var를 let으로 대량으로 교체했으나, 블록 범위를 고려하지 못했습니다. 이로 인해 일부 for 루프의 카운터가 루프 밖에서 접근할 수 없게 되어 예기치 않은 오류가 발생했습니다: 루프가 끝난 후 카운터에 접근하려고 할 때 코드가 작동을 멈췄습니다.

이야기

개발자가 const를 사용하여 구성 객체를 저장할 상수를 선언하여 속성이 변경되지 않을 것이라고 생각했습니다. 나중에 프로그램의 다른 부분이 속성을 변경했으며, 이로 인해 데이터 처리에서 찾기 어려운 오류가 발생했습니다. 외부 코드가 모든 사용자에 대한 글로벌 설정을 "예기치 않게" 변경했기 때문입니다.

이야기

프로젝트에서 let, const 및 var를 명확한 정책 없이 동시에 사용했습니다. 하나의 컴포넌트가 함수 내에서 var 변수를 재선언했으며, 다른 곳에서는 변수가 let으로 선언되기를 기대하여 블록 밖에서는 보이지 않을 것이라고 생각했습니다. 결과: 변수의 겹침, 내부 논리의 오류 및 변수의 불분명한 생명 주기에 대한 복잡한 디버깅 문제가 발생했습니다.