Closure and Scope - Javascript In Depth

We take a look at the concept of "Closure" specifically in Javascript together. Closure is the concept of storing "state" within a function and having inner functions be able to "remember" that state even when called in other scopes.

We look at ample examples and visuals to really nail this point home as well as an analogy to help cement the technique for us. In the upcoming exercise video we'll look at several practical examples of where closure can be used to make our code more powerful and easier to work with.

Note that this is an advanced topic and will take a lot of practice and trying different things over time to really cement. We'll go through some practice exercises together on closure in the next video in the series.

Chapters:
00:00 Introduction
01:38 Closure Concepts
03:18 Scope Introduction
06:00 Scope Code Example
12:05 Functions in Functions
14:41 Nested Function Code Example
17:21 Closure Example
22:18 Scope Resolution
29:19 Closure Code Example
38:22 Golden Rule of Closure
39:01 Closure Visual Analogy
43:52 Next Steps

[kewner]

Hey Nader, first of all thanks for all these high quality educational videos! They go much deeper than everything else I've seen on YouTube, which is much needed. I can't imagine your channel not to be growing much bigger soon.

I'd like to ask you about closures. I've learned about this concept before, but from a somewhat different perspective: JS finds all the variable names the function needs from the lexical scope in which it is defined. It puts those names inside a special 'envelope' object that gets attached to the function object. Each name is a pointer to the original variable, so any changes made to the value referenced by the variable will be tracked.

For some reason this has always given me the impression that a copy of the function was used, which could still find the original variables thanks to this 'envelope' object. However, you're explanation seems to say that the _actual_ original logPrices function is called when calling logPrices from the global scope. Do you know if that is indeed the case, that the function we call from the global scope is actually the same function in memory as the one we declared inside wrapperFunction? I also wonder if there's any way to test this, but I can't think of one.

Another thing that I find interesting is that I guess the reason that the 'prices' variable inside the wrapperFunction remains in memory, even after finishing running the function, is solely because we've returned a function (logPrices) that might need that variable later on.

I realize all this is not important for practical use, I'm just curious I guess.

[timothyrees]

thanks for all the effort you put into these videos! You made a complicated topic quite easy to understand! :)

[danl]

You are so patient and hardworking man.... excellent

[vaadamachi]

Man Im just going to follow this entire course. Hats off for all of your works and details. Inbetween how many videos more in this playlist?

[kepdani]

very nice video, perfect explanation for closures and scopes. until the very end it was clear and I understood, but at the last visual analogy 42:00 I couldn't follow the analogy.

[Talel_kraiem]

@TechWithNader Does closures work with pass-by-value variables or only works with pass-by-reference variables ?
for the whole example you used prices as an array I wonder what would happen if it was a simple data type instead 🤔

[thedanielababi]

Hey Nader!
very informative and clear video, thanks!
I only have one question - you only talked about "const" variables. Do "var" and "let" acts the same?

[Kerwell]

i didn't even really think this was something you had to wrap your mind around, unless I'm being naive, but I always assumed it worked this way haha

[sakidibro]

great course, how many years of experience do you have in programming ?

[ShivamSharma-dqpu]

This could have been easily explained with the help of debugging tool in vs code. would have been easy for you too