JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptで関数の引数を省略可能にする方法【デフォルト引数の使い方】

JavaScriptで関数に省略可能な引数（オプション引数）を定義したい場合は、ES6から導入された「デフォルト引数」を使います。デフォルト引数を設定しておくと、呼び出し側でその引数が渡されなかった場合に、あらかじめ指定した初期値が自動的に適用されます。

デフォルト引数の基本構文

仮引数の後ろに「= 初期値」と記述するだけで、その引数は省略可能になります。

function 関数名(必須の引数, 省略可能な引数 = デフォルト値) {
  // 処理
}

サンプルコード

次のコードでは、増分値 inc のデフォルト値を「1」に設定しています。第2引数を指定した場合と、省略した場合の両方の動作を確認できます。

<html>
<body>
<script>
// inc のデフォルト値は 1 に設定
function inc(val1, inc = 1) {
  return val1 + inc;
}
document.write(inc(10, 10)); // 第2引数を指定 → 20

document.write("<br>");

document.write(inc(10));     // 第2引数を省略 → 11
</script>
</body>
</html>

実行結果

20
11

解説

  • inc(10, 10)：第2引数に「10」が明示的に渡されているため、val1 + inc = 10 + 10 = 20 が出力されます。
  • inc(10)：第2引数が省略されたため、デフォルト値「1」が適用され、10 + 1 = 11 が出力されます。

このようにデフォルト引数を使えば、引数を渡すかどうかを呼び出し側で柔軟に選択でき、コードもシンプルで読みやすくなります。以前は関数内で if (inc === undefined) { inc = 1; } のように判定する必要がありましたが、デフォルト引数の登場によってその手間が不要になりました。

  1. JavaScriptのPromiseとは？非同期処理の基本をわかりやすく解説

    JavaScriptのPromiseとは？Promise（プロミス）は、JavaScriptで非同期処理を扱うためのオブジェクトです。Promiseが生成された時点では、最終的な結果の値はまだ確定していません。処理が完了した将来のタイミングで、成功または失敗の結果を受け取ることができます。これにより、APIからのデータ取得やファイル読み込みなど、時間のかかる処理を効率的に記述できます。Promiseの3つの状態Promiseは、必ず以下の3つの状態のいずれかを持ちます。pending（待機）：初期状態。処理がまだ完了していない状態です。fulfilled（履行）：処理が正常に完了し、結果の値が

  2. JavaScriptの部分関数（Partial Function）とは？仕組みと実装例をわかりやすく解説

    部分関数（Partial Function）とは、既存の関数を引数として受け取り、それに加えて別の型の引数も同時に受け取れるようにする仕組みです。まず渡された引数の一部を使い、残りの引数を受け取る新しい関数を返します。そして、返された関数が呼び出されるときに、あらかじめ固定しておいた引数とそのときに渡された引数をすべて組み合わせて、元の親関数が実行されます。 この手法は「部分適用（Partial Application）」とも呼ばれ、関数型プログラミングの基本的なテクニックのひとつです。共通する引数を先に束縛しておくことで、処理の再利用性やコードの可読性を高めることができます。 コード例 以下