선택·기본값 매개변수

매개변수 이름 뒤에 ?를 붙이면 부를 때 비워도 되는 선택 매개변수(optional parameter)가 되고, 그 타입에는 undefined가 더해집니다. 기본값을 준 매개변수는 그 값에서 타입이 추론됩니다.

앞 레슨에서 검사기는 인자 수가 매개변수 수와 다르면 막았습니다(TS2554). 메모처럼 없어도 되는 인자는 이 두 꼴로 적어 검사기에게 알립니다.

function receipt(  name: string,  memo?: string,) {  console.log(name, memo);}receipt('라테');receipt('라테', '얼음 적게');

function receipt(  name: string,  memo?: string,) {  console.log(name, memo);}receipt('라테');receipt('라테', '얼음 적게');

function receipt(  name: string,  memo?: string,) {  console.log(name, memo);}receipt('라테');receipt('라테', '얼음 적게');

function receipt(…) {  console.log(name, memo);}receipt('라테');receipt('라테', '얼음 적게');

Node가 실행하면 여기에 나옵니다

function receipt(…) {  console.log(name, memo);}receipt('라테');receipt('라테', '얼음 적게');

Node가 실행하면 여기에 나옵니다

function receipt(…) {  console.log(name, memo);}receipt('라테');receipt('라테', '얼음 적게');

라테 undefined라테 얼음 적게

function receipt(  name: string,  memo?: string,) {  console.log(name, memo);}receipt('라테');receipt('라테', '얼음 적게');

1선택 매개변수는 이름 뒤에 ?

memo?: string은 'memo는 비워도 된다'는 뜻입니다. 그래서 7번 줄처럼 memo를 비우고 불러도 검사를 지납니다.

function receipt(
  name: string,
  memo?: string,
) {
  console.log(name, memo);
}
receipt('라테');
receipt('라테', '얼음 적게');

라테 undefined
라테 얼음 적게

함수 안에서 memo의 지금 타입은 string | undefined입니다(|는 '이거나'). 부르는 쪽이 비우면 실행 때 undefined가 오기 때문에, 검사기는 memo의 선언 타입 모음에 undefined를 더해 둡니다(검사 규칙 2). undefined일 수 있는 memo를 확인 없이 글자처럼 쓰면 막힙니다. 이것은 자주 틀리는 곳 첫째에서 봅니다.

인자는 차례로 매개변수와 짝지어집니다. 그래서 비워도 되는 매개변수는 꼭 있어야 하는 매개변수 뒤에 둡니다.

function receipt(
  memo?: string,
  name: string,
) {
  console.log(name, memo);
}
receipt('얼음 적게', '라테');

main.ts(3,3): error TS1016: A required parameter cannot follow an optional parameter.

라테 얼음 적게

TS1016은 '꼭 있어야 하는 매개변수는 선택 매개변수 뒤에 올 수 없다'는 뜻입니다. 3번 줄 name이 선택 매개변수 memo 뒤에 있습니다. 인자를 하나만 넘기면 그 인자가 앞의 memo와 짝지어지고 name이 비게 되니, 이런 머리는 처음부터 막습니다. Node는 검사하지 않으니 그대로 돌립니다.

2기본값 매개변수는 값에서 타입이 정해진다

JS 다시 보기: 매개변수 기본값은 인자가 없거나 undefined일 때만 쓰입니다(JS '기본값 매개변수').

qty = 1처럼 기본값을 준 매개변수도 부를 때 비워도 됩니다. 아래 3번 줄 qty에는 타입을 적지 않았습니다. 9번 줄은 검사를 지나갈까요? 답을 정한 뒤 펼쳐 보세요.

function order(
  item: string,
  qty = 1,
) {
  console.log(item, qty);
}
order('쿠키');
order('쿠키', 3);
order('쿠키', '2');

main.ts(9,13): error TS2345: Argument of type 'string' is not assignable to parameter of type 'number'.

쿠키 1
쿠키 3
쿠키 2

두 꼴을 비우고 불렀을 때를 견주면 이렇습니다.

예제

영수증 한 줄을 찍는 함수입니다. 메모가 없으면 기본값 '없음'을 씁니다.

function receipt(
  name: string,
  memo = '없음',
) {
  console.log(name, memo);
}
receipt('라테');
receipt('쿠키', '포장');
receipt('녹차', undefined);

라테 없음
쿠키 포장
녹차 없음

7번 줄처럼 memo를 비우거나 9번 줄처럼 undefined를 넘기면 기본값 '없음'이 쓰입니다. 함수 안 memo의 지금 타입은 string이라, 확인하지 않고 글자로 써도 검사를 지납니다.

