JavaScriptの関数オーバーロードとは？仕組みと代替方法をわかりやすく解説

結論から言うと、JavaScriptは関数オーバーロード（Function Overloading）をネイティブにサポートしていません。JavaやC++など他の言語では、同じ名前でも引数の型や数が異なる関数を複数定義できますが、JavaScriptではこの動作が異なります。

同じ名前の関数を複数定義するとどうなるか

例えば、同じ名前で引数の異なる2つの関数を定義してみます。

function funcONE(x, y) {
   return x * y;
}
function funcONE(z) {
   return z;
}

このコード自体はエラーになりません。しかし、期待した結果は得られません。後から定義された関数が先の定義を上書きしてしまうためです。

実際の呼び出し結果

// 5 が出力される
funcONE(5);

// 30 ではなく 5 が出力される
funcONE(5, 6);

funcONE(5, 6)を呼び出しても、x * yを返す最初の関数はすでに存在せず、引数をそのまま返す2番目の関数が実行されるため、結果は5になります。引数が余分に渡されても、JavaScriptはエラーを発生させずに単純に無視します。

なぜこのような挙動になるのか

JavaScriptでは、関数もオブジェクトの一種であり、同じ名前の関数を宣言すると、変数の再代入と同じように最後に定義された関数が有効になります。関数は引数のシグネチャ（型や個数）によって区別されないため、オーバーロードの仕組みが成立しないのです。

関数オーバーロードを実現する代替手段

オーバーロードに近い動作を実現したい場合は、以下の方法が一般的です。

1. argumentsオブジェクトで引数の数を判定する

function funcONE() {
   if (arguments.length === 1) {
      return arguments[0];
   } else if (arguments.length === 2) {
      return arguments[0] * arguments[1];
   }
}

funcONE(5);    // 5
funcONE(5, 6); // 30

2. デフォルト引数やundefinedチェックを活用する

function funcONE(x, y) {
   if (y === undefined) {
      return x;
   }
   return x * y;
}

まとめ

JavaScriptは関数オーバーロードをサポートしておらず、同名の関数を複数定義すると最後に定義したものが優先されます。引数の数や型に応じて処理を変えたい場合は、argumentsオブジェクトやデフォルト引数、undefinedチェックなどを組み合わせて実装するのが定番のアプローチです。