省略可能な引数｜コードで実践

名前の後ろにハテナ

渡しても渡さなくてもよい引数は、名前の後ろに ? を付けて作ります。

function greetVisitor(name: string, title?: string): string {
  return name + "さん、ようこそ";
}

greetVisitor("ゆめさく");
greetVisitor("ゆめさく", "フロントエンドエンジニア");

? を付けた引数は、渡さずに呼んでもエラーになりません。付けなければ、渡し忘れは Expected 2 arguments, but got 1. として止まります。

中身は undefined かもしれない

title?: string と書いたとき、関数の中での title の型は string ではありません。文字列か、または渡されなかったことを表す undefined です。

function greetVisitor(name: string, title?: string): string {
  return name + "(" + title.toUpperCase() + ")さん";
}
// エラー 'title' is possibly 'undefined'.

だから、使う前に渡されたかどうかを確かめます。確かめた後の分岐の中では、title は string として扱えます。

function greetVisitor(name: string, title?: string): string {
  if (title === undefined) {
    return name + "さん、ようこそ";
  }
  return name + "(" + title + ")さん、ようこそ";
}

省略できる引数を作ると、必ず「無かったとき何を返すか」を決める必要が出てきます。? は書き手の手間を減らす記号ではなく、決め忘れを封じる記号です。

置ける場所は後ろだけ

省略可能な引数は、必ず必須の引数より後ろに並べます。

function greetVisitor(title?: string, name: string): string {
  return name;
}
// エラー A required parameter cannot follow an optional parameter.

前に置けてしまうと、引数を 1 つだけ渡したときにどちらへ入るのか決まらなくなるからです。

手を動かす

演習では、ゆめさくのプロフィールサイトを訪ねてきた人へ挨拶を返す関数を書きます。肩書きは分かっている人と分かっていない人がいます。両方に同じ関数で対応してください。

省略可能な引数

名前の後ろにハテナ

中身は undefined かもしれない

置ける場所は後ろだけ

手を動かす

要件

入出力例

ヒント

メモ