One all-encompassing definition of JavaScript closure

Question

I have read 10s of SO references on closures, MDN references and other blog articles. They all seem to define closures in their own ways. For example, From MDN documentation:

function makeFunc() {
  var name = "Mozilla";
  function displayName() {
    alert(name);
  }
  return displayName;
}

var myFunc = makeFunc();
myFunc();

---

And here goes their explanation of closure:

Normally, the local variables within a function only exist for the duration of that function's execution. Once makeFunc() has finished executing, it is reasonable to expect that the name variable will no longer be accessible. Since the code still works as expected, this is obviously not the case.

The solution to this puzzle is that myFunc has become a closure. A closure is a special kind of object that combines two things: a function, and the environment in which that function was created. The environment consists of any local variables that were in-scope at the time that the closure was created. In this case, myFunc is a closure that incorporates both the displayName function and the "Mozilla" string that existed when the closure was created.

This below StackOverflow post answers closures as a stack of visible scopes. What types of scope exist in Javascript?

Where I am confused: is closure an object? Or is it just a "anomalous scoping situation" where inner nested function has access to a variable defined outside of itself but local to the container parent function, even after parent function has already executed? Is closure an object referring to this nested function (scope) situation like myFunc or is it the inner function itself?

Answer 1

To put it in a succinct way,

The function inside another function, has the access to the variables declared in the outer function. In case the function is in the global context, it obviously has the access to the global variables.

More context:

var v1; // I'm accessible anywhere    
function a() {
    var v2;
    function b() { // I can access v2 and v1
        var v3;
        function c() {  // I can access v1, v2, v3
            var v4;
        }
        return c;
    }
    return b();
}
var f = a();

In the above, a, b, c all are closures, which have access to their respective parent scope and this goes on recursively till window or global context.

---

In general, every function is a closure. But we only come to think of them, when we implement something, that actually depends on closure, such as factory functions.

Answer 2

You can think of JS function as this structure:

class Function : Object {
  bytes      bytecode;
  varframe   varsAndArgs;
}

class varframe{
  array<value>  values;
  ptr<varframe> parent;
}

So each function instance in JS is technically a closure. In toplevel functions that parent pointer is null.

So when you define

function makeFunc() {
  var name = "Mozilla";
  function displayName() {
    alert(name);
  }
  return displayName;
}

that displayName (const/variable) will contain instance of class Function that will contain reference to its own varframe of this structure:

varframe(displayName) 
  values[0] // empty array, no variables in it
  parent -> varframe(makeFunc) 
              values[1] // one variable "name" at index 0;
              parent = null    

Thus closure is a structure holding reference to code and reference to chain of varframes ( a.k.a. callframes ).

Answer 3

In the past a lot of course material and references emphasized the OO aspects of JavaScript sometimes to the neglect of functional approaches. I think that began to change with the development of frameworks and extensive collections of JS libraries. Secrets of the JavaScript Ninja makes the case that mastering functions is a fundamental part of effectively using JavaScript. In Ninja the definition of a closure is more general:

"... closures allow a function to access all the variables, as well as other functions, that are in scope when the function itself is declared."

                                         -- "Chapter 5: Closing in on closures"

Discussing closures, Effective JavaScript puts it (more or less) this way:

• a function can refer to variables defined outside of its scope;
• functions can refer to variables defined by another function after the second function has returned (because in JavaScript functions are objects);
• a function can contain internal functions that are "closed over" and which can modify properties of the enclosing function.

The source code for Effective JavaScript Chapter 2. Item 11 "Get Comfortable with Closures" is on gibhub at:

• https://github.com/effectivejs/code/tree/master/ch2/item11

The neat thing about an enclosed function is that it doesn't need a name if you don't plan on calling it explicitly: it can be anonymous and simply be evaluated as part of the outer function.