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

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

はじめに

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: 20px;
      font-weight: 500;
      color: blueviolet;
   }
</style>
</head>
<body>
<h1>Passing parameters to callback functions</h1>
<div class="result"></div>
<button class="Btn">CLICK HERE</button>
<h3>Click on the above button to pass parameter to callback function add2 and call it</h3>
<script>
   let resEle = document.querySelector(".result");
   function add2(a) {
      return a + 2;
   }
   function multiply9(fn, num) {
      return fn(num) * 9;
   }
   document.querySelector(".Btn").addEventListener("click", () => {
      resEle.innerHTML = "The number returned = " + multiply9(add2, 8);
   });
</script>
</body>
</html>

コードの解説

このサンプルコードは、次のような仕組みで動作しています。

  • add2関数：引数 a を受け取り、「a + 2」の計算結果を返すシンプルな関数です。
  • multiply9関数：関数 fn と数値 num の2つの引数を受け取ります。内部で fn(num) としてコールバック関数をパラメータ付きで呼び出し、その戻り値に9を掛けて返します。
  • イベントリスナー：ボタンをクリックすると、multiply9(add2, 8) が実行されます。まず add2(8) が評価されて「10」となり、さらに9倍されて「90」が画面に表示されます。

このように、コールバック関数そのものを引数として渡し、実行時に必要なパラメータを与えることで、柔軟で再利用しやすいコードを実現できます。

実行結果

ブラウザでページを開くと、次のように表示されます。

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

「CLICK HERE」ボタンをクリックすると、計算結果が出力エリアに表示されます。

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

まとめ

コールバック関数にパラメータを渡したい場合は、関数を引数として受け取る高階関数を経由するのが基本です。このパターンは、配列の map や filter などの標準メソッドでも広く使われている重要なテクニックなので、ぜひマスターしておきましょう。

  1. JavaScriptのアロー関数（太い矢印関数）とは？基本構文と使い方をわかりやすく解説

    アロー関数（太い矢印関数）とは 」という矢印のような記号を使うことから、「太い矢印関数（Fat Arrow Function）」とも呼ばれています。 従来のfunctionキーワードを使った定義と比べて記述が大幅に簡潔になるほか、thisの扱いがレキシカル（語彙的）になるという特徴があり、現代のJavaScript開発では広く使われています。 基本構文 アロー関数の基本構文は以下のとおりです。 { } 」を記述するだけです。また、処理が1行で済む場合は、波括弧（{ }）とreturn文を省略して、さらに短く書くこともできます。 a + b; サンプルコード 次のコードは、JavaScr

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

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