お待たせしました！

いよいよ「4段階目：クロージャ（closure）」です。

ここが一番のポイントですね。しっかり解説します。

✅ 4段階目：クロージャ（closure）

「関数が作られた時の変数を覚えている機能」

→ 「関数が生まれた場所（スコープ）を覚えておく」

【コード例】ファイル名: closure-step4.js

//makeCounterという関数を宣言（カウンターを作る工場）
function makeCounter() {
  //countを0で初期化（この変数はmakeCounter内にある）
  let count = 0;

  //中で関数を返す（この関数がクロージャ）
  return function() {
    //countを1増やす（countは覚えられている）
    count++;
    //現在のcountを返す
    return count;
  };
}

//counter1にmakeCounterを実行した結果（関数）を代入
const counter1 = makeCounter();

//counter1を何度も呼び出す
console.log(counter1()); // 1
console.log(counter1()); // 2
console.log(counter1()); // 3

//新しいカウンターを作る（別のcountを持つ）
const counter2 = makeCounter();
console.log(counter2()); // 1 ← 別々にカウントされる

🔥 【ポイント解説】

◆ 文法ポイント

• return function() { ... }

  → 関数を返す関数（高階関数とも呼ぶ）

  → この返された関数が「クロージャ」。

• let count = 0;

  → makeCounter のスコープの中で作られた変数。

  → でも、返した関数が「このcountを覚えている」。

🟢 【クロージャのイメージ】

makeCounter() が実行された時
┌───────────────────────┐
│ let count = 0;                │ ← ここで count が作られる
│ return function() { ... }  │ ← ここで「countを覚えた関数」を作って返す
└───────────────────────┘

→ その返された関数は count を覚えている！

🟥 【なぜcounter1とcounter2は別々にカウントできる？】

• makeCounter() を 呼ぶたびに新しい count が作られる。