先生と生徒の会話形式で理解しよう

生徒

「先生、JavaScriptで関数を作るときに、引数に値を渡さなかったらどうなるんですか？」

先生

「渡さなかった引数はundefinedになります。そうすると、関数の中で困ることもありますね。」

生徒

「じゃあ、引数がないときに自動的に決まった値を使う方法ってありますか？」

先生

「ありますよ！それが『デフォルト引数』という仕組みです。関数の引数に初めから決まった値を設定しておけるんです。」

生徒

「どうやって書くんですか？具体的に見せてください！」

先生

「はい、それでは基本からわかりやすく説明しますね！」

1. デフォルト引数とは？

デフォルト引数（default parameters）とは、関数の引数に値が渡されなかったときに、自動的に使われる初期値のことです。

例えば、関数を呼ぶときに「何も指定しなかったら自動的にこの値を使う」という約束を作れます。

これにより、コードを書くときに毎回全ての引数を指定しなくてもよくなり、便利で間違いも減ります。

2. デフォルト引数の基本的な書き方

JavaScriptの関数でデフォルト引数を使うには、引数名の後に「= 値」を書くだけです。


function greet(name = "ゲスト") {
  console.log(name + "さん、こんにちは！");
}

greet();          // ゲストさん、こんにちは！
greet("太郎");    // 太郎さん、こんにちは！

上の例では、greet関数のname引数に値が渡されなかったら、「ゲスト」が使われます。

3. なぜデフォルト引数が便利なのか？

デフォルト引数を使わないと、引数がない場合はundefinedになり、エラーや思わぬ動作の原因になることがあります。

以前のJavaScriptでは、関数内で自分で値をチェックして、値がなければ初期値を設定するコードを書いていました。


function greet(name) {
  if (name === undefined) {
    name = "ゲスト";
  }
  console.log(name + "さん、こんにちは！");
}

これが面倒でミスも起きやすかったため、デフォルト引数ができてからはコードがずっとシンプルになりました。

4. 複数の引数にデフォルト値を設定する例

デフォルト引数は複数の引数にも使えます。例えば：


function makeGreeting(name = "ゲスト", message = "ようこそ") {
  console.log(name + "さん、" + message + "！");
}

makeGreeting();                         // ゲストさん、ようこそ！
makeGreeting("花子");                   // 花子さん、ようこそ！
makeGreeting("次郎", "お久しぶりです"); // 次郎さん、お久しぶりです！

このように、必要に応じて引数を省略して使うこともできます。

5. デフォルト引数に他の引数や関数の結果を使う

デフォルト値には、他の引数の値や関数の結果も使えます。


function greet(name = "ゲスト", message = name + "さん、こんにちは") {
  console.log(message);
}

greet();            // ゲストさん、こんにちは
greet("太郎");      // 太郎さん、こんにちは

ここではmessageのデフォルト値がnameを使って動的に作られています。

6. undefinedとnullの違いに注意

デフォルト引数は、関数呼び出し時に引数がundefinedのときだけ有効です。

引数にnullを渡すと、デフォルト値は使われません。nullは「値がない」という意味ですが、undefinedとは違います。


function greet(name = "ゲスト") {
  console.log(name);
}

greet(undefined);  // ゲスト
greet(null);       // null

つまり、nullは明示的に「値なし」を渡したことになります。

7. 古い書き方との違い

昔のJavaScriptでは、引数に値がなければ自分で初期値を設定する方法が一般的でしたが、今はデフォルト引数を使う方が簡単でわかりやすいです。

古い書き方は以下の通りです：


function greet(name) {
  name = name || "ゲスト";
  console.log(name + "さん、こんにちは！");
}

この方法はnameが""や0などの偽の値でもデフォルトが使われてしまう問題があります。

8. まとめないけどポイント

デフォルト引数は関数の引数に最初から決まった値を設定する仕組み
引数を省略したときにundefinedならデフォルト値が使われる
複数の引数にもデフォルト値を設定できる
デフォルト値には他の引数や関数の結果を使うことも可能
nullを渡すとデフォルト値は使われないので注意
昔の方法よりコードがシンプルでわかりやすくなる

JavaScriptのデフォルト引数は、関数を使いやすくし、ミスを減らす便利な機能です。ぜひ使いこなしてみてください！

まとめ

ここまでJavaScriptのデフォルト引数（Default Parameters）について詳しく解説してきました。モダンなJavaScript開発において、関数の柔軟性を高めつつ、予期せぬエラーやバグを防ぐために、デフォルト引数の理解は欠かせません。

デフォルト引数の本質的なメリット

