DEV Community

Nevin Katz
Nevin Katz

Posted on • Updated on

An Example of a Closure in JavaScript

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 get method will simply get the count value.

  • the set method sets the count value to any value we want.

  • the increment method 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 reset method 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)

Collapse
 
nevkatz profile image
Nevin Katz • Edited

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.

Collapse
 
jcubic profile image
Jakub T. Jankiewicz

This is not a closure with four methods, but object with 4 closures. Closure if a function with enclosing environment.

Collapse
 
nevkatz profile image
Nevin Katz • Edited

Thanks, Jakub. I updated this post as well as my Medium article to reflect this.

 
nevkatz profile image
Nevin Katz

Ha! Finally! Very interesting to hear about how these other languages handle closures. Thanks for sharing!

Collapse
 
wagyourtail profile image
wagyourtail

Why use over classes?

Collapse
 
nevkatz profile image
Nevin Katz

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.