Closures (In JavaScript and Beyond)

A closure is a method that accesses a variable "outside" itself. For example:

  const message = 'The British are coming.';
function sayMessage(){
  alert(message); // Here we have access to message,
  // even though it's declared outside this function!
}

JavaScript

We'd say that message is "closed over" by sayMessage().

One useful thing to do with a closure is to create something like an "instance variable" that can change over time and can affect the behavior of a method.

  // Function for getting the id of a dom element,
// giving it a new, unique id if it doesn't have an id yet
const getUniqueId = (() => {
  let nextGeneratedId = 0;
  return element => {
    if (!element.id) {
      element.id = `generated-uid-${nextGeneratedId}`;
      nextGeneratedId++;
    }
    return element.id;
  };
})();

JavaScript

Why did we put nextGeneratedId in an immediately-executed anonymous method? It makes nextGeneratedId private, which prevents accidental changes from the outside world:

  // Function for getting the id of a dom element,
// giving it a new, unique id if it doesn't have an id yet
let nextGeneratedId = 0;
const getUniqueId = element => {
  if (!element.id) {
    element.id = `generated-uid-${nextGeneratedId}`;
    nextGeneratedId++;
  }
  return element.id;
};

// ...
// Somewhere else in the codebase...
// ...

// WHOOPS--FORGOT I WAS ALREADY USING THIS FOR SOMETHING
nextGeneratedId = 0;