Closures are the super-exciting topic of Javascript but at the same time it’s the most confusing topic too, so let’s dive deep into it in order to simplify it! Firstly define closure:
In Javascript, “Closures are the way to achieve lexically scoped name binding”. Technically, the lexical scope makes it so that every function value (i.e. every time when we return a function or assign a function to a variable) carries with it, the values of all variables that it depends on. The pack of records is what we call “Closures”.
Let’s take an example to unpack it, what would be the output of the below function:-
As we all know, in Javascript, there is something called “Lexical Scope”. So when we execute, when y() tries to run, it tries to find “a” inside its local memory store and it doesn’t find it here so it goes to its “Lexical Parent” and it logs 19. So, let me tell you that, this is what “closure” is!
Let’s dive deep inside the browser and into the console. Let’s just put a debugger right! Where? Inside the inner function, just before the console.log(a), put a debugger and just hold on in our program then we can find the “Closure” over here!
What does this mean now? Interesting and weird at the same time. So, “Closure basically means that a function binding together with its lexical environment”.Functions along with their lexical scope form a closure. So, inside y(), it forms a closure with the variable which was the part of x() lexical scope, they() was bound to the variables of x, so that means it forms a closure and it has access to its parent’s lexical scope. That’s what it is!
Let’s move to a little more complicated examples. As we already know that functions are like the heart of Javascript. We can assign functions to a variable and we can pass a function as an argument which many programming languages never allow us to do. This is the beauty of JavaScript.Even we can return a function out of another function. That is where closure comes into the picture and becomes more complicated i.e. when we return any function outside.
Let’s take an example over here:
Here, we can see that we are returning a function. Let’s see the output for this:
Yes, it prints the function y. Now, if we invoke z(), let’s see with the output:
Output:
In this piece of code what happens is, at some point in our program we just want to call z(), Now it will try to find out ‘a’ but where is ‘a’? We are trying to execute z() outside, a is not there in the global scope and x no longer exists after line no.- 9. So, what will happen to this ‘a’, when we invoke z(), what will it print? It will print 19. Here comes closure into the picture. Functions are so beautiful when they are returned from another function, they still maintain their lexical scope, They remember where they were actually present. Though x no longer exists still y() remembers its lexical scope where it came from. They have a strong binding.
In a simpler way, when we returned y, it was not just that the function code was returned but closure was returned. That closure encloses the function along with its lexical scope that was returned. It was put inside z, so, when we execute z somewhere else in our program, it still remembers the reference to ‘a and it tries to find out the value of ‘a’ which is 19, and prints it. This is what closure is!!!
‘Closure’ is the most common and most asked interview question. So, the simplest way to explain this is to just say “Function along with its lexical scope bundled together forms a closure. That’s what closure is!” We can better explore these kinds of examples and can answer this.
This blog is from Mindbowser‘s content team – a group of individuals coming together to create pieces that you may like. If you have feedback, please drop us a message on contact@mindbowser.com
Get the latest updates by sharing your email.
Flexible Engagement Model | Secure & Scalable Apps | First Time Right Process
Mindbowser helped us build an awesome iOS app to bring balance to people’s lives.
We had very close go live timeline and MindBowser team got us live a month before.
They were a very responsive team! Extremely easy to communicate and work with!
We’ve had very little-to-no hiccups at all—it’s been a really pleasurable experience.
Mindbowser is one of the reasons that our app is successful. These guys have been a great team.
Mindbowser was very helpful with explaining the development process and started quickly on the project.
The greatest benefit we got from Mindbowser is the expertise. Their team has developed apps in all different industries with all types of social proofs.
Mindbowser is professional, efficient and thorough.
Very committed, they create beautiful apps and are very benevolent. They have brilliant Ideas.
MindBowser was great; they listened to us a lot and helped us hone in on the actual idea of the app.” “They had put together fantastic wireframes for us.
They're very tech-savvy, yet humble.
Ayush was responsive and paired me with the best team member possible, to complete my complex vision and project. Could not be happier.
As a founder of a budding start-up, it has been a great experience working with Mindbower Inc under Ayush's leadership for our online digital platform design and development activity.
The team from Mindbowser stayed on task, asked the right questions, and completed the required tasks in a timely fashion! Strong work team!
They are focused, patient and; they are innovative. Please give them a shot if you are looking for someone to partner with, you can go along with Mindbowser.
We are a small non-profit on a budget and they were able to deliver their work at our prescribed budgets. Their team always met their objectives and I'm very happy with the end result. Thank you, Mindbowser team!!