JavaScriptデフォルト引数の基礎と実践的な使い方：undefined時の挙動や注意点を解説

2026年5月18日

関数

JavaScriptのコードを記述する際、関数の引数にデフォルト値を設定することは、今や開発効率を高めるための必須テクニックとなっています。

以前のJavaScriptでは引数の初期化に手間がかかる場面も多かったですが、現在の仕様では非常にシンプルかつ安全に記述できるようになりました。

本記事では、JavaScriptにおけるデフォルト引数の基礎知識から、実務で役立つ応用的なテクニックまでを詳しく解説します。

特に、undefinedやnullが渡された際の挙動の違いは、バグを防ぐためにも正確に理解しておく必要があります。

モダンな開発環境において、より堅牢で読みやすいコードを書くためのポイントを学んでいきましょう。

目次 [ close ]

JavaScriptデフォルト引数の基礎知識

デフォルト引数（Default Parameters）とは、関数を呼び出す際に引数が渡されなかった場合や、値が指定されなかった場合に使用される初期値のことです。

ES6（ECMAScript 2015）以降、この機能が導入されたことで、関数の柔軟性が飛躍的に向上しました。

まずは、基本的な構文を確認してみましょう。

JavaScript

// デフォルト引数を使用した関数の定義
function greet(name = "ゲスト") {
  console.log(`こんにちは、${name}さん！`);
}

// 引数を渡さない場合
greet();

// 引数を渡す場合
greet("太郎");

実行結果

こんにちは、ゲストさん！
こんにちは、太郎さん！

このように、引数の後ろに=を使って値を指定するだけで、デフォルト値を設定できます。

もしデフォルト引数を使用しなかった場合、値が渡されない変数は自動的にundefinedとなります。

かつては関数内部でif文や論理演算子を使って初期値を設定していましたが、現在の記述方法であれば一目でデフォルト値が何であるかを把握できるようになります。

従来の記述方法との比較

デフォルト引数が導入される前は、以下のような記述が一般的でした。

JavaScript

function oldGreet(name) {
  // 論理和演算子を使った初期化
  var userName = name || "ゲスト";
  console.log("こんにちは、" + userName + "さん！");
}

この記述方法には、いくつかのリスクが存在します。

論理和演算子（||）は、左辺が「偽（falsy）」である場合に右辺を返します。

JavaScriptにおいて、空文字列（""）や数値の0、falseなどはすべて偽として判定されます。

そのため、例えば名前として空文字列をあえて渡した場合でも、意図せず「ゲスト」というデフォルト値が適用されてしまうという問題がありました。

最新のデフォルト引数構文を使用すれば、このような意図しない値の書き換えを防ぐことが可能です。

undefinedとnullにおける挙動の違い

JavaScriptのデフォルト引数において、最も注意すべき点は「どのような値が渡された時にデフォルト値が適用されるか」というルールです。

結論から述べると、デフォルト引数は引数が「undefined」である場合にのみ適用されます。

undefinedが渡された場合

関数を呼び出す際に何も渡さない場合、または明示的にundefinedを渡した場合、設定したデフォルト値が使用されます。

JavaScript

function test(value = "デフォルト") {
  console.log(value);
}

test(undefined);

実行結果

デフォルト

JavaScriptにおいて、undefinedは「値が定義されていない状態」を指すため、システムはデフォルト値で補完する必要があると判断します。

nullが渡された場合

一方で、nullを渡した場合にはデフォルト引数は適用されません。

JavaScript

function test(value = "デフォルト") {
  console.log(value);
}

test(null);

実行結果

null

nullは「値が存在しない」ということを明示的に示す「オブジェクト」として扱われます。

開発者が意図的に「何もない状態」を渡していると解釈されるため、JavaScriptエンジンはデフォルト値を適用しません。

この挙動の差は、データ層から取得した値がnullになりやすいデータベース連携プログラムなどで重要になります。

意図せずnullが混入し、デフォルト値が機能しないことでエラーが発生するケースは非常に多いため、データの入力元がどのような値を返すかを常に意識する必要があります。

デフォルト引数に指定できる値と応用

デフォルト引数には、単なる文字列や数値だけでなく、さまざまな式を指定することが可能です。

この柔軟性を活かすことで、動的に初期値を決定する洗練された関数を作成できます。

別の引数を参照する

デフォルト引数の設定では、その引数よりも左側（先）に定義された引数を参照することができます。

JavaScript

function calculateTax(price, taxRate = 0.1, total = price * (1 + taxRate)) {
  return total;
}

console.log(calculateTax(1000));

