Closures Explained in 100 Seconds // Tricky JavaScript Interview Prep

click the f**king button man its his f**king dream😂😁😂

If you ever find yourself faced with a question like this, the best thing you can do is to walk away and not waste your time with such interviews, because they might as well ask you what is the output of: "b" + "a" + +"a" + "a" and other "tricky" questions like this.

Took me an hour to fully understand a 5 minute video, but I got it

What a legendary video. It took me around 10 minutes of pausing and rewinding just so I could absorb the information.

This is the best video on closure

This is prolly the best explanation of closures there is!

ok

am i getting it right? it involve async and global variables. the setTimeout ques up something and the loop keeps running, so by the time setTimeout runs log, 'i' has changed to 3. so then wouldn't that meen 'i' in the closure is just a reference? why

who else didn't understand a word

Can't wrap my head around it.

Great Video !!

quick Q why 3 not 2 ?

Why var i return 3 three times (3,3,3)? Why not only 1 time when it reached the end of for loop? How it keeps repeating the loop 3 times?

awesome explanation as always!

Buy using Var also, we are able to print 0,1,2 but fr that we need to write another function, and put them inside in it, var is global variable, so they pointing to same memory location, that's the reason, so we just need to change that position, when everyone loop iterate, so for that we need closure, that definitely solve the problem.

So basically the closure takes a snapshot of the value of i every time it's called

So basically the closure takes a snapshot of the value of i every time it's called

can you explain call stack please

thanks

It looks like you were sick when recordings video because ua are usually fast

Looks like react to me

Hey Fireship! Great video, What's the extension you're using to console.log the values within the IDE next to the console.log statement?

I laughed outload like a crazy person in the office when he said "But this is gonna be very difficult if you don't click the f***ing button"

I still don’t know exactly how JavaScript works I couldn’t understand when you passed the 3 as arg how this value transferred to (num) in the arrow function 😮

I'd kick out anyone from my company if they'd use var ever. I don't care if you are one of 5000 devs and accidentally know how it works, it's just NO GO for me.

talking too fast

First thing I'll mention is why are they using `var`. I'd avoid it like the plague. 😂 It introduces unnecessarily unintuitive problems (like this maybe?)

And then I'll explain it like so:
With `var`, the variable `i` actually lives "outside" the loop. Every iteration of the loop creates a new function `log`, but all of them references the same "outer" `i` variable. What's logged depends on when the loop finishes. If it's done by 100ms, and it'll likely will be, then the `i` variable will be 3 by then, and all the timed-out functions are going to log it. If for some reason it isn't then the callback will log whatever is the `i` value at that time

With `let`, every iteration gets its own "copy" of `i`. And the `log` functions use their corresponding copies of it. Each iteration has its own "enclosure" of state/variables/values. It doesn't matter if the execution of functions within them are deferred for a later time; they will still refer to the values within the same "enclosure".

Ofc I do not know if that is fully correct 😂 I feel like it's mostly right though. Also I think I've read somewhere that "closure" !== "enclosure"

Jesus Christ I legtitimately thought I had this figured out until the hoisting part, and the fact that it logs 3 3 3, instead of 2 2 2 when using var.

📌

So closures is just global variables? I dont understand

OrganicChemistryTutor of programming u great ser

Is this where clojure gets its name from, or no?

i dont get it it increments from 0 to 3 and then runs the for loop?

Can someone explain why it logs 3 from the beginning? I didnt get how the loop is supposed to run 3 times, but global i runs 3 times despite i being not less than 3 anymore

Why does it return 3, 3, 3, instead of 2, 2, 2 since the iterator is to i < 3?

Why just declaring functions in an object/class consume memory when compiled code don't have problem like this for eg.C#.

Note: i am asking about functions without prototype in javascript compared to C#, java, etc

Imma have to watch this again a few times cause, I don’t get it lol 😂

I recently gave an interview for a company. I was asked the same question. I wish I had watched this video before.

Some people in the comment suggested that you could still use var and log 0, 1, 2 by doing IIFE (immediately invoked function expression) and that is a common solution when you are forced to use var (for example, during an interview).

I've been coming back to this video from time to time as my understanding of JS improved, and I have found another interesting solution with var while exerimenting:

for (var i = 0; i < 3; i++) {
function log(){
console.log(this);
}

setTimeout(log.bind(i), 100);
}

So, basically we create a bound log function, and we pass the value of i variable in the current iteration as "thisArg".

Been trying to understand closures for ages and this video taught me them in 5min well worth it. Thanks.

Just when I thought I knew JS😭

3 years writing JS and I never took the time to look up the diff between let and var. Thank you very much.

"Javascript closures are functions that can access values outside of their own curly braces" Can't all functions do this? Like if you have a global variable, then all of your functions are closures?

But if the value of var i = 3; How is this (i < 3) condition being fulfilled ? Please explain me