Μετασχηματισμός συντεταγμένων

Τα closures είναι ένα μοτίβο προγραμματισμού στη JavaScript που επιτρέπει να χρησιμοποιούνται μεταβλητές από μια εξωτερική λεξική εμβέλεια μέσα σε ένα εμφωλευμένο μπλοκ κώδικα. Η JavaScript υποστηρίζει τα closures με διαφάνεια, και συχνά χρησιμοποιούνται χωρίς να ξέρει κανείς τι είναι.

// 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 σκοπός είναι μια τιμή να μη διαρρέει σε εξωτερική εμβέλεια.

Closures για αποθήκευση κατάστασης και μεταβίβαση τιμών

Η χρήση μιας δήλωσης μεταβλητής που μπορεί να τροποποιηθεί (όπως 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