DEV Community

Cover image for Misconceptions About Closures
Jon Randy πŸŽ–οΈ
Jon Randy πŸŽ–οΈ

Posted on • Edited on

Misconceptions About Closures

The two biggest (and unfortunately widespread) misconceptions about closures:

A closure is a special type of function that has access to its surrounding scope ❌

This is entirely wrong for two reasons:

  1. Closures are not functions
  2. ALL functions have access to their surrounding (lexical) scope*

To create a closure, you need to nest functions ❌

Again, entirely wrong - nesting of functions is irrelevant! Whenever a function is created, an associated closure is also created.


So, what is a closure?

From MDN:

A closure is the combination of a function bundled together (enclosed) with references to its surrounding state

The closure allows the function to access the state in which it was created.

As a simplified visual:
Closure

*Except for functions created with new Function(...) which form closures with the global scope

Top comments (10)

Collapse
 
jamesthomson profile image
James Thomson

Personally, waaay back when, I found this really drove that home.

const myVar = 'foo'

{
  const myVar = 'bar'
  console.log(myVar)
}

console.log(myVar)
Enter fullscreen mode Exit fullscreen mode

It blew my mind that a block statement could be used like this.

Of course, we were dealing with var which had different implications depending on strict mode, but when using const/let it's quite clear.

Collapse
 
tanmaycode profile image
Tanmay Agrawal

This i realized when I was reading about the difference between the var, let and const. The example was given in same as the above. I though wait! whats happening there

Collapse
 
darkwiiplayer profile image
π’ŽWii πŸ³οΈβ€βš§οΈ

One of the interesting implications of this is that most of the times when we say "function" in JavaScript, we are actually talking about a closure.

Functions cannot be defined, assigned to variables, passed as arguments or returned. Functions are handled internally by the language and referenced in some way by closures.

But this isn't really practical from a language perspective, so we have instead started using "function" to mean closure as well as an actualΒ function. This works well most of the time, but leads to some insignificant misconceptions about terminology.

Looking at it from a communication perspective:

Every "function" is actually a closure in JS.Β The function/closure distinction is, in practice, entirely useless.

Meanwhile, "closure that captures values" vs. "closure that doesn't capture values" is a way more interesting distinction, yet needs a lot more words to express. Calling one of themΒ "function" and the other "closure", while technically incorrect, makes it a lot easier to communicate those ideas. In the same way, saying "use a closure" is a lot simpler thanΒ "make use of the fact that javascript functions are actually closures"

Collapse
 
dsaga profile image
Dusan Petkovic

Good as a refresher thanks!

Do other languages use a similar concept of closures?

Collapse
 
darkwiiplayer profile image
π’ŽWii πŸ³οΈβ€βš§οΈ

Many scripting languages have features like this.

Lua functions work almost the exact same way (even the misnomer). Ruby has lambdas, which also capture their surrounding scope. Many functional languages have closures and make heavy use of them.

Collapse
 
best_codes profile image
Best Codes

This is all very true. Informative, too. Thanks for posting!

Collapse
 
sahilatahar profile image
Sahil Atahar

Nice article

Collapse
 
grigorkh profile image
Grigor Khachatryan

Nice article!

Collapse
 
tanmaycode profile image
Tanmay Agrawal

Debugging the closure in the right way

Collapse
 
n3rdnerd profile image
N3rdNERD

Thanks for this hint of misconceptions!