선택 매개 변수와 기본값

넘기지 않아도 되는 인수

JavaScript 에서는 인수를 넘기지 않아도 그냥 실행됩니다. 받는 쪽에는 undefined 가 담깁니다. TypeScript 는 그것을 타입에 적어 두게 합니다.

function greet(name: string, title?: string) { … }
                             // ↑ 넘기지 않아도 됩니다

? 를 붙이면 그 매개 변수의 타입은 string | undefined 가 됩니다. 없을 수 있으니 확인하고 사용해야 합니다(1.6).

물음표로 선택하게 만들기

function greet(name: string, title?: string): string {
	if (title === undefined) return `${name} 님`;
	return `${title} ${name} 님`;
}

console.log(greet("홍길동"));
console.log(greet("홍길동", "대표"));

function greet(name: string, title?: string): string {
	return `${title.toUpperCase()} ${name}`;
}

console.log(greet("홍길동"));

선택으로 만들어 두었으면 없을 때도 되는 코드여야 합니다. 확인하지 않으면 막습니다.

기본값을 두면 확인할 것이 없습니다

값을 넣지 않았을 때 대신 담길 것을 정해 두면, 그 매개 변수는 언제나 값이 있습니다. 그러면 undefined 확인이 필요 없습니다.

function greet(name: string, title: string = "손님"): string {
	return `${title} ${name}`;
}

console.log(greet("홍길동"));
console.log(greet("홍길동", "대표"));

기본값이 있으면 타입도 그것을 보고 정해지므로 : string 을 지워도 됩니다.

? 와 기본값은 함께 쓰지 않습니다. 기본값이 있으면 이미 넘기지 않아도 되는 매개 변수이기 때문입니다.

개수가 정해지지 않은 인수

나머지 매개 변수(JS 2.3)에도 타입을 적습니다. 받는 것은 배열이므로 배열 타입으로 적습니다.

function sum(...values: number[]): number {
	return values.reduce((a, b) => a + b, 0);
}

console.log(sum());
console.log(sum(1, 2, 3));
console.log(sum(1, "둘"));

...values: number[] 이지만 부를 때는 sum(1, 2, 3) 처럼 하나씩 넘깁니다. 그중 하나만 달라도 그 자리를 짚어 알려 줍니다.

처음에 자주 걸리는 것

직접 해보기

function join(separator: string = ", ", ...values: string[]): string {
	return values.join(separator);
}

console.log(join());
console.log(join(" · ", "연필", "공책", "지우개"));

이 단원의 정리