My Understanding of Closures in JavaScript

Many people feel confused when learning about the concept of closures in JavaScript. Closures are a very important concept in JavaScript and are often a topic in interviews. After reading numerous introductions to closures, in this article, I will explain closures from my understanding and how to use them in JavaScript.

What is a Closure?

I don't want to start with a complex definition, as this might confuse you even more. So, let's dive into this topic with a piece of code.

function getInfo() {
  var info = {
    name: 'John',
    age: 30,
  }
  function getName() {
    return info['name']
  }
  return getName
}
var getNameFunction = getInfo()
console.log(getNameFunction()) // John

In this code, we define a function getInfo that returns another function named getName. The returned function could also be an anonymous function returned directly via return, but here, for clarity, we give it a name.

In the subsequent code, the getInfo function is called and returns the getName function. We then assign the getName function to the variable getNameFunction and call it, printing the result to the console. Let's think about what happens internally when we call getNameFunction.

Here, the getNameFunction needs to access the name property from the info object. However, the info object does not exist within this function, so it tries to look for it in the outer scope. In this case, it finds the info object, retrieves its name property, and returns it.

When a function can't find a variable internally, it will attempt to look in the next outer scope. If it still can't find it, it will continue searching outward until it reaches the global scope. This chain-like search is called the Scope Chain. A crucial concept to remember is that the scope chain is determined when a function is defined, not when it is called.

So, what are the "nodes" on the scope chain? How does JavaScript know if a variable is on a "node" in the current scope? This brings up another concept: the Variable Object (VO), which contains function parameters, local variables, and function declarations. It can be thought of as an object, but the variable object is an abstract concept and cannot be directly accessed via code; the usable object is something else.

In JavaScript, whenever a function is called, an execution context is created, along with an actual usable variable object called the Activation Object (AO), which is added to the front of the scope chain. When a variable needs to be found, the search starts from the front of the scope chain. The activation object can be thought of as a concrete implementation of the variable object.

Once a function completes execution, its execution context is destroyed. In the absence of closures, the local activation object is also destroyed. When all functions have finished executing, the only remaining variable object in memory is the global scope; all others will be garbage collected.

However, due to closures, the activation object inside a function cannot be destroyed because it is still referenced by another function defined inside it. Unless this other function is also destroyed, the activation object will persist. This is the essence of closures.

Returning to the initial code, how do we determine if there is a closure present? A simple method is to add a debugger statement inside the function, then use the browser's developer tools (I'm using Chrome 127.0.6533.120) to inspect the Scope tab, where you'll see a Closure entry—this is the closure.

function getInfo() {
  var info = {
    name: 'John',
    age: 30,
  }
  function getName() {
    debugger // Add a breakpoint here
    return info['name']
  }
  return getName
}
var getNameFunction = getInfo()
console.log(getNameFunction()) // John

We can see which scope the closure references and which variable it points to.

Common Misconceptions

A common misconception is that immediately-invoked function expressions (IIFEs) always create closures. However, if an IIFE does not reference any variables from an outer scope, it does not create a closure.

;(function () {
  var elements = document.getElementsByTagName('li')
  for (var i = 0; i < elements.length; i++) {
    elements[i].style.color = 'red'
  }
})()

You can see that there is no closure here.

Questioning Definitions

The book "Professional JavaScript for Web Developer" is the gold-standard in intermediate-to-advanced JavaScript programming development books. Regarding P376 (4th edition) defines closures as:

Closures are functions that have access to variables from another function's scope. This is often accomplished by creating a function inside a function.

According to the book, closures are essentially functions. However, I have doubts about this definition. Let's modify the earlier example by wrapping it in another function:

function initialInfo(info) {
  return function getInfo(keyName) {
    return function getName() {
      debugger
      return info[keyName]
    }
  }
}
var info = initialInfo({
  name: 'John',
  age: 30,
})
console.log(info('name')())

Here, the getName function needs to access the keyName property from the info object. Through the scope chain, it finds keyName in the next outer scope and then finds info in the next outer scope, thus referencing two different activation objects from two different scopes. Let's look at the browser developer tools:

Two closures appear here.

Here, the same getName function references two different activation objects from different scopes, resulting in two closures. However, the book's definition claims that closures are functions, which doesn't quite explain this scenario. Moreover, the definition only mentions "variables in another function's scope," but as seen in the example above, the closure can reference another function's parameters. Thus, I believe the book offers an easily understandable explanation rather than a strict definition. Some front-end interview "cheat sheets" even treat it as a standard answer, which I find inaccurate.

In my understanding, a closure is more of a phenomenon — it's when a function references another function's activation object, preventing it from being destroyed after the function completes, possibly causing memory to be unreleased.

Functional Programming

Closures are frequently used in JavaScript's functional programming paradigm. In this paradigm, functions often return other functions or define other functions internally, and these internal functions form closures. The example above is actually a functional programming example.

Closures can also be used to implement currying and other features.

function add(a) {
  return function (b) {
    debugger
    return a + b
  }
}
var add5 = add(5)
var add10 = add(10)
console.log(add5(3)) // 8
console.log(add10(add5(3))) // 18

Memory Leaks

A memory leak occurs when memory that has been allocated is not properly released or collected.

Closures are a powerful feature in JavaScript but can also lead to memory leaks. Because closures prevent the activation object inside a function from being destroyed and the referenced variables from being garbage-collected, they consume more memory. Although modern browsers no longer use reference counting for garbage collection and engines like V8 use mark-and-sweep algorithms to reclaim inactive memory, we should still minimize memory leaks when possible.