Zenn
😺

【イラスト付き】JavaScriptクロージャー【丁寧に解説】

2024/09/04に公開
JavaScript
tech

はじめに

皆さんこんにちは。

今回はJavaScriptのクロージャーについてご紹介します。

JavaScriptでは関数を値として扱うことができます。引数で関数を受け取るコールバック関数は有名ですが、今回は戻り値として関数を返すことについて扱います。

こんな人にオススメ

  • 初めてJavaScriptに触れる方
  • JavaScriptのクロージャーの性質を把握したい

初めて学習する方にも分かるように、丁寧に解説していきます。
プログラミングに慣れてきた方も、是非一度目を通していただけると嬉しいです。

😋 JavaScriptは関数自体を戻り値にできます♪

クロージャーとは

まずポイントをチェック

  • 内側の関数を用意した時の環境（スコープ）を閉じ込める性質
  • 戻り値の関数内で参照していた変数の参照を維持できる

クロージャーは関数の戻り値として関数を返す際、戻り値の関数から参照可能なスコープを維持する仕組みです。クロージャーという仕組みがあることで、戻り値として外に出た関数は、関数を作る関数内で参照していた変数を引き続き参照することができます。

// 関数を作る関数
const createFn = () => {
    const message = '変数の値'
    return () => {
        console.log(message);
    };
};
// 戻り値の関数は変数で受け取る
const fn = createFn();
// 戻り値の関数を実行（クロージャーによりmessage変数は参照可能）
fn();

😋 クロージャーは内側の関数の参照を維持します♪

関数を作る関数とクロージャー

まずポイントをチェック

  • 戻り値を関数とすることで、類似する関数を簡単に生成できる

「関数を作る関数」を用意すると「一部のデータだけ異なる似たような関数」をいくつも作成したい場合に便利です。これはクロージャーが活用されており、関数を作る関数内で用意したデータを戻り値の関数で利用することができます。

// 関数を作る関数
const createFn = (data) => {
    const message = `データは${data}`;
    return () => {
        console.log(message);
    };
};
// 戻り値の関数は変数で受け取る
const fn1 = createFn('ABC');
const fn2 = createFn('DEF');
// 戻り値の関数を実行（処理内容は同じだがデータが違う）
fn1();
fn2();

😋 同じような関数をいくつも定義せずに済みます♪

【おまけ】高階関数とは

まずポイントをチェック

  • 引数もしくは戻り値として関数を扱う関数

高階関数は、引数や戻り値のどちらかで関数を扱う関数のことです。高階という言葉は文字通り「高い階層」という意味です。高階関数は文法上特別な構文はありません。インプットかアウトプットで関数を扱う関数であれば高階関数です。

// 関数を受け取る（高階関数）
const getFn = (fn) => {
    fn();
};
// alert関数を渡して実行
getFn(alert);

// 関数を返す（高階関数）
const backFn = () => {
    return () => 1 + 1;
};
// 戻り値の関数を変数に代入
const fn = backFn();

😋 高階関数は入出力で関数を扱います♪

おわりに

皆さん、お疲れ様でした。
ここまでご覧いただき、ありがとうございました。

クロージャーは必須とまでは言えませんが、知っているとコードの工夫の幅がグッと広がります。JavaScriptは関数を値として扱えるということを是非意識してみてください。

😋 これからもプログラミング学習頑張りましょう♪

参考リンク集（MDN Web Docs のリンク）

First-class Function (第一級関数)：https://developer.mozilla.org/ja/docs/Glossary/First-class_Function
クロージャ：https://developer.mozilla.org/ja/docs/Web/JavaScript/Closures

Discussion