자바스크립트, 타입스크립트 스코프,호이스팅

자바스크립트와 타입스크립트의 스코프는 크게 세 가지로 나눌 수 있습니다:

1. 전역 스코프 (Global Scope)
2. 함수 스코프 (Function Scope)
3. 블록 스코프 (Block Scope)

다음은 각 스코프와 var, let, const의 차이를 설명해드릴게요.

1. var, let, const와 스코프의 차이

• **var**는 함수 스코프를 가집니다. 이는 var로 선언된 변수는 해당 함수 내에서만 유효하며, 블록({}) 단위로 나뉘지 않습니다. 따라서, 반복문이나 조건문 같은 블록 내에서 선언된 var 변수는 해당 블록 바깥에서도 접근할 수 있게 됩니다.

• function example() { if (true) { var x = 10; // 함수 스코프 } console.log(x); // 10 }

• **let**과 **const**는 블록 스코프를 가집니다. 블록 스코프는 {}로 감싸진 범위에서만 유효하다는 의미입니다. 따라서, 반복문이나 조건문에서 블록 스코프를 적용하여 변수의 유효 범위를 제한할 수 있습니다

• function example() {
    if (true) {
      let y = 20; // 블록 스코프
      const z = 30; // 블록 스코프
    }
    // console.log(y); // ReferenceError: y is not defined
    // console.log(z); // ReferenceError: z is not defined
  }

타입스크립트에서의 추가적인 타입 검사

타입스크립트는 변수의 스코프와 더불어 타입도 검사해주기 때문에, 변수 선언과 재할당 시에 더 엄격한 규칙을 적용받습니다. 예를 들어, 타입이 일치하지 않으면 컴파일 에러가 발생합니다. 하지만 스코프 자체에는 자바스크립트와 차이가 없습니다.

호이스팅 (Hoisting)

또한 자바스크립트의 호이스팅(Hoisting) 특성도 타입스크립트에서 그대로 적용됩니다. var는 호이스팅으로 인해 함수 또는 전역 스코프의 최상단으로 끌어올려지지만, let과 const는 TDZ(Temporal Dead Zone)이라 불리는 잠재적 영역으로 인해 선언되기 전에는 참조할 수 없습니다.

console.log(a); // undefined (호이스팅으로 인해 선언된 것처럼 보임)
var a = 5;

console.log(b); // ReferenceError: Cannot access 'b' before initialization
let b = 10;

요약

• 스코프 개념은 자바스크립트와 타입스크립트가 동일합니다.
• var는 함수 스코프, let과 const는 블록 스코프를 가집니다.
• 타입스크립트는 추가적으로 타입 검사를 통해 변수 사용에 대한 엄격함을 더합니다.
• 호이스팅 동작도 자바스크립트와 동일하지만, let과 const는 TDZ로 인해 더 안전한 방식으로 동작합니다.