Перетворення координат

Замикання - це програмний прийом у 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