[TypeScript] 1주차 발제

import.meta

import.meta는 ECMAScript 모듈(ESM, ES Modules)에서 사용되는 메타데이터 객체로, 현재 모듈에 대한 환경별 정보를 제공한다. TypeScript에서도 이를 지원하며 그에 따른 환경 설정이 필요하다. 주로 모듈의 위치나 환경 변수에 접근 할 때 사용한다.

주요 특징

• 모듈 전용 : import.meta는 ES 모듈에서만 동작하며, CommonJS 모듈이나 일반 스크립트에서는 사용할 수 없다.
• TypeScript 지원 : TypeScript에서는 import.meta를 사용하려면 module 설정이 es2020, es2022, esnext, node16, nodenext 중 하나여야 한다.

 

export * as … from …

export * as … from …는 TypeScript와 JavaScript의 ES 모듈 문법으로, 한 모듈의 모든 내보내기(export)를 네임스페이스 객체로 묶어서 다시 내보내는 방법이다. 이를 사용하면 서브모듈의 내보내기를 간편하게 상위 모듈로 집계하거나, 기본값(default export)을 서브모듈로 다시 내보낼 때 유용하다.

 

String.replaceAll()

항상 정규식을 사용하는 대신, 전역 플래그(/g)를 사용해 문자열 내의 모든 부분 문자열 인스턴스를 바꾼다.

const testString = 'hello/greetings everyone/everybody';
// 이전 방식
// 첫 번째 인스턴스만 대체합니다.
console.log(testString.replace('/', '|')); // 'hello|greetings everyone/everybody'

// 대신 성능이 더 나쁘고 이스케이프가 필요한 정규식을 사용해야 했습니다.
// 글로벌 플래그(/g)가 아닙니다.
console.log(testString.replace(/\//g, '|')); // 'hello|greetings everyone|everybody'

// 새로운 방식
// replaceAll을 사용하면 훨씬 더 명확하고 빠릅니다
console.log(testString.replaceAll('/', '|')); // 'hello|greetings everyone|everybody'

 

Nullish Coalescing Operator [??] (nullish 병합 연산자)

JavaScript와 TypeScript에서 사용되는 연산자로, ES2020(ES11)에서 도입되었다. 이 연산자는 왼쪽 피연산자가 null 또는 undefined인 경우에만 오른쪽 피연산자를 반환하며, 그렇지 않으면 왼쪽 피연산자를 반환한다. 이는 "nullish" 값(null 또는 undefined)을 처리할 때 유용하며, falsy 값(false, 0, "", NaN 등)을 포함하는 논리 OR 연산자(||)와 구별된다.

주요 특징

• 구문 : value ?? defaultValue
  • value가 null 또는 undefined면 defaultValue 반환.
  • 그렇지 않으면 value 반환.
• falsy 값과의 차이
  • ||는 false, 0, "", NaN 등 모든 falsy 값을 기본값으로 대체.
  • ??는 오직 null과 undefined만 대체.

const a = 0;
console.log(a || 'default'); // 'default' (0은 falsy)
console.log(a ?? 'default'); // 0 (0은 nullish 아님)

const b = null;
console.log(b || 'default'); // 'default'
console.log(b ?? 'default'); // 'default'

 

논리적 AND 할당 연산자 (&&=)

JavaScript와 TypeScript에서 사용되는 연산자로, ES2021(ES12)에서 도입되었다. 이 연산자는 왼쪽 피연산자가 truthy한 경우에만 오른쪽 피연산자의 값을 왼쪽 피연산자에 할당한다. 즉, 변수의 기존 값이 truthy일 때만 새로운 값을 할당하는 축약된 문법이다.

주요 특징

• 구문 : x &&= y
  • 동작: x = x && y와 동일.
  • x가 truthy면 x에 y 값을 할당.
  • x가 falsy면 x는 그대로 유지 (오른쪽 y는 평가되지 않음).
• Truthy/Falsy
  • Truthy: true, 비어 있지 않은 문자열, 0이 아닌 숫자, 객체, 배열 등.
  • Falsy: false, 0, "", null, undefined, NaN.

let x = 0;
x &&= 10; // x는 0 (falsy이므로 10 할당 안 됨)
console.log(x); // 0

let y = 5;
y &&= 10; // y는 5 (truthy이므로 10 할당)
console.log(y); // 10

 

논리적 OR 할당 연산자 (||=)

JavaScript와 TypeScript에서 사용되는 연산자로, ES2021(ES12)에서 도입되었다. 이 연산자는 왼쪽 피연산자가 falsy한 경우에만 오른쪽 피연산자의 값을 왼쪽 피연산자에 할당한다. 즉, 변수의 기존 값이 falsy(false, 0, "", null, undefined, NaN)일 때 새로운 값을 할당하는 축약된 문법이다.

주요 특징

• 구문 : x ||= y
  • 동작: x = x || y와 동일.
  • x가 falsy면 x에 y 값을 할당.
  • x가 truthy면 x는 그대로 유지 (오른쪽 y는 평가되지 않음).

 

WeakRef

객체에 대한 약한 참조(weak reference)를 생성하여, 해당 객체가 가비지 컬렉션(garbage collection)에 의해 제거될 수 있도록 한다. 이는 메모리 관리에 유용하며, 특히 객체를 참조하되 메모리 누수를 방지하고자 할 때 사용된다.

주요 특징

• 약한 참조: WeakRef는 대상 객체를 강하게 참조하지 않으므로, 다른 강한 참조가 없으면 가비지 컬렉터가 객체를 제거할 수 있음.
• 메소드: WeakRef.prototype.deref()를 호출하여 참조된 객체를 가져옴. 객체가 이미 제거되었다면 undefined 반환.
• 제한 사항
  • WeakRef는 모든 객체에 대해 생성 가능하지만, 원시 값(예: string, number)은 대상으로 할 수 없음.
  • 가비지 컬렉션은 비결정적(non-deterministic)이므로, 객체가 언제 제거될지 예측 불가.

const obj = { data: 'test' };
const strongRef = obj; // 강한 참조
const weakRef = new WeakRef(obj);

console.log(strongRef.data); // 'test'
console.log(weakRef.deref()?.data); // 'test' (객체 살아있음)

delete strongRef; // 강한 참조 제거
// 가비지 컬렉션 발생 시
console.log(weakRef.deref()); // undefined (객체 제거됨)

 

숫자 리터럴 구분자 ( _ )

가독성을 높이기 위해 _를 사용하여 숫자를 구분한다. 기능에는 영향을 주지 않는다.

const int = 1_000_000_000;
const float = 1_000_000_000.999_999_999;
const max = 9_223_372_036_854_775_807n;
const binary = 0b1011_0101_0101;
const octal = 0o1234_5670;
const hex = 0xD0_E0_F0;