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

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

JavaScriptにおける関数式（Function Expression）とは、関数を変数に代入して定義する方法のことです。代入された関数は、その変数名を使って後から呼び出すことができます。

関数式の主な特徴

  • 関数を変数に格納し、変数名を指定して呼び出せる
  • 通常の関数宣言（function declaration）と異なり、ホイスティング（巻き上げ）が行われないため、定義よりも前に呼び出すことはできない
  • 多くの場合、名前を持たない「無名関数（匿名関数）」として定義される
  • コールバック関数や即時実行関数（IIFE）など、さまざまな場面で活用できる

この「ホイスティングされない」という点が重要です。関数宣言であればスクリプト内のどこからでも呼び出せますが、関数式の場合は定義行が実行された後にしか使えません。定義前に呼び出そうとするとエラーが発生します。

実装例

以下は、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>Function expression in JavaScript</h1>
<div class="result"></div>
<button class="Btn">CLICK HERE</button>
<h3>Click on the above button to display a function expression</h3>
<script>
    let resultEle = document.querySelector(".result");
    let a = function () {
        return "This is a function expression";
    };
    document.querySelector(".Btn").addEventListener("click", () => {
        resultEle.innerHTML = " a = " + a + "<br>";
        resultEle.innerHTML += " a() = " + a() + "<br>";
    });
</script>
</body>
</html>

このコードでは、変数 a に無名関数を代入しています。ボタンをクリックすると、変数 a 自体の中身（関数オブジェクト）と、a() を実行した戻り値がそれぞれ表示されます。

実行結果

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

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

「CLICK HERE」ボタンをクリックすると、関数式の中身と実行結果が出力されます。

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

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

    部分関数（Partial Function）とは、既存の関数を引数として受け取り、それに加えて別の型の引数も同時に受け取れるようにする仕組みです。まず渡された引数の一部を使い、残りの引数を受け取る新しい関数を返します。そして、返された関数が呼び出されるときに、あらかじめ固定しておいた引数とそのときに渡された引数をすべて組み合わせて、元の親関数が実行されます。 この手法は「部分適用（Partial Application）」とも呼ばれ、関数型プログラミングの基本的なテクニックのひとつです。共通する引数を先に束縛しておくことで、処理の再利用性やコードの可読性を高めることができます。 コード例 以下

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

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