JavaScript Closures Tutorial (Explained in depth)

JavaScript Closures Tutorial, FINALLY explained!

Closures are incredibly difficult to explain and understand, and sadly they come up in interviews all the time. Why do we need Closures? And how can you use them to your advantage?

JavaScript Closures from the series "10 Things JS Developers Should Know"

This is episode 9 in a 10 part series I’m calling 10 things javascript developers should know but probably don’t. In this series, we’re going to cover some of the most fundamental and important parts of JavaScript that most of us don’t actually know, and barely touch. Today, for episode 9, we’re talking about JavaScript Closures, what do they actually mean, why they exist, and how to use them. Episode 9: Closures. Let’s go!

All the code from this series is available here:

0:00:00 Intro
0:01:23 What is a Closure?
0:02:14 Theoretical Example: Outer function + Inner function
0:11:14 What makes Closures special
0:11:28 Practical Example: Click handlers
0:17:28 Outro

[dansmar_]

It's not just a javascript tutorial, but also how to comunicate and express yourself. This series is on my top bookmarks now. Thank you again!

[nyxthevoyager]

The intro was a couple of seconds, but pretty inspirational. Thank you! I decided to change my career at 28, and everyone looks like they know everything about programming. I am too late for the party. Knowing this little ptsd of yours is supportive of people like me!

[vladislavamarkova]

Another great explanation of a topic which is indeed hard to grasp! Clear, practical, and so nice to watch! Thank you, keep going that way. Wish you all good! : )

[rafahathibrahim]

First time on your channel and now also my favourite for javascript. Theres so much quality in your work, and that too is for free. Thankyou, you have my utmost respect.

[thomaswinterburn]

Excellent video explains it so well, I did some digging and found why it stays in memory.

So like quantum entanglement theory, the outer function is entangled with the inner functions so, the JavaScript engine uses garbage collection to clean up memory that is no longer reachable.

Because the inner function still has a reference to the outer function's environment, that environment is considered reachable and isn't garbage-collected. This allows the inner function to access variables from the outer function even after it has finished executing.

[fariskanbur]

Another excellent explanation :) We are looking forward to the coming of such series about js and similar special topics. Thank you very much for answering many questions on many people's minds.

[jkd]

I am in a full stack program and I think I learned more about closures in this video then the class on them in school. Awesome!

[aziham.]

Wow, Sina! Your last example on closures was exactly what I needed to finally appreciate their usefulness.

Previously, when passing a function to an event handler, I always wondered how I could pass something to that function while also passing it to the event handler.
I was concerned that it would execute immediately rather than when the event occurred, and that I would only have access to the event object.
However, your example has answered all of my questions.

Thank you so much, Sina! Your teaching style is phenomenal, and I would love to see you make a video tutorial on JS debouncing. I've watched a lot of videos on the subject, but I think your approach would be particularly helpful.

[B-Billy]

This is first time on your channel, and I am amazed by the the knowledge you put and the video editing & presentation skills are PRO. Perfect!! 🎉🎉

[snode]

Dude. A real person here. Thank you for everything. I'll always come back here and will bring others with me. Much love ✌🏽

[jomariiringan]

Awesome! This is one of the question from my job interview together with the Higher order function which you explain it much simpler than i imagine. This will also improve my code structure & development performance, Thanks!

[thegohmez]

Amazing. About halfway through I figured out....I have been using closures this whole time. Another great example is writing a custom hook to fetch in React. Great stuff. You describe things really well.

[andcap]

What a great channel!!! OMG, this is all i needed to understand some of the difficult stuff into JS. Thks for your content!

[steffancrowley]

Honestly this is the best video on the closures I’ve seen, thanks!

[JRMAMS]

You’re great Sina!!! You’re god sent and put out quality content that clarifies JavaScript concepts that are sometime not very digestible for new developers and aspiring ones.

[eumm]

these videos are so well done that you barely notice the time passing

[estoyboy]

Something very comforting about watching this expert repeatedly make the same typos I would make

[dylan]

I have been studying JS since early last year, and despite thinking I already had a strong grasp of closures, this video helped bolster my understanding. Molte grazie!

It would be great if you released some videos on TypeScript as the trend indicates it will be the standard for FE development (at least) in the coming years.

[apq]

What a great class you have brought us! I agree with you that this is a very though theme, but you had explained it with in a terrific way! Thank you Sina Qoli! 😃

[mattsmith]

@10:30 -
This all makes sense. I think it's also worth noting the difference between instance variables (object properties) and local variables - which can be created in a function but not in other objects.
Inside of this function, "const name = n", the variable "name" is a local variable. The only ways to access this variable are to access it from inside of the function, to use a "getter" function or include it in a "return" expression.
On the other hand, inside of a function, instance variables (not listed in this function) are declared using the "this" keyword as an access modifier. Ex - this.age = 21
Instance variables inside of a function are basically the same as a property inside of an object (excluding functions).
Instance variables are accessible from outside of a function, but only after creating an INSTANCE of that function, hence the name.
Local variables inside of a function are inherently protected because they have block-level scope to that function.
Parameters in a function are actually declared and instantiated in the body of the function as local variables.
In this example, he's using "human" as a (callable) function, and not as an object. I know this because he's invoking "human" without the "new" keyword, and he also included a "return" expression.
It's also a hint that he didn't create any instance variables, using the "this" keyword.

I hope this helps someone. I'm still relatively new at this, but I think I'm catching on. Great video!!!