座標変換

クロージャは、JavaScriptのプログラミングパターンのひとつで、外側のレキシカルスコープにある変数を、入れ子になったコードブロックの内側で使えるようにするものです。 JavaScriptはクロージャを意識せずに使えるようにしていて、それが何なのかを知らないまま使われていることもよくあります。

// Top-level declarations are global-scope
const dozen = 12;

{
  // Braces create a new block-scope
  // Referencing the outer variable is a closure.
  const twoDozen = dozen * 2;
}

// Because of the block-scope declaration, twoDozen is not available here.
twoDozen;
// => Uncaught ReferenceError: twoDozen is not defined

波括弧（{}）のほかにも、関数（やクラス）は新しいスコープを作り、値を_包み込む_ことができます。

const dozen = 12;

// Functions create a new function-scope and block-scope.
// Referencing the outer variable here is a closure.
function nDozen(n) {
  // This is declared inside the function scope, and uses the top-level scope.
  // This works, and encloses the value 12.
  const twoDozen = dozen * 2;

  // This only uses the locally declared variable and the passed argument to the parameter `n`
  return (twoDozen / 2) * n;
}

// Because of the function-scope declaration, twoDozen is not available here.
twoDozen;
// => Uncaught ReferenceError: twoDozen is not defined

twoDozenの例からわかるように、値は_入れ子_になったスコープ（関数、ブロックなど）に包み込むことはできますが、そのコンテキストの外へ取り出すことはできません。 ほとんどの場合、モダンなJavaScriptでは、値が外側のスコープへ_漏れない_ことが意図されています。

状態を保ち、値を受け渡すクロージャ

再代入できる変数宣言（letやvarなど）を使うと、ある程度の状態を保持できます。

let counter = 0;

// This function closure increments the counter's state in the outer lexical context.
// This way the counter can be shared between many calling contexts.
export function increment() {
  counter += 1;
  return counter;
}

increment();
// => 1

counter;
// => 1

状態を漏らさずに値を包み込む

値を使って状態を保つことと、包み込んだ値が外に漏れないことを組み合わせると、プライベートな値を作れます。

もっとも一般的な方法は、何らかの状態を包み込んだ関数を返す関数を作ることです。

export function makeCounter() {
  let counter = 0;

  // This returns a new function that encloses the local variable counter
  return function increment() {
    counter += 1;
    return counter;
  };
}

// Counter did not leak
counter;
// => Uncaught ReferenceError: counter is not defined

// This creates a new counter.
// This assigns the increment function to the variable myFirstCounter.
const myFirstCounter = makeCounter();

typeof myFirstCounter;
// => function

myFirstCounter.name;
// => increment

myFirstCounter();
// => 1
myFirstCounter();
// => 2

// This creates new counter (with new, separate local state / enclosed counter variable)
const mySecondCounter = makeCounter();

mySecondCounter();
// => 1

// It does not affect the first counter.

myFirstCounter();
// => 3