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

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

部分関数（Partial Function）とは、既存の関数を引数として受け取り、それに加えて別の型の引数も同時に受け取れるようにする仕組みです。まず渡された引数の一部を使い、残りの引数を受け取る新しい関数を返します。そして、返された関数が呼び出されるときに、あらかじめ固定しておいた引数とそのときに渡された引数をすべて組み合わせて、元の親関数が実行されます。

この手法は「部分適用（Partial Application）」とも呼ばれ、関数型プログラミングの基本的なテクニックのひとつです。共通する引数を先に束縛しておくことで、処理の再利用性やコードの可読性を高めることができます。

コード例

以下は、JavaScriptで部分関数を実装したサンプルコードです。

<!DOCTYPE html>
<html lang="en">
<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 {
        font-size: 18px;
        font-weight: 500;
        color: rebeccapurple;
    }
</style>
</head>
<body>
<h1>Partial function in JavaScript</h1>
<div class="result"></div>
<button class="Btn">CLICK HERE</button>
<h3>
Click on the above button to see partial function invocation
</h3>
<script>
    let resultEle = document.querySelector(".result");
    function partialFunction(f) {
        return function (a) {
            return function (b) {
                return f(a, b);
            };
        };
    }
    function multiply(a, b) {
        return a * b;
    }
    document.querySelector(".Btn").addEventListener("click", () => {
        resultEle.innerHTML = "partialFunction(multiply) = " + partialFunction(multiply) + "<br>";
        resultEle.innerHTML += "partialFunction(multiply)(22) = " + partialFunction(multiply)(22) + "<br>";
        resultEle.innerHTML += "partialFunction(multiply)(22)(33) = " + partialFunction(multiply)(22)(33) + "<br>";
    });
</script>
</body>
</html>

コードの解説

  • partialFunction(multiply)：関数 multiply を受け取り、まだ引数が確定していないため関数オブジェクトがそのまま表示されます。
  • partialFunction(multiply)(22)：最初の引数 22 が固定され、次の引数を待つ新しい関数が返されます。
  • partialFunction(multiply)(22)(33)：ここでようやく両方の引数がそろい、内部で multiply(22, 33) が実行され、結果の 726 が表示されます。

出力結果

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

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

「CLICK HERE」ボタンをクリックすると −

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

  1. JavaScriptの関数式（Function Expression）とは？特徴と使い方を解説

    JavaScriptにおける関数式（Function Expression）とは、関数を変数に代入して定義する方法のことです。代入された関数は、その変数名を使って後から呼び出すことができます。 関数式の主な特徴 関数を変数に格納し、変数名を指定して呼び出せる 通常の関数宣言（function declaration）と異なり、ホイスティング（巻き上げ）が行われないため、定義よりも前に呼び出すことはできない 多くの場合、名前を持たない「無名関数（匿名関数）」として定義される コールバック関数や即時実行関数（IIFE）など、さまざまな場面で活用できる この「ホイスティングされない」という点が重

  2. JavaScriptのクロージャとは？仕組みと実装例をわかりやすく解説

    クロージャとはJavaScriptにおけるクロージャ（Closure）とは、外側の関数の実行が完了して値を返した後であっても、内側の関数から外側の関数のスコープ（変数）にアクセスできる仕組みのことです。言い換えれば、内側の関数は、外側の関数の変数に対して常にアクセスできるということです。この性質を活用することで、データを外部から直接操作されないように隠蔽したり、関数の呼び出し間で状態を保持する処理を実現したりすることが可能になります。クロージャのサンプルコード以下は、JavaScriptでクロージャを使用した具体的なコード例です。ボタンをクリックすると、クロージャによって保持された値を使って2