JavaScript でコンテキスト付きで関数を呼び出す

はじめに

この実験では、JavaScript でクロージャを使ってコンテキスト付きで関数を呼び出す方法を探ります。キーと一連の引数を関数に渡し、与えられたコンテキストでそれを呼び出す方法を学びます。実際の例を通じて、この技術がコードを簡略化し、読みやすくするためにどのように使われるかを見ていきます。

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL javascript(("JavaScript")) -.-> javascript/BasicConceptsGroup(["Basic Concepts"]) javascript(("JavaScript")) -.-> javascript/AdvancedConceptsGroup(["Advanced Concepts"]) javascript(("JavaScript")) -.-> javascript/ToolsandEnvironmentGroup(["Tools and Environment"]) javascript/BasicConceptsGroup -.-> javascript/variables("Variables") javascript/BasicConceptsGroup -.-> javascript/data_types("Data Types") javascript/BasicConceptsGroup -.-> javascript/arith_ops("Arithmetic Operators") javascript/BasicConceptsGroup -.-> javascript/comp_ops("Comparison Operators") javascript/BasicConceptsGroup -.-> javascript/array_methods("Array Methods") javascript/AdvancedConceptsGroup -.-> javascript/async_prog("Asynchronous Programming") javascript/AdvancedConceptsGroup -.-> javascript/higher_funcs("Higher-Order Functions") javascript/AdvancedConceptsGroup -.-> javascript/spread_rest("Spread and Rest Operators") javascript/ToolsandEnvironmentGroup -.-> javascript/debugging("Debugging") subgraph Lab Skills javascript/variables -.-> lab-28185{{"コンテキスト付きで関数を呼び出す"}} javascript/data_types -.-> lab-28185{{"コンテキスト付きで関数を呼び出す"}} javascript/arith_ops -.-> lab-28185{{"コンテキスト付きで関数を呼び出す"}} javascript/comp_ops -.-> lab-28185{{"コンテキスト付きで関数を呼び出す"}} javascript/array_methods -.-> lab-28185{{"コンテキスト付きで関数を呼び出す"}} javascript/async_prog -.-> lab-28185{{"コンテキスト付きで関数を呼び出す"}} javascript/higher_funcs -.-> lab-28185{{"コンテキスト付きで関数を呼び出す"}} javascript/spread_rest -.-> lab-28185{{"コンテキスト付きで関数を呼び出す"}} javascript/debugging -.-> lab-28185{{"コンテキスト付きで関数を呼び出す"}} end

JavaScript でコンテキスト付きで関数を呼び出す方法

Node.js でコードを実行するには、ターミナル/SSH を開いて node と入力します。JavaScript で特定のコンテキストと一連の引数で関数を呼び出したい場合は、クロージャを使うことができます。以下がその方法です。

key と一連の args をパラメータとして受け取り、context パラメータを持つ新しい関数を返す call という名前の関数を定義します。

const call =
  (key, ...args) =>
  (context) =>
    context[key](...args);

call 関数を使って、数値の配列に対して map 関数を呼び出します。この例では、map 関数は配列の各数値を 2 倍にします。

Promise.resolve([1, 2, 3])
  .then(call("map", (x) => 2 * x))
  .then(console.log); // [ 2, 4, 6 ]

call 関数を特定のキー（たとえば map）にバインドして、数値の配列に対して map 関数を呼び出すこともできます。

const map = call.bind(null, "map");
Promise.resolve([1, 2, 3])
  .then(map((x) => 2 * x))
  .then(console.log); // [ 2, 4, 6 ]

call 関数を使うことで、特定のコンテキストと引数のセットで任意の関数を簡単に呼び出すことができます。

まとめ

おめでとうございます！コンテキスト付きで関数を呼び出す実験を完了しました。技術力を向上させるために、LabEx でさらに実験を行って練習してください。