クロージャ ― 関数が変数を覚えておく

導入

関数は、自分が作られた場所の変数を覚えたまま持ち歩けます。この仕組みをクロージャと呼びます。「状態を隠して持つ関数」を作れる、JavaScript の強力な機能です。

説明

関数の中で関数を作って返すと、内側の関数は外側の変数を覚え続けます。

function makeCounter() {
  let count = 0;          // この変数を…
  return function () {
    count += 1;           // …内側の関数が覚えている
    return count;
  };
}

const next = makeCounter();
console.log(next());  // 1
console.log(next());  // 2
console.log(next());  // 3

count は makeCounter の中だけの変数で、外から直接いじれません。それでも next() を呼ぶたびに値が増えます。これが「状態を閉じ込めて持つ」クロージャの働きです。

引数を覚えさせて、専用の関数を量産することもできます。

function makeAdder(n) {
  return (x) => x + n;   // n を覚えた関数を返す
}

const add10 = makeAdder(10);
const add100 = makeAdder(100);
console.log(add10(5));    // 15
console.log(add100(5));   // 105

makeCounter から作った別のカウンターは、それぞれ独立した count を持ちます。

const a = makeCounter();
const b = makeCounter();
console.log(a());  // 1
console.log(a());  // 2
console.log(b());  // 1 ← b は別物なので 1 から

やってみよう

makeAdder で好きな数を足す関数を作ったり、カウンターを2つ作って値が独立していることを確かめましょう。

演習

makeAdder(n) を定義し、引数 n を足す関数を返してください。makeAdder(10) で作った関数に 5 を渡した結果を表示します。