実行結果

上記の例では、第3引数のtotalが、第1引数と第2引数を利用して計算されています。

ただし、右側の引数を左側の引数で参照することはできません。

これは、JavaScriptが引数を左から右へと評価していくためであり、未定義の変数を参照しようとすると「Temporal Dead Zone（一時的死域）」の影響でエラー（ReferenceError）となります。

関数の戻り値をデフォルト値にする

デフォルト引数として、別の関数の実行結果を指定することも可能です。

JavaScript

function generateId() {
  console.log("IDを生成しました");
  return Math.random().toString(36).slice(-8);
}

function createUser(name, id = generateId()) {
  return { name, id };
}

console.log(createUser("田中"));
console.log(createUser("鈴木", "custom-id-123"));

実行結果

IDを生成しました
{ name: "田中", id: "..." }
{ name: "鈴木", id: "custom-id-123" }

ここで重要なのは、デフォルト値を生成する関数は「引数が必要になったタイミング」で初めて実行されるという点です。

引数が渡された場合には、デフォルト値のための関数は実行されません。

これにより、不要な計算負荷を抑えつつ、柔軟な初期化ロジックを組み込むことができます。

分割代入とデフォルト引数の組み合わせ

現代のJavaScript開発、特にReactやVue.jsといったライブラリを使用する環境では、オブジェクトの分割代入とデフォルト引数を組み合わせる手法が頻用されます。

これにより、オプション設定を持つ関数を非常に分かりやすく記述できます。

オブジェクトの分割代入におけるデフォルト値

関数の引数がオブジェクトである場合、プロパティごとにデフォルト値を設定できます。

JavaScript

function setupChart({ width = 500, height = 300, color = "blue" } = {}) {
  console.log(`サイズ: ${width}x${height}, 色: ${color}`);
}

setupChart({ width: 800 });
setupChart();

実行結果

サイズ: 800x300, 色: blue
サイズ: 500x300, 色: blue

ここで注目すべきは、末尾にある= {}という記述です。

これがない場合、setupChart()のように引数自体を省略して呼び出すと、「undefinedからプロパティを読み取れない」というエラーが発生します。

「引数全体のデフォルト値」と「プロパティごとのデフォルト値」を二重で設定することで、非常に堅牢な関数インターフェースを実現できます。

実務における注意点とベストプラクティス

デフォルト引数は便利ですが、使い方を誤るとコードの可読性を下げたり、バグの原因になったりすることもあります。

開発現場で意識すべきポイントを整理しました。

1. デフォルト引数は引数リストの最後に配置する

原則として、デフォルト引数を持つ項目は引数リストの後半に記述するようにしましょう。

JavaScriptでは引数を飛ばして渡すことができないため、最初の方にデフォルト引数があると、呼び出し時に不便が生じます。

JavaScript

// 望ましくない例
function badFunction(a = 1, b) {
  return a + b;
}

// bだけに値を渡したい場合でも、aにundefinedを渡す必要がある
badFunction(undefined, 10);

このような設計は呼び出し側を混乱させるため、必須の引数を先に、任意の引数を後に配置するのが鉄則です。

2. 副作用のあるデフォルト値に注意する

デフォルト引数で外部変数を操作したり、状態を変更したりする関数を呼び出すのは避けましょう。

引数が渡されるかどうかでプログラムの外部状態が変わってしまうと、デバッグが極めて困難になります。

デフォルト値はあくまで「値の補完」にとどめ、純粋な値や副作用のない計算式を指定するのがベストです。

3. 型の整合性を維持する

デフォルト値には、その引数が本来期待する型と同じ型の値を設定してください。

例えば、数値を期待する引数のデフォルト値を空文字列にするような設計は、後続の計算処理でバグを引き起こします。

TypeScriptなどを併用していないプロジェクトでは、この型の一貫性がプログラムの品質を左右します。

デフォルト引数の活用シーンまとめ

デフォルト引数がどのような場面で役立つか、主なケースを表にまとめました。

活用シーン	メリット
APIリクエストのオプション設定	タイムアウト時間やリトライ回数の標準値を安全に定義できる。
UIコンポーネントのProps	ボタンの色やサイズなど、指定がない場合の標準デザインを保証できる。
数学的な計算関数	基準値（base）などを設定することで、呼び出し時のコードを簡略化できる。
再帰関数	初回呼び出し時のカウンター初期値を、関数の外部から隠蔽できる。

このように、デフォルト引数は単なるコードの短縮手段ではなく、「関数の意図を明確にする」ための重要なツールであることがわかります。