デフォルト引数と型｜コードで実践

渡されなかったときの値を先に書く

引数のうしろにイコールで値を書くと、渡されなかったときにその値が使われます。これをデフォルト引数と呼びます。

function listTopWorks(titles: string[], limit: number = 3): string {
  return titles.slice(0, limit).join(" / ");
}

listTopWorks(["プロフィールサイト", "自己紹介カード", "スキル一覧の表", "ブログ"]);
// プロフィールサイト / 自己紹介カード / スキル一覧の表

listTopWorks(["プロフィールサイト", "自己紹介カード", "スキル一覧の表", "ブログ"], 2);
// プロフィールサイト / 自己紹介カード

呼ぶ側は limit を省略できます。省略できるという点は前のレッスンの ? と同じです。

型は書かなくても既定値から決まる

デフォルト引数には、既定値そのものが型のヒントになります。だから : number は省略できます。

function listTopWorks(titles: string[], limit = 3): string {
  return titles.slice(0, limit).join(" / ");
}

listTopWorks(["プロフィールサイト"], "2");
// エラー Argument of type 'string' is not assignable to parameter of type 'number'.

3 という既定値から limit は number だと推論され、文字列を渡した呼び出しはきちんと止まります。書いても書かなくても構いませんが、既定値と型が離れて読みにくいときは limit: number = 3 と両方書いて構いません。

ハテナとの違い

? を付けた引数は、関数の中で undefined かもしれない値になります。デフォルト引数はそうなりません。渡されなければ既定値が入るので、中では最初から number です。

function a(limit?: number) {
  return limit * 2;
}
// エラー 'limit' is possibly 'undefined'.

function b(limit = 3) {
  return limit * 2;
}
// これは通る

無かったときの値がはっきり決まっているならデフォルト引数、無いこと自体に意味があるなら ?、という使い分けになります。

手を動かす

演習では、ゆめさくの作品一覧から先頭のいくつかだけを並べる関数を書きます。件数を渡さなかったときは 3 件並べる、という既定値を持たせてください。

デフォルト引数と型

渡されなかったときの値を先に書く

型は書かなくても既定値から決まる

ハテナとの違い

手を動かす

要件

入出力例

ヒント

メモ