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

JavaScriptの関数リテラルとは？無名関数の定義方法と使い方を実例で解説

関数リテラル（function literal）とは、名前を持たない関数（無名関数・匿名関数）を定義する式のことです。JavaScriptでは、functionキーワードを使ってその場で関数を定義し、変数に代入したり、他の関数に引数として渡したりすることができます。

関数リテラルの基本構文

関数リテラルは「式」であるため、宣言文ではなく値として扱えるのが特徴です。最も基本的な形は以下のとおりです。

var func = function(x, y) {
  return x * y;
};

この例では、2つの引数を受け取って積を返す無名関数を定義し、変数 func に代入しています。このように関数を変数に格納することで、通常の関数と同じように呼び出すことが可能になります。

実装サンプルコード

次のコードは、関数リテラルを使って計算処理を行い、ボタンのクリックで結果を表示するシンプルな例です。

<html>
  <head>
    <script>
      // 関数リテラルを変数funcに代入
      var func = function(x, y) { return x * y; };

      function secondFunction() {
        var result;
        result = func(10, 20);   // 無名関数を呼び出し
        document.write(result);  // 結果を出力
      }
    </script>
  </head>
  <body>
    <p>次のボタンをクリックして関数を呼び出してください</p>

    <form>
      <input type="button" onclick="secondFunction()" value="Call Function">
    </form>
  </body>
</html>

コードの動作解説

  • var func = function(x, y){ return x*y };
    ここが関数リテラルです。functionの後に名前を書かず、そのまま変数に代入しています。
  • result = func(10, 20);
    変数経由で無名関数を呼び出し、10 × 20 の計算結果「200」がresultに格納されます。
  • document.write(result);
    画面に計算結果が出力されます。

関数リテラルを使うメリット

  • 柔軟な扱い： 変数への代入だけでなく、配列やオブジェクトのプロパティ、コールバック関数としても利用できます。
  • 名前空間の汚染を防ぐ： グローバルスコープに関数名を登録しないため、名前の衝突を避けられます。
  • 即時実行が可能： 定義したその場で実行するIIFE（即時実行関数式）としても書けます。

補足：ES6以降のアロー関数

モダンなJavaScriptでは、より簡潔に書けるアロー関数も広く使われています。先ほどの関数リテラルは、次のように置き換えられます。

const func = (x, y) => x * y;

アロー関数は関数リテラルの一種と考えることができ、短い記述で同じ機能を実現できます。用途に応じて使い分けるとよいでしょう。

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

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

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

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