プログラムを書いていると、「特定の状況下ではこの値を使い、それ以外は決まった値を適用したい」という場面が多々あります。デフォルト引数が導入される前のES5以前の時代では、論理演算子の||（OR演算子）やtypeofを用いた厳密なチェックを関数内部で行う必要がありました。しかし、それではコードの行数が増え、可読性が低下するという課題がありました。

現代のJavaScript（ES6以降）では、引数の定義部分でname = "ゲスト"のように記述するだけで、シンプルに初期値を定義できます。これにより、関数のインターフェース（外部からの使い勝手）が明確になり、他のエンジニアが見たときにも「この引数は省略可能なのだな」と一目で判断できるようになります。

実戦で使える応用テクニック

デフォルト引数は単なる文字列や数値だけでなく、オブジェクトや配列、さらには関数の実行結果を割り当てることも可能です。例えば、ECサイトの割引計算などで、特定の期間だけ異なる計算式をデフォルトとして適用したい場合に非常に有効です。

また、TypeScriptにおいてもデフォルト引数は非常に強力に機能します。デフォルト値を設定することで、型推論が働き、明示的に型を指定しなくても適切な型として扱われるメリットがあります。

サンプルプログラム：高度な活用例

ここでは、複数の引数にデフォルト値を設定し、さらに条件分岐を組み合わせたより実戦に近いサンプルコードを紹介します。商品の税込み価格を計算する関数を例に見てみましょう。


/**
 * 商品の合計金額を計算する関数
 * @param {number} price - 商品の単価
 * @param {number} quantity - 個数（デフォルトは1）
 * @param {number} taxRate - 消費税率（デフォルトは0.1）
 */
function calculateTotal(price, quantity = 1, taxRate = 0.1) {
  const subtotal = price * quantity;
  const total = subtotal * (1 + taxRate);
  
  console.log("単価: " + price + "円");
  console.log("個数: " + quantity + "個");
  console.log("合計（税込）: " + Math.floor(total) + "円");
}

// すべての引数を渡す場合
calculateTotal(1000, 3, 0.08);

// 第二引数以降を省略する場合
calculateTotal(500);

// undefinedを渡してデフォルト値を強制する場合
calculateTotal(2000, undefined, 0.15);

このコードの実行結果は以下のようになります。


単価: 1000円
個数: 3個
合計（税込）: 3240円
単価: 500円
個数: 1個
合計（税込）: 550円
単価: 2000円
個数: 1個
合計（税込）: 2300円

注意すべきエッジケース

記事の中でも触れましたが、nullとundefinedの扱いの違いは、中級者以上の開発者でもたまに混同してしまうポイントです。デフォルト引数は「値が渡されなかった（undefinedだった）」ときのみ発動します。データベースから取得した値がnull（明示的な空値）である場合、デフォルト引数は適用されず、そのままnullとして計算が進んでしまい、数値計算であれば0として扱われたり、エラーになったりする可能性があります。

また、デフォルト引数は左から順に評価されるため、先に定義した引数を後の引数のデフォルト値として利用することができます。これを「Temporal Dead Zone（一時的死域）」に配慮した設計と呼びますが、順序を逆にするとエラーになるため注意が必要です。

TypeScriptでの記述例

最近の開発現場で主流となっているTypeScriptでの書き方も確認しておきましょう。クラスのメソッドやアロー関数でも同様に利用できます。


interface UserConfig {
  theme: string;
  isNofiticationEnabled: boolean;
}

const initializeApp = (appName: string, version: string = "1.0.0"): void => {
  console.log(`${appName} ver.${version} を起動しています...`);
};

initializeApp("MyAwesomeApp"); 
// 出力: MyAwesomeApp ver.1.0.0 を起動しています...

先生と生徒の振り返り会話

生徒

「先生、まとめまで読んでみて、デフォルト引数の便利さがよく分かりました！これを使うと、わざわざ関数の中で if (x === undefined) って書かなくていいから、見た目がすごくスッキリしますね。」

先生

「その通りです。コードがスッキリするということは、それだけ読みやすくなり、他の人がメンテナンスしやすくなるということなんですよ。プログラミングにおいて『可読性』は非常に重要な指標です。」

生徒

「はい！あと、nullを渡したときはデフォルト値にならないっていうのが、最初は意外でした。JavaScriptって、そのあたりが結構厳密なんですね。」

先生

「良いところに気づきましたね。undefinedは『値が定義されていない状態』、nullは『値がないという状態を明示的に示している』という違いがあるんです。デフォルト引数はあくまで『定義されていない』ときの救済措置だと考えると分かりやすいでしょう。」

生徒

「なるほど！それと、デフォルト値に関数の実行結果を入れることもできるって教えてもらいましたが、それって重い処理を入れると毎回実行されちゃうんですか？」

先生