JavaScript クロージャ

クロージャとは

mozillaから引用させてもらうと、内側の関数から外側の関数スコープへのアクセスを提供するものだそう。

どんな時に使うのか

複数回のメソッドコールに渡って変数の状態を管理したいけど、メソッドの外からは変数を触られたくない。といったケースにおいて、変数をメソッドの内側に定義した上で外から操作できるようにするための手法。

例

整理券を発行する用のメソッドを例に確認してみる。
名前を引数に渡すことで、番号を採番して名前と番号を返却するメソッドを作るとする。

変数の隠蔽を意識せずに書くと以下のようになる。
この場合、採番値(i)は自由に書き換えることができてしまう。

let i = 0;

function numbering(name) {
  return `${++i}番 ${name}`;
}

console.log(numbering("田中"));
console.log(numbering("佐藤"));

そんな時にクロージャの出番。
変数iを変数に格納し、プライベートな変数にしてしまうことで外からさわれなくするのである。
外から呼ぶメソッドの戻り値として実際に動くメソッドを返すことで、変数をカプセル化しつつ同一の挙動を行えるようになる。

function numberedTicket() {
  let i = 0;
  function numbering(name) {
    return `${++i}番 ${name}`;
  }
  return numbering;
}

const ticket = numberedTicket();

console.log(ticket("田中"));
console.log(ticket("佐藤"));