Understanding Closures in Javascript

Closures are a powerful and widely used feature of Javascript, yet they can be confusing to a novice programmer. A solid understanding, however, is key to better code. Before we dive into some common use cases, let’s get to the heart of what a closure is and does.

the lexical environment for the foo() function will contain a string ‘a’ and a corresponding reference to a memory location what will be initialized to the value 10. (Note: this is probably not strictly true, as in most cases the value will be an object reference, but that’s a complication we can ignore for now.)

Every function is declared within an environment. It could be the global environment, but is more commonly that of another function. Every time you define a function, you are creating a closure that combines it and the lexical environment of its parent. For example,

When getName() is defined, a closure is created that combines the lexical environment of getName() with that of creature(). This allows getName() to access the value of myName. A key point to notice here is that the closure exists (and therefore myName) even after the creature() method has finished executing.

To demonstrate further, let’s add a little more complexity to our creature by enabling changes to the name:

See how the value of myName can be manipulated? That’s because the closure provides references to the actual variables and not just static values.

Furthermore, although we have created a closure for getName() and another closure for setName(), they both reference the same myName variable through the creature() lexical environment.

Our creature() is an example of a common use case for closures: to create private variables and/or functions. The only outside access to the myName variable is through the getName() and setName() methods. This helps to avoid variable name clashes and encourages good object-oriented design.

The following examples all use closures.

Stateful functions are functions that store state and return a function that depends on the internal state. Consider this example.

As an example, suppose we have a function to add two variables.

Using a closure lets us write this as

I won’t go further into currying or functional programming as this is a topic that I’m just starting to learn.

I’m sure that many of you noticed that our creature() looks and works a lot like a class object, except that we didn’t use the class keyword, there is no prototype, new new keyword, and no Object.create() or Object.assign(). If you cut your object-oriented programming teeth on languages that use classical inheritance as I did (Java, C#, Ruby) this may be a little surprising. It turns out that there are many ways to create objects in Javascript and most of them are better than classical inheritance. I plan to cover inheritance and object creation in my next post.

Finally, keep in mind that like you, I’m always learning. If you have questions or see something that needs clarification (or is downright wrong) please bring it to my attention!

Related posts:

While it is sometimes difficult to consider something as seemingly inconsequential as a week’s groceries as an investment, that is exactly what they are. By wisely choosing what we spend our money…

We are just ready to complete our fellowship. As every week, we are assigned a project work and this week we are going to learn tips that will help us to prepare our self and understand industrial…

half-thought thoughts half-worked writes lie in my drafts like abandoned curios dusted for a moment and put back on the shelf till the day they suit my mood’s decor. unfinished work…