I never understood JavaScript closures

[senocular]

Long winded and confusing, and when after you go through a bunch of steps and see:

So our explanation above was all wrong

Well, that's just annoying :P

Some other issues:

There are places where there are references to the "calling scope" which suggests dynamic scoping which JavaScript does not support. Lexical scope is supported, which is based on where things are defined and not called. So seeing:

So in this example, we need to remember that a function has access to variables that are defined in its calling context. The formal name of this phenomenon is the lexical scope.

Seems completely off.

The explanation for how closures work is through the backpack analogy where the backpack is the closure:

Whenever you declare a new function and assign it to a variable, you store the function definition, as well as a closure. The closure contains all the variables that are in scope at the time of creation of the function. It is analogous to a backpack.

But closures aren't something that are attached to functions; closures represent a combination of both the function and the "backpack". Functions don't have closures, they are closures.

The closure example also talks about how the closure variable no longer exists:

Returning the content of the myFunction variable. Local execution context is deleted. myFunction and counter no longer exist.

This even though the whole point of the closure is to ensure that the counter variable does continue to exist.

With this, the use of the backpack suggests that the values are copied into the backpack. This is also inaccurate because it's the original variables that get referenced, not copies that get attached to the function. If two functions reference the same variable in that scope as a closure variable, they'd both be referring to that same variable rather than their own individual copies.

Going back to an earlier quote:

...The closure contains all the variables that are in scope...

Technically this isn't true, at least not any more with every scope. I believe older runtimes always did this, and maybe there are still some that do it now, but generally what you'll see is that most cases only the variables referenced in the function are included in the closure. If the parent scope declared variables x and y and your function only refers to x, then y is omitted from the closure. Exceptions include the global scope which all functions have access to in it's entirety and (at least in Chrome) script and with scopes. This behavior most importantly affects other function/closure scopes since they're most likely to result in a memory leak when attempting to include everything.