DEV Community

Cover image for The Wacky World of Closures & What Makes Them Useful

The Wacky World of Closures & What Makes Them Useful

aruna-x on December 16, 2021

Can you guess what this prints out? for (var i=0; i<3; i++) { setTimeout(() => console.log(i), 2000) } Enter fullscreen mode ...
Collapse
 
ynfle profile image
ynfle

As far as I can tell (tested in node, chrome and safari), your first example prints 3 three times, not 2. This is because the variable is set to three, checked that it doesn't fulfill i < 3 and then exits the for loop and retains the value 3

Collapse
 
aruna profile image
aruna-x

Gosh, of course. Thanks for the note. Fixed!

Collapse
 
ynfle profile image
ynfle

Great post, by the way

Thread Thread
 
aruna profile image
aruna-x

Thank you so much!

Collapse
 
msk61 profile image
Mohammed El-Afifi

Nice article, especially for the pointer to how closures are used and handled in other languages. For me it was the first time to hear about nonlocal in python although I claim I've known python for quite a long time.

Collapse
 
aruna profile image
aruna-x

Thanks Mohammed :) I appreciate you telling me what was most helpful. I’ve heard this from a couple other folks who know python too.

Collapse
 
amodeusr profile image
Ricardo Magalhães • Edited

Or you could simplify everything using modern javascript and not using old and deprecated var but instead let...?

It seems like the simplest solution, I didn't quite understand why you didn't talk about it.

Collapse
 
aruna profile image
aruna-x

Hi Ricardo! It’s simple really. What I was interested in was creating a toy problem that would serve for learning purposes, that would help clarify how closures (and scope) work. If you think of a different example of closures that would similarly clarify the points above, I’m happy to hear them.

Collapse
 
torkage profile image
Torkage

You should test your example :
for (let i=0; i<3; i++) {
setTimeout(() => console.log(i), 2000)
}
It prints out 0,1,2 as expected. Because you used let to declare i. Can you guess why ?

Collapse
 
aruna profile image
aruna-x

I also put the ++ in the wrong spot according to my notes. Fixed that as well!

Collapse
 
torkage profile image
Torkage

Please also check your factory example, factory(4)(2) returns an error. Your namespacer function also returns undefined for namespacer.public1(); and
namespacer.public2();

Collapse
 
aruna profile image
aruna-x

Fixed! Thanks again :D

Collapse
 
aruna profile image
aruna-x

Lol, my bad. I have var written in my notes, but typed let here when I wrote the blog post! Thanks for pointing this out!

Collapse
 
parenttobias profile image
Toby Parent

This is brillliant! Very well written, I may have to refer back to this. Often. Thanks for it!

Collapse
 
aruna profile image
aruna-x

Thank you Toby. That makes me happy. I’m glad it’s useful!

Collapse
 
lowlifearcade profile image
Sonny Brown

This does seem like a good reference to have on hand. Thank you. The article is well written.

Collapse
 
aruna profile image
aruna-x

Thanks Sonny. Happy to hear it’s useful.