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

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

JavaScriptにおける無名関数（匿名関数）は、名前を持たない関数であり、変数に代入したり、イベントリスナーのコールバックとして利用したりする際に非常に便利です。通常の関数と同様に、無名関数にも引数を渡すことができます。ここでは、具体的なコード例を通じてその方法を解説します。

無名関数への引数の渡し方

無名関数に引数を渡す基本的な方法は、関数を変数に代入し、その変数を通じて呼び出す際に引数を指定することです。以下は、ボタンをクリックすると無名関数が呼び出され、引数を受け取って計算結果を表示するサンプルコードです。

サンプルコード

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>無名関数に引数を渡す</title>
<style>
   body {
      font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
   }
   .result {
      font-weight: 500;
      font-size: 20px;
      color: blueviolet;
   }
</style>
</head>
<body>
<h1>無名関数に引数を渡す</h1>
<div class="result"></div>
<br />
<button class="Btn">ここをクリック</button>
<h3>上のボタンをクリックすると、無名関数が呼び出され、引数が渡されます</h3>
<script>
   let BtnEle = document.querySelector(".Btn");
   let resEle = document.querySelector(".result");
   let add = function (a, b) {
      return a + b;
   };
   BtnEle.addEventListener("click", (event) => {
      resEle.innerHTML = "22と19の合計 = " + add(22, 19);
   });
</script>
</body>
</html>

コードの解説

このコードのポイントは以下のとおりです。

  • 無名関数の定義：let add = function (a, b) { return a + b; }; のように、名前のない関数を変数 add に代入しています。この関数は2つの引数 a と b を受け取り、その合計を返します。
  • 引数を渡して呼び出し：ボタンのクリックイベント内で add(22, 19) と記述することで、無名関数に引数 22 と 19 を渡して呼び出しています。
  • 結果の表示：計算結果は resEle.innerHTML を使って画面に表示されます。

実行結果

ページを開いた時点では何も表示されていませんが、「ここをクリック」ボタンをクリックすると、以下のように計算結果が表示されます。

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

「ここをクリック」ボタンをクリックした後 −

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

補足：即時実行関数（IIFE）で引数を渡す方法

無名関数は、定義と同時に実行する「即時実行関数式（IIFE）」としても利用できます。この場合も引数を渡すことが可能です。

(function (name) {
   console.log("こんにちは、" + name + "さん！");
})("太郎"); // コンソールに「こんにちは、太郎さん！」と出力される

このように、無名関数への引数の渡し方をマスターすると、コールバック処理やイベント処理など、JavaScriptのさまざまな場面で柔軟なコードを書けるようになります。

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

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

  2. JavaScriptの匿名ラッパー関数(IIFE)とは?使い方を徹底解説

    匿名ラッパー関数(Anonymous Wrapper Function)は、コードスニペットやJavaScriptライブラリ、個々の関数などを包み込むために使われる手法です。コードの可視性や名前空間(namespace)を制御することで、他のライブラリや外部スクリプトとの名前の衝突・競合を防ぐことができます。 この目的のために広く利用されているのが、IIFE(即時実行関数式：Immediately Invoked Function Expressions)です。IIFEは定義されたその場で即座に実行される関数式であり、関数内部で宣言された変数は外部からアクセスできないため、グローバル名前空間を