JavaScript Closures

Closures are functions that can refer to variables and other bindings beyond their scope, even after being called.

Example

Each time a new function is defined, a closure is created.

let myGlobalString = 'World';

function outer() {
  let myLexicalString = 'Hello';

  function inner() {
    myLocalString = `${myGlobalString}, ${myLexicalString}!`;
    return myLocalString;
  }

  return inner;
}

Copy to clipboard
Copy to clipboard

This example describes the three primary scopes visible to closures:

• myGlobalString exists in the global scope since it is not defined inside something else, like a function.
• From the point-of-view of the inner() function, everything outside its scope (outer functions, the global environment, etc.) is in the lexical environment, including myLexicalString and myGlobalString.
• Inside the inner() function is a locally-bound variable, myLocalString, that uses all the variables from its lexical environment.

Codebyte Example

Another common instance of JavaScript closures is with callbacks.

In the example below, the setInterval() function creates a closure in the count() callback that captures the references to the global variables myInterval and counter. Each second, counter is incremented by one, with its value preserved from the previous call. After it gets to seven, myInterval is cleared and reset to null:

Visit us
Visit us
Hide code
Code
Output
Hide output
Copy to your clipboard
Copy Codebyte
Run