Introduction

Recently I started to read the book Eloquent JavaScript where I came across this concept called closure. And I have to say I was really impressed with this feature in JavaScript.

In this article we will learn about the concept of Closure in JavaScript with few examples. We will do a code walkthrough as well.

Maybe you will learn few things about functions as well.

In the end I hope you will have clear mental model about Closures in JavaScript. Let's get started.

Important points about functions in JS

Before taking dive into closure, I want you to understand two things about functions in JavaScript.

The first point I want you to remember is that functions re-creates its local variables every time it is called.

See the following example,

The function handleTrophies re-creates value of trophies variable every time it is called. That is why however many times we call the handleTrophies functions the same value will be console logged. It will never be more than one.

Let's move on to the second point.

The second point is, in JavaScript, functions are not only syntax but value as well. They can be assigned to variables.

We can see that fncallholds the value which is a function.

If we will write it as fncall(), it will work as a function.

Notion of Closure

These two points above brings an interesting question, what happens to the local values when the function that created them is no longer active?

In the above example, fncall holds function called inner as a value which is returned by a function called outer . The function outer is now no longer active.

The output of above code snippet is as follows.

We can see that closure has preserved value of temp.

This feature of being able to reference a specific instance of local variable in an enclosing scope is called as closure.

It simply means that inner function can access the variable of outer function's variable with help of closure.

So the main feature of closure would be it allows to remember values from completely different scope. To say it in more fancy way, Closure keeps values alive.

Lets look at another example to understand closure better.

Code walkthrough:

1. call_one has the handleLike function body as its value.

2. call_two as well has handleLike function body as its value.

3. But both these values stored in call_one and call_two are not same. Because, the function calls made to updateLike were made separately and it returned a brand new handleLike function as a value each time.

4. When we execute call_one() , we are executing the function which call_one has in its value. At point 1, before executing the statement, the value of like stored in closure of call_one is 5.

5. While executing the statement at point 1, the value of like is incremented to 6 from 5 and stored in the scope of call_one as closure.

6. Similarly it will update to 7 at point 3.

7. Now at point 2, before executing the statement the value of like in closure of call_two is 5 and not 6. And then it will be updated to 6.

8. Similarly it will be updated to 7 at point 4.

I hope this example give you a good mental model.

Points to remember about Closure.

1. Closure are property of JavaScript function alone.

2. When called the function body(in our example handleLike) sees the environment in which it was created and not in the environment it is called.

3. The inner function(in our example handleLike or inner) has access to inner variables, the outer function variables and global variables.

4. In JavaScript, closures are created every time a function is created, at function creation time.

This is it from my side on Closure in JavaScript. I hope I am leaving you with good understanding of this topic.