JavaScript Closures: Simplified
By: Tushar Narula
Tags: JavaScript, Javascript Interview, Javascript Development, Closures Functions, Interview Questions

For a long time now, the concept of Closures has been giving nightmares to developers especially those preparing for a JavaScript interview.

But once you learn closures, you’ll want to use them in your code, making it more robust, concise and solving a problem that we are going to discuss.

In the next 5–7 mins, lets solve this mystery/problem , once and for all.

I’ll try to make it as simple as possible.

For a clear understanding of closures, we need to understand the the concept of lexical scoping in JavaScript.

In simple terms, Lexical Scoping is the concept of JavaScript functions being able to access variables(function too) declared outside it’s scope.

Let me show this with an example.

Lexical Scoping in JavaScript

So, how is lexical scoping linked to closures ?

Closures are basically all about preserving the outer scope that is being used in the inner function.

Lets start with the simplest example and a question that you might encounter while answering a question in an interview on closures.

Is the code written in below image a closure ?

Simplest example of closure.

Yes, this is a closure. I’ll prove it in a minute !

So in the above example function A() preserves the value of the variable outer. In the console, you can clearly see the highlighted value of the [[scopes]] array, that the closure for function A() is outer variable and the global window object.

I hope you are starting to what exactly closures are. They’re simple, aren’t they ?

Now, let’s move on to a slightly complicated example of closures, shall we ?

A slightly complicated and a more useful example of closure functions

So, what’s happening here ? I guess you have some idea now. No ? No problem, let me explain this to you quickly.

Here, inside function A() we have declared a variable inner, you know according to it’s location 😛. Function A() returns another function B() that adds variable inner and outer.

Now we executed A() and stored the result in C. So A returns function B() as result, so that implies variable C contains function B() waiting to be executed and give out its result.

So what happens if we execute C now ? Let’ see

We get the expected answer 12.

Let’s understand what’s happening behind the scenes.

Here comes the important part now, even after being returned as a result from A(), B() retains the variables from it’s outer scope that are required to give it’s own result.

Take note, inner variable is outer scope for function B() and outer variable is outer scope for function A() as well as function B(). But B() retains them both as they are used to return it’s result.

As you see in the console, [[Scopes]] array now has 3 values, one is inner variable, second is outer variable and third is the global scope.

In essence, you can define Closures simply in one line:

Closures are nothing but functions that retain values from it’s outer scope.

Use the simple examples given above and nail that question.

I hope that pretty much explains JavaScript Closure functions in simple words.

If you liked it and learned something, please give a clap.

Thanks a lot ! Cheers !