TypeScript에서 함수는 다양한 형태의 인자를 받을 수 있습니다. 그중에서도 선택적(Optional) 매개변수와 기본값(Default) 매개변수는 함수를 더 유연하고 직관적으로 설계할 수 있는 중요한 기능입니다.
선택적 매개변수(Optional Parameter)란?
선택적 매개변수는 “있어도 되고 없어도 되는 매개변수”입니다. TypeScript에서는 매개변수 이름 뒤에 ?를 붙여 선언합니다.
function greet(name: string, message?: string) {
console.log(`${name}: ${message ?? "안녕하세요"}`);
}
greet("Alice");
// 출력: Alice: 안녕하세요
greet("Bob", "환영합니다");
// 출력: Bob: 환영합니다
선택적 매개변수는 호출 시 생략할 수 있으며, 전달되지 않을 경우 undefined 값을 갖습니다.
선택적 매개변수 규칙
- 반드시 필수 매개변수 뒤에 위치해야 한다.
- 타입은 자동으로
string | undefined와 같은 형태가 된다. - 값이 없을 때를 처리하는 로직이 필요하다 (nullish coalescing 등).
기본값 매개변수(Default Parameter)란?
기본값 매개변수는 “값이 전달되지 않았을 때 사용할 기본값”을 지정하는 문법입니다. JavaScript/ES6 문법을 그대로 지원합니다.
function echo(message: string = "Hello") {
console.log(message);
}
echo();
// 출력: Hello
echo("Hi!");
// 출력: Hi!
기본값 매개변수 특징
- 값이 전달되지 않으면 기본값이 자동으로 할당된다.
- 기본값이 있는 매개변수는 사실상 선택적 매개변수와 동일하다.
- 선택적 매개변수와 달리, 타입이 undefined | T로 자동 확장되지 않는다.
선택적 vs 기본값 — 무엇이 다를까?
| 구분 | 선택적 매개변수 (message?) | 기본값 매개변수 (message = "Hi") |
|---|---|---|
| 값 전달 여부 | 생략 가능 | 생략 가능 |
| 타입 | string | undefined | string (기본값 제공 시 undefined 아님) |
| undefined 처리 | 직접 처리 필요 | 자동 처리됨 |
| 사용 추천 | 전달 여부가 의미 있는 경우 | 기본 동작이 명확한 경우 |
두 문법을 결합할 수도 있을까?
실제로 선택적 매개변수 ?와 기본값을 함께 사용할 필요는 없습니다. 왜냐하면 기본값이 있으면 TypeScript는 그 매개변수를 선택적으로 취급하기 때문입니다.
// Bad
function greet(name?: string = "guest") {}
// Good
function greet(name: string = "guest") {}기본값을 사용하는 순간 “있어도 되고 없어도 되는 인자”가 되므로 ?를 붙이는 건 중복이자 불필요한 문법입니다.
Rest 파라미터와 선택적 인자
선택적 인자와 기본값은 Rest 파라미터(...args)와 함께 자주 사용됩니다.
function log(level: string = "info", ...messages: string[]) {
console.log(`[${level}]`, ...messages);
}
log("debug", "A", "B");
log(undefined, "X", "Y");
이 패턴은 로깅, 검증 함수 등 실무에서 자주 활용됩니다.
실무에서의 사용 기준
✔ 선택적 매개변수를 사용해야 하는 경우
- 인자가 제공되었는지 여부 자체가 의미가 있을 때
- undefined와 값이 들어온 경우를 구분해야 할 때
- API 설계에서 “값이 없어도 동작하지만 로직이 달라지도록” 기획된 경우
✔ 기본값 매개변수를 사용해야 하는 경우
- 인자가 생략되더라도 함수가 자연스럽게 동작해야 할 때
- 기본값이 명확한 상황 (로그 레벨, 초기 설정값 등)
- undefined를 직접 처리할 필요가 없도록 만들 때
실무 예제: API 요청 옵션 처리
interface RequestOptions {
timeout?: number;
retry?: number;
}
function request(url: string, options: RequestOptions = {}) {
const timeout = options.timeout ?? 5000;
const retry = options.retry ?? 3;
console.log(`timeout=${timeout}, retry=${retry}`);
}
request("/api/data");
request("/api/data", { timeout: 2000 });
옵션 객체는 선택적 매개변수와 기본값 매개변수를 함께 사용하는 대표적인 패턴입니다.
선택적 매개변수와 기본값 매개변수는 TypeScript 함수의 유연성과 가독성을 높이는 핵심 기능입니다. 두 문법을 정확히 이해하면 API 설계를 더 명확하게 하고, 실무에서 발생하는 많은 불필요한 조건문을 줄일 수 있습니다.