クロージャで状態を閉じ込める

実践JavaScript / 全 5 枚

実践JavaScript - クロージャで状態を閉じ込める

前回の値を覚える置き場所がいる

作品カードが開かれた回数を数えたいとき、数を入れておく変数が必要になります。グローバルに置くと誰からでも書き換えられるので、関数の中に閉じ込めたまま増やせる形にします。

中で作った変数が外から見えない、という前提があって初めてこの閉じ込めが成り立ちます。次の図解でその壁を見ます。

createCounter が返した関数は、外に持ち出されたあとも中の count を覚えたままです。

function createCounter() {
  let count = 0;
  return function () {
    count += 1;
    return count;
  };
}

const countView = createCounter();
console.log(countView()); // 1
console.log(countView()); // 2

1 / 5

← → キーでも送れます

このスライドが付いているレッスンを開く