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

JavaScriptでパラメータのオブジェクトを関数に渡すエレガントな方法とは？

JavaScriptでは、複数の値を個別の引数として渡す代わりに、1つのオブジェクトにまとめて関数へ渡すことができます。さらに分割代入（destructuring）を組み合わせれば、コードをより簡潔で読みやすくできます。

基本的な考え方

関数の仮引数を { a, b, c, d } のように波括弧で定義すると、渡されたオブジェクトから対応するプロパティが自動的に取り出されます。これにより、引数の順序を気にせず、名前ベースで明確に値を渡せるのが大きなメリットです。

サンプルコード

以下は、4つのプロパティを持つオブジェクトを関数に渡し、その合計値を表示する例です。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
    body {
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    }
    .result,.sample {
        font-size: 18px;
        font-weight: 500;
        color: rebeccapurple;
    }
    .sample {
        color: red;
    }
</style>
</head>
<body>
<h1>パラメータのオブジェクトを関数に渡す</h1>
<div class="result"><br /></div>
<button class="Btn">クリックしてください</button>
<h3>上のボタンをクリックすると、4つのオブジェクトの値を関数に渡して合計します</h3>
<script>
    let resEle = document.querySelector(".result");
    let BtnEle = document.querySelector(".Btn");

    // オブジェクトを分割代入で受け取る
    function addNum({ a, b, c, d }) {
        return a + b + c + d;
    }

    let obj = {
        a: 22,
        b: 33,
        c: 7,
        d: 9,
    };

    BtnEle.addEventListener("click", () => {
        resEle.innerHTML = " パラメータの合計 = " + addNum(obj);
    });
</script>
</body>
</html>

実行結果

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

JavaScriptでパラメータのオブジェクトを関数に渡すエレガントな方法とは？

「クリックしてください」ボタンを押すと、オブジェクトの各値（22 + 33 + 7 + 9）が加算され、合計の「71」が表示されます。

JavaScriptでパラメータのオブジェクトを関数に渡すエレガントな方法とは？

この方法のメリット

  • 可読性の向上： 値が何を意味しているのか、プロパティ名を見れば一目でわかります。
  • 順序に依存しない： 通常の引数と異なり、渡す順番を間違える心配がありません。
  • 拡張性が高い： 新しいパラメータを追加しても、既存の呼び出しコードへの影響を最小限に抑えられます。
  • デフォルト値も設定可能： { a = 0, b = 0 } のように書けば、未指定のプロパティに初期値を与えられます。

パラメータが多い関数や、オプション設定を扱う関数では、オブジェクト渡し＋分割代入は特に有効なテクニックです。

  1. JavaScriptでコールバック関数にパラメータを渡す方法をわかりやすく解説

    はじめにJavaScriptでは、コールバック関数に対して直接引数を指定することができません。そこで一般的に使われるのが、「コールバック関数を別の関数（高階関数）の引数として受け取り、その内部で必要なパラメータとともに呼び出す」という手法です。本記事では、実際のコード例をもとに、コールバック関数へパラメータを渡す具体的な方法を解説します。サンプルコード<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name=

  2. JavaScriptで関数をコールバックとして渡す方法

    JavaScriptで関数をコールバックとして渡すJavaScriptでは、関数は第一級オブジェクト（ファーストクラスオブジェクト）として扱われるため、他の値と同じように変数に代入したり、引数として別の関数に渡したりすることができます。このように引数として渡され、後から呼び出される関数をコールバック関数と呼びます。コールバックを活用することで、処理の柔軟性が高まり、再利用可能なコードを書くことができます。以下は、add2() 関数を multiply9() 関数のコールバックとして渡すサンプルコードです。コード例<!DOCTYPE html> <html lang="