자주 틀리는 곳

틀린 생각: 선택 매개변수도 함수 안에서는 늘 값이 있다.

함수 머리에 memo?: string이라고 타입을 적었으니, 함수 안의 memo도 글자일 것 같습니다. 그러나 부르는 쪽이 비우면 memo는 undefined입니다.

function receipt(
  name: string,
  memo?: string,
) {
  return memo.length;
}
console.log(receipt('라테'));

main.ts(5,10): error TS18048: 'memo' is possibly 'undefined'.

main.ts:5  return memo.length;              ^ TypeError: Cannot read properties of undefined (reading 'length')    at receipt (main.ts:5:15)    at main.ts:7:13

TS18048은 'memo가 undefined일 수 있다'는 뜻입니다. 검사기는 memo의 지금 타입 string | undefined 가운데 undefined에는 length가 없어서 막습니다. Node로 돌리면 7번 줄이 memo를 비웠으니 5번 줄에서 TypeError로 멈춥니다.

맞는 규칙: ?를 붙인 매개변수의 선언 타입에는 undefined가 더해지고, 부르는 쪽이 비우면 실행 때 정말 undefined가 옵니다. 그래서 쓰기 전에 확인하거나(4단원 null·undefined 거르기) 기본값을 줍니다(검사 규칙 2).

틀린 생각: ?와 기본값을 함께 쓰면 비워도 된다는 것이 더 분명해진다.

기본값이 있는 매개변수도 비워도 되니, ?까지 붙이면 뜻이 더 또렷할 것 같습니다. 그러나 둘을 함께 쓰는 것은 문법 오류입니다.

function receipt(
  name: string,
  memo?: string = '없음',
) {
  console.log(name, memo);
}
receipt('라테');

main.ts(3,3): error TS1015: Parameter cannot have question mark and initializer.

main.ts:3  name: string,  memo?: string = '없음',  ^^^^^^^^^^^^^) { SyntaxError [ERR_INVALID_TYPESCRIPT_SYNTAX]: Parameter cannot have question mark and initializer {  code: 'ERR_INVALID_TYPESCRIPT_SYNTAX'}

TS1015는 '매개변수에 물음표와 기본값을 함께 둘 수 없다'는 뜻입니다. 이번에는 Node도 돌리지 못합니다. 타입 글자를 지워 돌리려다 지울 수 없는 문법을 만나, 한 줄도 실행하지 않고 멈춥니다.

맞는 규칙: 기본값을 준 매개변수는 이미 비워도 되는 매개변수입니다. ?와 기본값 가운데 하나만 씁니다.

확인 문제

1. 예제의 3번 줄 memo = '없음',을 memo?: string,으로 바꿨습니다. 검사는 지나갈까요? Node로 돌리면 무엇이 찍힐까요? 마지막 줄까지 글자 그대로 쓰세요.

function receipt(
  name: string,
  memo?: string,
) {
  console.log(name, memo);
}
receipt('라테');
receipt('쿠키', '포장');
receipt('녹차', undefined);

라테 undefined
쿠키 포장
녹차 undefined

2. 실행 결과가 쿠키 1 · 라테 2 두 줄이 되도록 3번 줄의 빈칸을 채우세요. 검사도 지나야 합니다.

function order(
  item: string,
  qty____,
) {
  console.log(item, qty);
}
order('쿠키');
order('라테', 2);

function order(
  item: string,
  qty = 1,
) {
  console.log(item, qty);
}
order('쿠키');
order('라테', 2);

쿠키 1
라테 2

3. 장본 물건 한 줄의 값을 내는 함수입니다. 개수를 비우면 1개로 셈하고, 쿠폰이 있으면 그 값만큼 뺍니다. 검사 결과와 Node로 돌린 실행 결과를 각각 쓰세요.

function pay(
  price: number,
  qty = 1,
  coupon?: number,
) {
  return price * qty - coupon;
}
console.log(pay(1200, 3, 500));
console.log(pay(1200));

main.ts(6,24): error TS18048: 'coupon' is possibly 'undefined'.

3100
NaN

컴퓨터에서 해 보기(선택) — 점수에 들지 않습니다. 폰으로만 보고 있다면 건너뛰세요. 1절 첫 코드를 main.ts로 저장해 npx tsc로 검사하고 node main.ts로 돌립니다. 그다음 3번 줄 memo?: string,에서 ?를 빼면 검사 결과가 어떻게 바뀔지 먼저 적고, 다시 검사해 맞춰 봅니다. 검사하고 돌리는 법은 내 컴퓨터에서 검사하고 돌리기에 있습니다.