Hi everyone,
The concept of the closure is one of the tougher concepts for me when I first started learning JavaScript in depth. If you are new to the concept, a closure is essentially a function bundled together with its surrounding state, which typically includes variables that the closure needs. A closure is typically a function within a larger function, which serves as a "bubble." All the variables within this larger function bubble are only accessible by methods in the closure.
The JavaScript engine is smart enough to realize that the variables are needed, so the engine's garbage collector does not obliterate them.
Below is a quick example of an object with four functions that are actually closures.
get, set, increment, and reset. They all act on a variable called count, which sits within the immediately invoked function expression (IIFE) holding the closure.
Each function, which comes bundled with its surrounding environment, is a closure.
the
getmethod will simply get thecountvalue.the
setmethod sets thecountvalue to any value we want.the
incrementmethod will increment the existing value by the amount passed in as a parameter. If no value is passed in, it increments the value by 1.the
resetmethod resets the value to zero.
These methods are the only way the user can access the count value. In this way, the use of a closure causes the count value to act in a similar way to that of a private variable in a Java object; it cannot be accessed outside the object, so methods are required to retrieve its value or update it.
In the demo, you will see that an init method grabs some references to the HTML elements we print to and then calls all the methods. Take a look at how they are called and see if you can understand what causes these particular values to be printed out.
I hope this quick post gives you a solid idea of what closures are about. Thanks for reading!
Elsewhere
For a tutorial on closures with an easy on-ramp, check out JavaScript Closures and Their Scope Bubbles on Medium.
Top comments (6)
If you count learning BASIC when I was twelve, then that's right, it didn't have closures. At least none that I know of. Mainly a lot of GOTO statements. :) My next language was ActionScript -- It had closures but I never used them.
So yes, my mental template did not have closures in it initially, so that may be why I found it hard to wrap my head around them. I really appreciate your examples here - they are quite illuminating.
This is not a closure with four methods, but object with 4 closures. Closure if a function with enclosing environment.
Thanks, Jakub. I updated this post as well as my Medium article to reflect this.
Ha! Finally! Very interesting to hear about how these other languages handle closures. Thanks for sharing!
Why use over classes?
There may not be a reason to if classes do what you need them to. That said I think it is important to be able to recognize closures in a codebase you end up working with. I myself am interested in starting to use JavaScript class syntax so I'll keep this question in mind.