domfarolino

var outerFunction = function(outerFunctionState) {

  var innerFunction = function() {
    console.log("Snapshot of the outerFunction's state is: " + outerFunctionState);
  }

  return innerFunction;
}

var generatedFunction1 = outerFunction(5);

domfarolino

var outerFunction = function(outerFunctionState) {

  var innerFunction = function() {
    console.log("Time difference: " + (Date.now() - outerFunctionState)/1000);
  }

  return innerFunction;
}

var generatedFunction1 = outerFunction(Date.now());

domfarolino

var stopWatchBuilder = function() {

  var outerFunctionState = Date.now();
  var innerFunction = function() {
    console.log("Time difference: " + (Date.now() - outerFunctionState)/1000);
  }

  return innerFunction;
}

domfarolino

The point of a closure is to create an outer function that can act like a factory. This factory function produces other smaller functions (an inner function inside the outer factory function). Now before I go on, let's remember that the inner function (against intuition and assisted by the language itself) IS TOTALLY allowed to safely use the local state of the outer function. This works properly even when the outer function's state is removed from the stack, and disappears.

This is the key to closures, and to take proper advantage of it we really only want to call the factory function (outer function) when we want to produce an inner function that depends on a local state that the outer function provides. So let's use a suuuppper simple example.

Consider this JavaScript code:

var outerFunction = function(outerFunctionState) {

  var innerFunction = function() {

domfarolino

/**
 * The softBind "polyfill" is kind of like .bind(..) hard binding
 * however it is slightly more flexible in that it can allow for
 * `this` overrides with implicit, explicit, and `new` bindings.
 * The default .bind(..) is less flexible only allows `this` overrides
 * in situations where `new` is used.
 *
 * To use it, you pass in some default value for `this`. This value
 * will only be used if the value of `this` at runtime is the global
 * `window` object, or undefined (possibly strict mode). This means

domfarolino

function CoolObject() {
  var that = this;

  // Allows us to use lexical this as opposed to .bind or that = this trick
  this.coolPromise = new Promise((resolve, reject) => {
    console.log(this === that);
    setTimeout(() => {
      resolve(10);
    }, 2000);
  });

domfarolino

const array = [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1];

function handleArrayValue(v) {
	console.log(`Handling ${v}`);
	for (let i = 0; i < 15000; ++i) {
  	for (let j = 0; j < i; ++j) {
    	// Nothing!
    }
  }
}

domfarolino

class CoolCard extends HTMLElement {
  constructor() {
    // MUST to allow HTMLElement interface to set
    // itself up so we can take advantage of it
    super();
  }

  connectedCallback() {
    // Every time a cool-card gets inserted into a
    // document this asynchronous callback gets called

domfarolino

<cool-card>
  <h2 slot="card-header">Card Header</h2>
  
  <p slot="card-body">
    "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt."
  
  <p slot="card-author">
    <a href="https://twitter.com/domfarolino">By domfarolino</a>
  </p>
</cool-card>

domfarolino

:host {
  font-family: sans-serif;
}

div.card {
  width: 100%;
  max-width: 300px;
  display: inline-block;
  box-shadow: 0px 1px 3px rgba(0, 0, 0, .6);
  margin: 10px;