Closures In Javascript

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”.

Why do we need closure?

  • Closure is the most beautiful part of Javascript and it has a lot of advantages. We can encapsulate the data so that other functions or other parts of the program cannot access it. It preserves local variables within the scope.
  • There is something called module patterns and function currying in Javascript, closures are used there also.
  • By that logic, if we want a function to always have access to a private piece of state, We must use “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!!!

coma

Conclusion

‘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.  

Content Team

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 in touch for a detailed discussion.

Hear From Our 100+ Customers
coma

Mindbowser helped us build an awesome iOS app to bring balance to people’s lives.

author
ADDIE WOOTTEN
CEO, SMILINGMIND
coma

We had very close go live timeline and MindBowser team got us live a month before.

author
Shaz Khan
CEO, BuyNow WorldWide
coma

They were a very responsive team! Extremely easy to communicate and work with!

author
Kristen M.
Founder & CEO, TotTech
coma

We’ve had very little-to-no hiccups at all—it’s been a really pleasurable experience.

author
Chacko Thomas
Co-Founder, TEAM8s
coma

Mindbowser is one of the reasons that our app is successful. These guys have been a great team.

author
Dave Dubier
Founder & CEO, MangoMirror
coma

Mindbowser was very helpful with explaining the development process and started quickly on the project.

author
Hieu Le
Executive Director of Product Development, Innovation Lab
coma

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.

author
Alex Gobel
Co-Founder, Vesica
coma

Mindbowser is professional, efficient and thorough. 

author
MacKenzie R
Consultant at XPRIZE
coma

Very committed, they create beautiful apps and are very benevolent. They have brilliant Ideas.

author
Laurie Mastrogiani
Founder, S.T.A.R.S of Wellness
coma

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.

author
Bennet Gillogly
Co-Founder, Flat Earth
coma

They're very tech-savvy, yet humble.

author
Uma Nidmarty
CEO, GS Advisorate, Inc.
coma

Ayush was responsive and paired me with the best team member possible, to complete my complex vision and project. Could not be happier.

author
Katie Taylor
Founder, Child Life On Call
coma

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.

author
Radhika Kotwal
Founder of Courtyardly
coma

The team from Mindbowser stayed on task, asked the right questions, and completed the required tasks in a timely fashion! Strong work team!

author
Michael Wright
Chief Executive Officer, SDOH2Health LLC
coma

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.

author
David Cain
CEO, thirty2give
coma

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!!

author
Bart Mendel
Founder, Mindworks