Closure : A JavaScript Fundamental

Come closer to Closure in JavaScript

The more you are close to JavaScript fundamentals, the more you are away from error-prone codes. And the Closure is one of the most rudimentary concepts that can be a nightmare for you. But don’t worry; the ghost can’t haunt you anymore afterwards.

Srikanta Dutta
Sep 2, 2018 · 3 min read

Closure in JavaScript is an inner function that has access to the outer function’s members. So, along with its own scope and global scope members, it can also access its parent function scope chain. Closures are extensively used for object data privacy, callback functions and in event handlers.

Example:

Example : 1

Output:

Output : 1

Referring to the code snippet in example 1, one can see that the outer function greetingMessage’s variables preMsgText and postMsgText are accessed inside the inner function showGreeting. The showGreeting function is called closure.

Here, we have briefly talked about what closure is and how one can define it in simple way. Now, let’s talk about its practical use cases and why it is so important in JavaScript. To understand that you have to give a close look at the below code snippet.

Example : 2

Output:

Output : 2

In example 2, by declaring the preMsgText and postMsgText inside the greetingMessage function, we made those as private variables which can only be accessed inside the function and outside through some member function (getter or setter) of the same scope chain. Now on the other side, we have set showGreeting and setGreetingMessage functions as public member by exposing those in the returned object. These two functions now can access preMsgText and postMsgText from outside.

It is one of the popular features of Object Oriented Programming (OOP) that helps in data hiding.

So far, it is simple. Right? Now, let’s unfold the ghostly part of it and what problems one might face. See the below code.

Example : 3

You might be expecting the below output-

Output : 3.1

But unfortunately, it will print this-

Output : 3.2

Did you find anything dubious in example 3? When you debug the code, you will see the value of i is being shown properly while returning. However, at the end, all the variables of the objects have same value. The reason is the inner function has access to the outer function’s variables by reference. So each time, it is returning the reference of i, not the actual value of i. And when we call the regNo function outside, the value of i has become 3.

Now, the question is how we can overcome it. One of the best solutions is to use Immediately Invoked Function Expression (IIFE) in the following way.

Example : 4
Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade