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

JavaScript関数で名前付き引数を使う方法｜分割代入で簡単に実現するテクニック

JavaScriptにおける名前付き引数とは？

Pythonなどの言語には「名前付き引数（キーワード引数）」という機能が標準で備わっていますが、JavaScriptにはこの機能が組み込まれていません。しかし、オブジェクトの分割代入（Destructuring）を活用することで、名前付き引数と同じ挙動を簡単に実現できます。

基本的な仕組み

関数の引数としてオブジェクトを1つ受け取り、その中から必要なプロパティを分割代入で取り出します。各プロパティにはデフォルト値も同時に指定できるため、引数が省略された場合でもエラーにならず安全に処理できます。

サンプルコード

以下は、オブジェクトを引数として渡し、そのプロパティの合計値を計算して表示する例です。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>JavaScriptの名前付き引数</title>
<style>
    body {
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    }
    .sample, .result {
        font-size: 18px;
        font-weight: 500;
        color: red;
    }
    .result {
        color: rebeccapurple;
    }
</style>
</head>
<body>
<h1>JavaScript関数における名前付き引数</h1>
<div class="sample"></div>
<div class="result"></div>
<button class="Btn">ここをクリック</button>
<h3>
上のボタンをクリックすると、関数を呼び出して上記のオブジェクトを引数として渡します
</h3>
<script>
    let sampleEle = document.querySelector(".sample");
    let resultEle = document.querySelector(".result");
    sampleEle.innerHTML = "{a:22, b:44, c:55, d:99}";
    function add({ a = 0, b = 0, c = 0, d = 0 }) {
        return a + b + c + d;
    }
    document.querySelector(".Btn").addEventListener("click", () => {
        resultEle.innerHTML += "合計 = " + add({ a: 22, b: 44, c: 55, d: 99 });
    });
</script>
</body>
</html>

コードの解説

  • add関数は { a = 0, b = 0, c = 0, d = 0 } という形式で引数を受け取ります。これはオブジェクトの分割代入であり、対応するプロパティが存在しない場合のデフォルト値として 0 が設定されます。
  • ボタンをクリックすると、{ a: 22, b: 44, c: 55, d: 99 } というオブジェクトが add 関数に渡され、4つの値の合計が計算されます。
  • 計算結果は .result 要素に「合計 = 220」として表示されます。

実行結果

上記のコードを実行すると、次のような画面が表示されます。

JavaScript関数で名前付き引数を使う方法｜分割代入で簡単に実現するテクニック

「ここをクリック」ボタンを押すと −

JavaScript関数で名前付き引数を使う方法｜分割代入で簡単に実現するテクニック

画面に「合計 = 220」という計算結果が表示されます。

名前付き引数を使うメリット

  • 可読性の向上： 呼び出し側で各値が何を意味するのかが一目でわかります。
  • 引数の順序に依存しない： プロパティの順番は自由で、不要な引数は省略できます。
  • デフォルト値の設定： 引数ごとに個別のデフォルト値を設定でき、省略時の挙動を制御できます。
  • 拡張性： 後から新しい引数を追加しても、既存の呼び出しコードを壊す心配がありません。

このように、オブジェクトの分割代入を利用すれば、JavaScriptでも名前付き引数と同等の書き方が可能になり、より読みやすく保守しやすいコードを実現できます。

  1. JavaScriptで名前付き引数を実現する方法｜分割代入を使ったサンプルコード付き

    JavaScriptには、Pythonなどの言語に存在するような「名前付き引数（キーワード引数）」の専用構文は用意されていません。しかし、オブジェクトの分割代入（Destructuring）とデフォルト値を組み合わせることで、名前付き引数とまったく同じ挙動を簡単に実現できます。 名前付き引数とは？ 通常のJavaScript関数は、引数を「位置（順番）」で受け取ります。この方式では、引数の数が多い場合に順番を間違えやすく、コードの可読性も低下します。 そこで、オブジェクトを1つだけ引数として渡し、そのプロパティ名で値を指定する方法がよく使われます。こうすることで、引数の順番に依存しない、意図が

  2. JavaScriptで無名関数（匿名関数）に引数を渡す方法をわかりやすく解説

    JavaScriptにおける無名関数（匿名関数）は、名前を持たない関数であり、変数に代入したり、イベントリスナーのコールバックとして利用したりする際に非常に便利です。通常の関数と同様に、無名関数にも引数を渡すことができます。ここでは、具体的なコード例を通じてその方法を解説します。 無名関数への引数の渡し方 無名関数に引数を渡す基本的な方法は、関数を変数に代入し、その変数を通じて呼び出す際に引数を指定することです。以下は、ボタンをクリックすると無名関数が呼び出され、引数を受け取って計算結果を表示するサンプルコードです。 サンプルコード <!DOCTYPE html> <ht