クロージャ — スコープチェーンとデータの隠蔽

function createCounter() {
  let count = 0; // createCounterのローカル変数
 
  return function () {
    count += 1; // 外側の変数を参照している
    return count;
  };
}
 
const counter = createCounter(); // 実行はここで終わっているのに…
counter(); // 1
counter(); // 2
counter(); // 3 ← countが生き続けている！

const greeting = 'こんにちは';
 
function greet() {
  console.log(greeting); // 定義された場所（グローバル）のgreetingが見える
}
 
function main() {
  const greeting = 'やあ'; // ここにgreetingがあっても…
  greet(); // "こんにちは" ← 呼び出し場所のgreetingは関係ない
}
 
main();

const level1 = 'グローバル';
 
function outer() {
  const level2 = 'outerの変数';
 
  function inner() {
    const level3 = 'innerの変数';
    // inner → outer → グローバル の順に探せる
    console.log(level3, level2, level1); // 全部見える
  }
 
  inner();
  // console.log(level3); // ❌ 外側から内側は見えない
}
 
outer();

function createGreeter(name) {
  // このnameは引数＝createGreeterのローカル変数
  return function () {
    return `こんにちは、${name}さん`;
  };
}
 
const greetTaro = createGreeter('太郎');
const greetHanako = createGreeter('花子');
 
greetTaro(); // "こんにちは、太郎さん"
greetHanako(); // "こんにちは、花子さん"

function createWallet(initialBalance) {
  let balance = initialBalance; // 外から直接アクセスできない
 
  return {
    deposit(amount) {
      if (amount <= 0) return balance;
      balance += amount;
      return balance;
    },
    withdraw(amount) {
      if (amount > balance) {
        throw new Error('残高不足です');
      }
      balance -= amount;
      return balance;
    },
    getBalance() {
      return balance;
    },
  };
}
 
const wallet = createWallet(1000);
wallet.deposit(500); // 1500
wallet.withdraw(200); // 1300
 
wallet.balance; // undefined ← 直接は見えない
wallet.balance = 999999; // 書き換えたつもりでも…
wallet.getBalance(); // 1300 ← 本体は守られている

function setupButton(label) {
  const button = document.createElement('button');
  button.textContent = label;
 
  button.addEventListener('click', () => {
    // このコールバックはlabelを「覚えている」＝クロージャ
    console.log(`${label} がクリックされました`);
  });
 
  document.body.appendChild(button);
}
 
setupButton('保存');
setupButton('削除');

function debounce(fn, delay) {
  let timerId; // 前回のタイマーを覚えておく変数
 
  return function (...args) {
    clearTimeout(timerId); // 前回の予約をキャンセル
    timerId = setTimeout(() => fn(...args), delay);
  };
}
 
const search = debounce((keyword) => {
  console.log(`「${keyword}」で検索実行`);
}, 300);
 
search('J');
search('Ja');
search('Jav'); // 300ms以内の連続呼び出しは間引かれ、最後の1回だけ実行される

for (var i = 0; i < 3; i++) {
  setTimeout(() => {
    console.log(i); // 3, 3, 3 ← 0, 1, 2 にならない！
  }, 100);
}

for (let i = 0; i < 3; i++) {
  setTimeout(() => {
    console.log(i); // 0, 1, 2 ← 期待どおり！
  }, 100);
}

let user = { name: '太郎' };
 
const name = user.name; // この時点の値をコピー
const showName = () => console.log(name);
 
user = { name: '花子' }; // userを差し替えても…
showName(); // "太郎" ← コピーした時点の値のまま