TypeScript에서 옵셔널 파라미터(?), 옵셔널 체이닝(?.), ??, || 정리

TypeScript에서는 비슷하게 생겼지만 전혀 다른 의미를 가진 문법들이 많이 존재합니다.
그중에서도 ?, ?., ??, ||는 자주 혼동되기 쉬운 문법이에요.

이번 포스팅에서는 이 네 가지 문법의 차이점과 실제 예제를 중심으로 완벽하게 정리해드립니다!

---

🟢 1. 옵셔널 파라미터 ?

👉 함수나 인터페이스에서 "선택적으로" 값을 받을 때 사용

function greet(name?: string) {
  console.log(`안녕하세요, ${name || '게스트'}님!`)
}

• name을 전달하지 않아도 호출 가능
• 타입은 string | undefined

인터페이스 예시

interface User {
  id: number
  nickname?: string // 있어도 되고 없어도 되는 값
}

---

🔵 2. 옵셔널 체이닝 ?.

👉 객체 속성에 접근할 때 중간 값이 null 또는 undefined여도 안전하게 접근

const user: User = { id: 1 }

const nickname = user.nickname?.toUpperCase()

 

• user.nickname이 없으면 undefined 반환, 에러 발생 X

---

🟣 3. null 병합 연산자 ??

👉 null이나 undefined일 때만 기본값을 설정

const nickname = user.nickname ?? '게스트'

• user.nickname이 null 또는 undefined일 때만 '게스트'로 대체
• falsy한 값(예: 빈 문자열 '', 0)은 유지

---

🔴 4. OR 연산자 ||

👉 falsy한 값 전체를 판단 기준으로 기본값을 설정

const nickname = user.nickname || '게스트'

• user.nickname이 '', 0, false, null, undefined 중 하나라도 기본값 적용
• 원하지 않게 기본값이 적용될 수 있음

---

⚖️ ?? vs || 차이 비교

항목	?? (Null 병합 연산자)	|| (OR 연산자)
판단 기준	null 또는 undefined	모든 falsy 값 ('', 0, false 등 포함)
안전성	필요한 값 유지	의도치 않게 덮어쓸 가능성 있음
예시	input ?? '기본값'	`input

✅ 예제 비교

const value1 = '' || '기본값'     // 👉 '기본값'
const value2 = '' ?? '기본값'     // 👉 ''

---

✅ 요약 비교표

문법	용도	예시
?	함수나 속성의 값이 선택적일 때	function greet(name?: string)
?.	객체 접근을 안전하게 하기 위해	user?.profile?.nickname
??	값이 null 또는 undefined일 때만 기본값 설정	input ?? '기본값'

---

마무리

이 네 가지 문법은 TypeScript와 현대 JavaScript에서 안전하고 깔끔한 코드 작성의 핵심 도구입니다.
각 문법이 어떻게 다른지 이해하고, 상황에 맞게 정확하게 사용하는 것이 중요합니다.

⚠️ 특히 ||와 ??의 차이는 실무에서 의외로 많은 버그를 만들어내는 포인트 입니다.