Learn Closures In 7 Minutes

The most infamous interview question for JavaScript has got to be explaining closures. Because of this it may seem that closures are a complex topic, but in reality the idea of closures is actually pretty simple. All you need to know about closures is they they are a mechanism in JavaScript for handling variable scope. In this video I explain in depth exactly what closures are, how to use them, and why they are important.

🧠 Concepts Covered:

- What closures are
- How closures work in JavaScript
- Why closures are important
- When to use closures

🌎 Find Me Here:

#Closures #WDS #JavaScript

[HK-thtu]

SUMMARY: Closure i s "when you have a function defined inside of another function, that inner function has access to the variables and scope of the outer function even if the outer function finishes executing and those variables are no longer accessible outside of that function."

[scottj]

**If you are confused about his code example, please see my 3 step explanation:**

1. The outerFunction('outside') is called immediately when it is assigned to the variable "newFunction". (That's how it works when a function is assigned to a variable with (), if you didn't know this part, you would very confused).


2. Upon being called, outerFunction returns the function which re-reassigns our variable "newFunction" to be InnerFunction(innerVariable) instead of outerFunction(outerVariable).


3. Then by calling our variable as newFunction('inside') we are calling innerFunction('inside') which runs the console.log code. The closure is that innerFunction remembers and has access to the outerVariable parameter we originally set with outerFunction('outside'). Thus it is able to console.log both 'outside' and 'inside' even though it was called with just 'inside'.


If this helped you please thumbs up so others can see!

[canvaapplessons]

I was confused all along but your last sentence saved me 😁

[doniaelfouly]

i always come back to this channel whenever i need a clear, simple and straight to the point explanation

[techuchiha]

Closures are such an interesting topic that I always watch anyone or everyone coming up with an explanation for the same. This was one of the best explanations that I have come across.

[kuei-chinhuang]

Thank you, Kyle. Your explanation is so good that other people's closure videos starting making sense to me too.
You simplify web development so successfully that I always benefit from your channel since I started learning JavaScript!

[MrTubs]

I think I FINALLY understand closures. In fact, I found a good reason to use one today in my project. TLDR; When you need to pass a function with no parameters, but the function you want to pass has parameters. BAM, create a closure by putting the variables/parameters you need in the outer function and return a function with no parameters (just remember that returned function has access to the outer function parameters, even after it's done executing).

[TheFinalsTV]

*personal note*
newFunction call = (outerFunction + calling it).
outerFunction executes, returning innerFunction while passing in "outside" as part of the accessible scope.
newFunction then passes "inside" to the now returned innerFunction, calling it and completing the execution.

For anyone reading, I have no idea if I'm right but this makes sense to me rn.


Analogy note: newFunction is like the first car key turn, it activates the starter (outerFunction) which primes the engine by passing in "outside" and returning innerFunction as ready to ignite. The second turn is newFunction passing in "inside" which sends fuel, igniting the engine (calling innerFunction)

[bohdanartemenko]

Kyle, thanks to your videos I learned not only JS but English too.
I don't know how but you clarified and simplified all info in your videos so well, hope so youtube algorithm make you famous, good luck :)

[SahraClayton]

it's been 70 years and I still don't understand closures

[kristofbalinth]

Finally I funckin' got it. Thanks Kyle. I found myself coming back to your channel more and more when I need to clarify/understand some webdev-related stuff. Will definitely buy at least one of your courses. Keep up the good work.

[harrygill]

The first example you gave is not due to closure but due to scope chaining. Closures come in play when the execution context has finished but the variables still stay around. In first example we still have global execution context. But thanks for video always learn something new everyday.

[fire_boat]

It’s just a child function having access to its parents function

[snakeb]

Great video. I watched this a month before my interview but forgot the concept so I recommend y'all watch it again every now and then

[ganeshbabu]

Thanks for that Axios example, which no one ever has mentioned in their closure tutorial. We were using closures without even realizing it.

[zarakikenpachi]

Closures allow functions to access variable values, declared in another (parent) function, even after the parent function has finished it's execution.
In js, the variables within a function are accessible only within itself and only for as long as the function is executing.
You can understand this, by creating a new variable and assigning the parent function to that variable. Then do 'console.dir(new variable).
Try below example :

const add = function(){
let num = 1;
return function() {
num++
return num;
}
}

const addFunc = add()
console.dir(addFunc)

in the console > click on 'f anonymous()' > click on 'scopes' > click on 'closure'

In the above example, the addFunc function is declared in the global scope. Hence, it should not be able to access the variable in the add function, because variables can only be accessed within the scope and and while the scope still exists (as long as the function is running). But because closure preserves the value of the variable even after the parent function (add) has finished execution, the other functions (addFunc) that are that are using the parent function are able to access the variable.

Hope that helps. :)

[BusinessDevelopmentSolution]

i have tried so many videos on youtube but none of them explained in the way you did, thank you so much for a nice video.

[ahlen]

You tried to simplify the concept from the start and made your point clear. Thank you.

[mruduladdipalli]

5:07 - innerfunction() will only have access to those variables of outerfunction() which innerfunction() wants to use it., when we do console.dir( newFunction ), we can see [ [Scopes] ] Array, which has Closure Object with the variables that would be used by innerfunction() only, not all variables of outerfunction

[lucasoliveira-xsyh]

Man, congrats about your videos. I passed in a interview using your videos about React to learn how to build an app and now I'm using again. Continue this job.