TypeScript 속성 정의와 값 부재의 이해: id: string | undefined vs id?: string

id: string | undefined와 id?: string 차이

id: string | undefined와 id?: string는 TypeScript에서 비슷해 보이지만, 미묘한 차이가 있습니다. 이 차이는 주로 타입 정의와 값의 존재 여부에서 발생합니다.

id: string | undefined

의미: id는 반드시 존재해야 하지만, 값이 string 또는 undefined일 수 있습니다.
특징:
- 객체에 id 속성이 반드시 존재해야 합니다.
- 하지만 그 값은 string이거나 undefined일 수 있습니다.
예시:

interface WebCrawlerSpec {
  id: string | undefined;
}

const example1: WebCrawlerSpec = { id: "123" }; // ✅ 유효
const example2: WebCrawlerSpec = { id: undefined }; // ✅ 유효
const example3: WebCrawlerSpec = {}; // ❌ 오류: 'id' 속성이 누락됨

---

id?: string

의미: id는 선택적 속성으로, 객체에 존재하지 않을 수도 있습니다. 만약 존재한다면, 값은 반드시 string이어야 합니다.
특징:
- 객체에 id 속성이 없을 수도 있습니다.
- 만약 id가 존재한다면, 값은 반드시 string이어야 합니다.
예시:

interface WebCrawlerSpec {
  id?: string;
}

const example1: WebCrawlerSpec = { id: "123" }; // ✅ 유효
const example2: WebCrawlerSpec = {}; // ✅ 유효 (속성이 없어도 됨)
const example3: WebCrawlerSpec = { id: undefined }; // ✅ 유효 (undefined도 허용됨)

---

주요 차이점

정의	속성 존재 여부	값의 타입
`id: string	undefined`	반드시 존재해야 함
id?: string	존재하지 않아도 됨	값은 string 또는 undefined 가능

---

결론

• 만약 속성이 항상 객체에 있어야 하지만 값이 없을 수도 있다면, id: string | undefined를 사용하세요.
• 만약 속성이 아예 없어도 되는 경우라면, id?: string를 사용하세요.

당신의 생각:

*"undefined는 선언하지 않아도 된다라고 생각했어. 그렇다면 id가 없어도 된다라고 이해했어."*

이는 정확히 맞습니다. TypeScript에서 ?(선택적 속성)는 해당 속성이 없어도 된다는 것을 의미합니다. 따라서, 만약 속성이 아예 없어도 되는 상황이라면 id?: string를 사용하는 것이 더 적합합니다.

---

undefined와 null의 차이

TypeScript에서 undefined와 null은 모두 값이 없음을 나타내지만, 의미와 사용 사례에서 차이가 있습니다. 이 차이를 이해하면 코드에서 언제 각 값을 사용할지 결정하는 데 도움이 됩니다.

1. undefined:
   • 의미: 일반적으로 변수가 선언되었지만 아직 값이 할당되지 않은 상태를 나타냅니다. 초기화되지 않은 변수의 기본값입니다.
   • 사용: 값이 누락되었거나 생략되었음을 나타낼 때 자주 사용됩니다. 또한, 속성이나 함수 매개변수가 제공되지 않았음을 나타낼 때도 사용됩니다.
   • 예시:
   • let x: number | undefined; console.log(x); // 출력: undefined
2. null:
   • 의미: 의도적으로 객체 값이 없음을 나타냅니다. 변수가 아무런 값을 가지지 않아야 함을 명시적으로 표시할 때 사용됩니다.
   • 사용: 변수를 명시적으로 비우거나 비어 있음을 신호로 사용할 때 사용됩니다.
   • 예시:
   • let y: number | null = null; console.log(y); // 출력: null

주요 고려 사항

• 의도성: 변수가 비어 있거나 지워져야 함을 명시적으로 나타내려면 null을 사용합니다. 변수가 초기화되지 않았거나 선택적 필드가 설정되지 않았음을 나타내려면 undefined를 사용합니다.
• TypeScript 가이드라인: 일부 TypeScript 스타일 가이드에서는 일관성과 단순성을 위해 null보다 undefined를 선호하기도 합니다. 이는 JavaScript가 자연스럽게 초기화되지 않은 변수에 대해 undefined를 사용하기 때문입니다.
• 실용적 차이점:
  • API나 데이터베이스와 인터페이스할 때, JSON은 null을 지원하므로 null이 자주 사용됩니다. 반면, undefined 값은 직렬화 시 생략되는 경우가 많습니다.
  • TypeScript에서 엄격한 null 체크(--strictNullChecks)를 사용하면 null과 undefined 모두를 명시적으로 처리하도록 권장하여 더 안전하고 견고한 코드를 작성할 수 있습니다.

각각을 사용할 때

• undefined를 사용할 때:
  • 선택적 속성이나 매개변수를 다룰 때.
  • 값이 아직 설정되지 않았음을 나타내고 싶을 때.
• null을 사용할 때:
  • 값을 명시적으로 비우거나 비어 있어야 함을 나타낼 때.
  • API나 데이터 구조에서 비어 있는 값을 나타내는 방법으로 null이 기대될 때.

결국, null, undefined, 또는 둘 다 사용하는 것은 프로젝트의 규칙과 코드베이스의 특정 요구 사항에 따라 달라집니다. 이러한 값들이 어떻게 사용되는지에 대한 일관성을 유지하면 혼란과 잠재적인 버그를 줄일 수 있습니다.