How do closures work? (JavaScript Fundamentals, 2023)

Closure is a fundamental feature of JavaScript, arguably one of the features that made it as widely usable as it is today. In this video, we'll take a look at how closures work and what you can do with them.
Closures and Objects: wiki.c2.com/?Cl...
My Links
shaky.sh
shaky.sh/tools
/ andrew8088
#coding #javascript #closure #ecmascript

[@lifeofmrc]

First time this concept really made sense to me. Thank you.

[@JosimarBezerra-fx8wb]

This is probably the best content on this topic I've seen in a long time. Well done Andrew and thank you for the great content. Keep it up!

[@zuggrr]

You are amazing. this is crazy good

[@chrishanthacosta4093]

Really smart teacher.

[@emreozgun3846]

Really informative. More on fundamentals please.

[@thedelanyo]

I've learned that closures in JavaScript help you to avoid syntactic classes.
And now, for first time, I have somehow gotten my head around it

[@CodeOnBlocks]

Man I love your theme so much. This was a good video, I'll probably never use it, but it's good to know it's there. Thanks!

[@andrew-burgess]

Do you write much JS/TS?

[@CodeOnBlocks]

@@andrew-burgess Yes, all the time. Why?

[@andrew-burgess]

@@CodeOnBlocks ah, just trying to understand how you wouldn't use closures. But maybe I misunderstanding.
BTW, the editor theme is catppuccin!

[@moreshwardalavi]

Love your VS Code settings.. Please share with us!

[@milutinke]

Can you share your .nvim dots?
It looks awesome.
Also, is that Catppuccin theme?

[@andrew-burgess]

It is Catppuccin! You can find my dotfiles on my site: shaky.sh/simple-dotfiles

[@markokraljevic1590]

currying and prototypes

[@ibraheem128]

Hey, thanks for the video.
What's the extension you use to get error messages show up in the IDE so nicely?
(E.g. private not available in JS)

[@andrew-burgess]

Thanks! That's just a vim plugin, but any TS / eslint plugin should do it!

[@artyomtaranenko2267]

Thx for this video)
Maybe next video about closures in React?

[@andrew-burgess]

Thanks for the idea!

[@yt.neerajkumar]

Next Video! Prototypes and Production level usage

[@dasten123]

Here is what I don't understand:
let foo = 1;
function test() {
console.log(foo);
}
if (true) {
console.log(foo);
}
The fact that the *function* can access the outside variable is because of "closure". Right?
The fact that the *block* can access the variable is _not_ called closure, though. It doesn't have a fancy name. But it's actually the same idea, isn't it???
Why are there tons and tons of videos like this, trying to explain something (that just makes JavaScript work as one would expect), BUT ONLY when it's about functions -- and there is apparently no need for explaining anything when it's about blocks??
I mean, I don't think we need this stupid word in the first place... but why isn't it used for blocks? Or is there a difference that I missed?

[@andrew-burgess]

Good question! So in your example above, there's no closure. Both the function `test` and the block can access `foo` because of lexical scope: in C-style languages like JS (and probably other languages too), that means that inner levels can access all their outer levels.
The closure happens when a function has access to the lexical scope of another function that *has already completed running*.
Here's an example with no closure:
function foo1() {
let bar = 1;
if (bar > 0) {
console.log(bar);
}
}
foo1();
After the call to `foo1` completes, the variable `bar` can be cleaned up, because it's no longer in scope.
However:
function foo2() {
let bar = 1;
return () => {
console.log(bar);
}
}
let getBar = foo2();
This time, `bar` will not be cleaned up, because of closure: long after the call to `foo2` completes, `bar` will still be held in memory and accessed when you call `getBar`.
I'm no expert, but I think there are many programming languages that don't support closures. Doing some quick research just now, I found this reddit thread, which talks about some of the challenges of implementing closure in a language: www.reddit.com/r/ProgrammingLanguages/comments/r4m1sm/how_does_one_implement_closures/

[@merotuts9819]

@@andrew-burgess So basically, to use JS Closures one has to make sure to store it on a *let* or a *const* so that the function won't get GC'd ?

[@dasten123]

I still don't get it, honestly. But I decided to give it up... things like that can _really_ drive me nuts^^

[@flippa_da_boss9998]

Markiplier's younger brother, is that you?

[@andrew-burgess]

Lol that's a new one!

[@edgeeffect]

"You might think this pattern is out of date" - absolutely not! Putting classes into JS was massively wrong-headed. JavaScript is LISP dressed up as C and trying to turn it into "Fake Java" with classes is just "disgusting". In a class, you can label something as `private` but with closures it really, actually is private. Closures are bad for inheritance, but what the hell would you be trying to do with inheritance in this day and age anyway... I think of the meme of Bart Simpson stood at the blackboard, writing out 100 times "I must learn to prefer composition over inheritance". ;)
I just don't understand why people would want to take a perfectly good functional language and try to turn it into the same old mistaken vision of OOP that C++ gave us years ago.