JavaScriptのクロージャとは？仕組みと使い方を図解

クロージャは「覚えている関数」

JavaScript で関数を定義するたびに、その関数はまわりにある変数への参照をこっそり持ち続けます。そして後からその関数を呼び出したとき、たとえまったく別の場所で実行されていても、元の変数にちゃんとアクセスできる。これが JavaScript のクロージャです。

いちばん短い例で見てみましょう。

makeGreeter が実行されて内側の関数を返し、そこで処理が終わります。普通に考えれば、ローカル変数の name は関数の実行が終わった時点で消えるはず。ところが、返された内側の関数が name を使い続けているため、JavaScript はその変数を生かし続けます。greetAda は "Ada" を覚えているし、greetBoris は "Boris" を覚えている。2 つのクロージャが、それぞれ別の値を抱え込んでいるわけです。

クロージャの正体はレキシカルスコープ

クロージャを支えているルールが、いわゆる レキシカルスコープ（lexical scope） です。関数が参照できる変数は、「呼び出された場所」ではなく「書かれた場所」で決まる、というルール。「レキシカル」という言葉は、要は「ソースコード上のどこに書かれているか」という意味にすぎません。

show が出力するのは "外側にいます" で、"caller の中にいます" ではありません。関数が 書かれた 場所がトップレベルの outer の隣だったので、参照されるのはそちらの outer です。たまたま自分用の outer を持っている場所から呼び出したとしても、関係ありません。

クロージャとは要するに、外側の関数の寿命を超えて生き残るレキシカルスコープのことです。誰かがまだ参照を握っているから、変数は消えずに残り続ける、というわけですね。

呼び出しごとに別々のクロージャができる

外側の関数を呼び出すたびに変数は新しく作られ、その呼び出しから返された内側の関数は その時の 変数を覚えています。さっきの greetAda と greetBoris がぶつからなかったのは、このためです。

クロージャの定番といえば、やっぱりカウンターでしょう:

a と b はそれぞれ自分専用の count を抱えています。返された関数の外からはこれらの変数に一切触れられず、count は完全にプライベートです。これは特別な言語機能を有効にしたわけではなく、クロージャの仕組みから自然とそうなるんです。

クラスを使わずにプライベート変数を実現する

クロージャに閉じ込められた変数は、返された関数を通してしか触れません。この性質を活かすと、本当の意味でプライベートな状態を持つ小さなオブジェクトを作ることができます。

balance は返されたオブジェクトのプロパティではなく、クロージャの内部に閉じ込められています。読み書きできるのは、公開したメソッド経由のみ。#private フィールド付きのクラスでも同じようなことはできますが、クロージャによるこのやり方は何十年も前から使われていて、今でもあちこちのコードで目にします。

ループでハマりがちな落とし穴

クロージャで一番つまずきやすいのが、ループの中で使うケースです。まずは var を使った場合を見てみましょう。

0、1、2 が出てくると思いきや、実際には 3、3、3 が返ってきます。理由はこうです。var は関数スコープなので、ループ全体で i は 1 つだけ しか存在しません。3 つのクロージャは同じ変数を参照していて、実行される頃にはループが終わって i が 3 になっているわけです。

そこで let に変えてみましょう。

今度はちゃんと 0、1、2 と出力されます。let はブロックスコープなので、ループが一周するたびに i の新しいバインディングが作られ、それぞれのクロージャが自分専用の値をキャプチャするんです。これこそが、var よりも let を使うべき最大の理由と言ってもいいでしょう。

クロージャがキャプチャするのは「値」ではなく「変数」

ちょっと分かりにくいけれど大事なポイントがあります。クロージャが保持しているのは 変数そのもの であって、関数が定義された時点の値のスナップショットではない、ということです。

printMessage は、作られた時点ではなく実行された瞬間に message を読みに行きます。その時の値をスナップショットとして残したいなら、まずローカル変数にコピーしておきましょう。実は for ループの中の let がやっているのは、これとほぼ同じことなんです。

実践でよく使うパターン：一度だけ実行する関数

クロージャを使った便利な小ネタとして、関数を1回しか実行させないようにするユーティリティを紹介します。

called と result は、返された関数が生きている間だけ存在するプライベートな状態です。グローバルなフラグも、余計なオブジェクトも要りません。小さなヘルパー、プライベートな状態、そしてクロージャ——このパターンはJavaScriptでもっとも役立つ機能の一つと言っていいでしょう。

メモリについて少しだけ

クロージャは、そのクロージャ自身がどこかから参照されている限り、キャプチャした変数を生かし続けます。たいていはそれが狙いなのですが、寿命の長いもの(DOMイベントリスナーやグローバルなキャッシュなど)にクロージャを結び付けていて、しかもそのクロージャが大きなデータをキャプチャしていると、クロージャが解放されるまでそのデータもガベージコレクションされません。注意しておきたいポイントです。

function attach() {
    const hugeData = new Array(1_000_000).fill("...");
    document.addEventListener("click", () => {
        console.log(hugeData.length);
    });
}

リスナーが登録されている間は、hugeData はメモリに居座り続けます。リスナーを外す(あるいは必要のないものは最初からキャプチャしない)ようにすれば、参照はクリアされます。細かく管理する必要はありませんが、クロージャとメモリは切っても切れない関係にある、ということだけは覚えておいてください。

この章のポイント

• クロージャとは、関数と、その関数が定義された時点で見えていた変数のセットのことです。
• 外側の関数を呼び出すたびに、内側のクロージャ用の変数セットが新しく作られます。
• クロージャを使えば、クラスを使わずにプライベートな状態を持たせられます。
• ループの中では let を使い、各イテレーションごとに独立したバインディングを作りましょう。
• クロージャがキャプチャするのは変数そのものであって、生成時点の値ではありません。

次回予告: this キーワード

クロージャが扱うのは、関数の「周りにある変数」でした。次に見ていくのは、関数が何に対して呼び出されたか という話題です。JavaScript ではこれを this が担っていて、ここまで見てきたキャプチャ変数とはまったく違う振る舞いをします。