サンプルコードで身につける: オプション引数とデフォルト値

解説で学んだ概念を、5つの具体例で確認します。素朴な例から実務寄りの例へと進みます。

1? で省略できる引数

引数名の後ろに ? を付けるだけで、その引数を渡しても渡さなくてもよくなる基本の例です。1つの関数が「名前だけ」と「名前+追加メッセージ」の2通りの呼び出しに対応できます。

TypeScript

function buildWelcome(userName: string, message?: string): string {
  if (message !== undefined) {
    return "ようこそ " + userName + "さん。" + message;
  }
  return "ようこそ " + userName + "さん。";
}

console.log(buildWelcome("Taro"));
console.log(buildWelcome("Hanako", "お知らせが1件あります"));

2省略されたときは undefined

オプション引数が渡されなかったとき、その値は undefined になります。使う前に undefined かどうかを確認してから分岐する、というオプション引数とセットで必要になる作法を示す例です。

TypeScript

function formatPrice(amount: number, currencySymbol?: string): string {
  // 省略されたときの値は undefined なので、確認してから使う
  if (currencySymbol === undefined) {
    return amount + "円";
  }
  return currencySymbol + amount;
}

console.log(formatPrice(480));
console.log(formatPrice(480, "$"));

3デフォルト値で確認を省く

引数に = で初期値を書いておくと、省略時にその値が自動で使われます。オプション引数と違って undefined の確認が不要になるので、「省略時の標準値が決まっている」場面ではこちらを選びます。

TypeScript

// repeatCount を省略すると 2 が使われる
function repeatText(sourceText: string, repeatCount: number = 2): string {
  return sourceText.repeat(repeatCount);
}

console.log(repeatText("おいしい!")); // 省略すると2回
console.log(repeatText("やった!", 3)); // 指定すればその回数

4オプションとデフォルトの使い分け

1つの関数の中で、標準値があるものはデフォルト値、指定があったときだけ動きを変えるものはオプション引数、と使い分ける例です。引数の性格に合わせて2つの仕組みを選ぶ感覚を養います。

TypeScript

function makeListItem(itemText: string, markText: string = "・", upperFlag?: boolean): string {
  if (upperFlag === true) {
    return markText + itemText.toUpperCase();
  }
  return markText + itemText;
}

console.log(makeListItem("milk"));
console.log(makeListItem("coffee", "> "));
console.log(makeListItem("tea", "- ", true));

5検索クエリの組み立て

ページ番号や1ページあたりの件数のような「普段は標準値でよい設定」をデフォルト値にした、API 呼び出しを想定した実務寄りの例です。呼び出し側は必要な引数だけ渡せばよくなります。

TypeScript

function buildSearchQuery(keyword: string, pageNumber: number = 1, perPageCount: number = 20): string {
  return "keyword=" + keyword + "&page=" + pageNumber + "&per=" + perPageCount;
}

console.log(buildSearchQuery("coffee")); // すべて標準値
console.log(buildSearchQuery("tea", 3)); // ページだけ指定
console.log(buildSearchQuery("juice", 2, 50)); // すべて指定