JavaScript the Hard Parts: Closures, Scope, and Execution Context

We've re-recorded and uploaded a newer version of this workshop! Watch the lecture in better quality here - bit.ly/34p2VZN
In this recording of our popular workshop, JavaScript the Hard Parts: Closures, we'll dive into closure, scope, and execution context in JavaScript. We put on these workshops for free each week in LA, NY, and Online - you can see upcoming ones here: codesmith.io/coding-events
This workshop is part of CSX, our free online learning platform. Test your knowledge of the concepts by making an account here: csx.codesmith.io/
SUBSCRIBE for more! 👉tinyurl.com/codesmithsub 👈
Stay connected to our community!
Codesmith: www.codesmith.io/
Free Events & Workshops: www.codesmith.io/coding-events
Follow us to stay updated!
Facebook: / codesmithhq
Instagram: / codesmithio
Twitter: / codesmith_
LinkedIn: / codesmith-llc
#codesmith #learntocode #javascript

[@Codesmith]

*Timestamps* JavaScript principles - 3:20 What a closure is - 5:12 Functions can be returned from other functions - 9:38 Calling a function - 39:20 Individual backpacks - 1:23:17 The importance of closures - 1:40:05

[@yebot]

Tremendous information. I don't even mind losing several minutes of my life watching homey eat Gummi Worms and text his mate dinner plans.

[@pannihto7588]

It's incredible that this kind of content is available in free access. Thank you for your hard work

[@tatjanahuppertz2658]

I have just finished your video "Javascript the hard parts" on Front End Masters and wow, i understand now so much better what is actually happening in JS! Thank you, very engaging way of teaching while making these concepts clear!

[@BrantK147]

Will's digressions are the best XD I can tell he gets excited about closures haha

[@snwbubble]

Will is a great teacher, and quite hilarious

[@metasavagex]

What an amazing teacher, he’s so good 🔥🔥🔥

[@EscapeOnez]

FINALY someone that cares to explain the memory mecanics of closures,you got yourself a new follower there,it's real hard to find people that explains what's actualy going on within the machine while executing code,i had the same problem with recursivity,people explaining the code,not the mecanincs involved in it.Greetings from France !

[@maniac50ae14]

I suspect its because they dont know. I think a lot of coders only understand syntax through repetition but not the why

[@TibbyProductions]

This instructor is fucking brilliant - wish I had him for my online learning

[@jenso413]

43:44 made me laugh out loud, “are we CAWLING it in line 1?” 😂

[@seemabaloda6250]

I really like the way taught the entire concept in this free class but i m really disappointed to see that lots of people watch the video but less likes on this video. People like on cringe video but not support such type of education videos😥. Sir thank u so much. Love from india😍

[@joonkim9302]

1:08:00 Crux. Why we need closures. 1:34:00 counter location 1:37:00 memoize/ once

[@michaelnguyen7950]

I've been doing some research on Closure in JavaScript and related stuffs such as Scope, Lexical Scope and Execution Context. And this by far, the best of the best explanation I've ever seen. Thank you so so much, mad respect to Will and Codesmith, also the students in the video are doing a great job in asking very good questions!!!!!

[@Codesmith]

Thank you so much Michael! They're the best and it's so good that it made sense for you

[@MichaelSomeRandomString]

Articulate, stimulating, thorough, informative, and entertaining. Thank you!

[@pulok9909]

best tutorial I have ever seen on closure.thanks a lot.simply superb!

[@pratiksonawadekar3646]

Thanks for the wonderful video. Presented and explained beautifully . I have seen other videos on closure as well. But after watching this one, I learnt the actual concept of closure. Thanks Will.

[@youmnaification]

Thank U. your interaction kept me so focused and now I understand JS closures.

[@shivyadav3486]

i really love the way he teaches

[@s0urp0wer5]

He's smart and good at explanation but he's kind of an a-hole in how he talks to the students and I don't appreciate him swearing during an educational situation

[@nickeax]

What don't you like about swear words? And do you decide for yourself which words to classify as swear words or just the ones others tell you?

[@amitkumargupta-]

@@s0urp0wer5 And I like that part about him. Different people different views.

[@stiffcod5250]

He is an amazing teacher. REAL TEACHER. Love from INDIA. Long live codeSmith

[@kandelaarjan363]

Incredible, no doubts whatsoever throughout the video.I feel myself so lucky that I found this channel.

[@Codesmith]

Welcome aboard Kandel!

[@dulinDis]

Thanks for an amazing explanation. I have finally understood all the process :)

[@ManojKumar-qe5dd]

Best ever explanation ! Finally understood Closures

[@klaaskabini5407]

Thank you very much. I now understand closures and the importance of high order functions

[@professoroflogic8788]

Never thought I'd get a laugh learning about backpacks. Great lesson. I'm going to ny to attempt to get in.

[@ediblemonster44]

Amazing. Loved this.

[@edinburghrules]

Incredible teacher 👨🏻‍🏫

[@Codesmith]

Thank you Sean 🙏

[@tarsier419]

This was very useful. Thank you!

[@kim92se64]

Sir thanks for teaching its just your kindness.... thanks once again TC

[@dizkoteck]

I took the Fullstack Academy course that explained this and EVERYONE else explains this better than they do.

[@aquartet5964]

Very nice explanation, teaching style is the best.

[@s0urp0wer5]

Lol no it's not the dude is a douche to the students and swears which is some attempt to be edgy and cool and just makes him look like a jackass. Very informative though

[@adrianvaldes3953]

These video is priceless. It is unbelievable all one can learn watching it. Beautifully explained, really. Thanks to Codesmith and Will Sentance. I just have one question for Codesmith. Why the function incrementCounter returns nothing? I don't understand how counter gets incremented every time I run myNewFunction if counter is never returned.

[@sonnayakanareika6140]

Thank you very much for your videos !

[@VillageJoker]

thanks will.. you are the best..

[@shyarxelil1987]

This is really amazing I don't know what to say but I'm so happy that finally, I understood how the execution context works. Why don't we call outer like this outer()();

[@fred-br1qq]

Will, were you not doing a DOM course on frontendmasters? You should do it on here if you are not doing it anymore ;)

[@MrYomantanepali]

at 1:23:19 don't you need to return the counter variable in the incrementCounter function to be actually accessible in global scope ?

[@kim92se64]

Sir, Can i say Backpack is a Virtual Memory rather than a Local Memory or Global Memory when it comes to Functional Context ?

[@adamradiv]

This is a fantastic video, my senior dev told me to watch it so I don't mess up his shit anymore. p.s. 1:10:08 - that "No" sounded super weird

[@Codesmith]

I just listened - I think it was done ironically....

[@Codesmith]

And really glad it was useful

[@inocent0boy]

Firstly, A Brilliant talk and explained the fundamentals really well, Precisely what I was looking for someone to explain the concepts and I am so glad I stumbled upon Codesmith and found this hidden gem!!! 1 doubt though: @1:34:30 on the scenario "when counter is declared global", Why the answer is not 1,2,3,4 instead of 1,1,1,1? It's Just like how we would normally reason whenever there is a global variable getting mutated calling from some function multiple times. no? Basically is there a need of Backpack if the reference being enclosed is of a global label?

[@eslpedro]

That's correct, if put in global escope the result will be 1, 2, 3, 4. I run this code and get this results. Other than that, EXCELLENT LECTURE!!

[@isaacallen9380]

The speech at the end XD

[@ChrisTian-ox5nr]

Persistent.Lexical Scope. Reference. Data ( Closure Backpack 🎒)

[@spiiikes]

I attempted to run myNewFunction() as presented in the video by logging it to the console as console.log(myNewFunction()); However, the console shows undefined. When I correct counter++ to return counter++, it works. Is there something I'm missing in the lesson?

[@dacree0216]

I think you are right, the myNewFunction does not return anything, that's why you got undefined. But the counter variable do increment, it's just not returned so we can't access or to see it. If you change counter++ to console.log(counter++), every time you run myNewFunction(), you'll see the value is increment by 1.

[@chengjieyun59]

Put "console.log(counter);" right under "counter++;" to get the different results of 1212, 1111, and 1234, based on where you put "let counter = 0;"

[@BlockCylinder]

We all have a need for closure.

[@double89k]

At 1:34:40 he changes it so that the counter variable is created and is set to 0 in global. What was the correct answer to what the result of running myNewFunction() & anotherFunction() twice? He says "1,2,3,4" "1,2,3,4" and then says "1,2" is correct. Can someone please clarify? On a side note, this lecture on Closures is absolute gold, thanks for sharing this.

[@yijunmao9879]

You should get "1, 2, 3, 4". When you invoke myNewFunction or anotherFunction, it would first try to find counter in the local scope i.e. inside incrementCounter definition, find counter not there. Then it goes one level outside along the scope chain, which is inside the function outer definition, still find no counter there. Finally it goes to the outermost scope, which is the global scope and find counter there, so it increments counter. Because counter is in the global scope, each function invocation would increment it by one and you should get "1, 2, 3, 4".

[@sonnayakanareika6140]

I had the same question. Hope 1,2,3,4 is the correct answer , otherwise I didn't get it.

[@jerry4080]

But because you don't return anything in the incrementCounter Function you will receive undefined ?

[@ilonasell1101]

Hello, could we do this instead "secondLabel()"? Or does it have any benefit to call directly createFunction() in generatedFunc (mentioned in 38min). function createFunction() { function multiply(num) { return num * 2; } return multiply; } const secondLabel = createFunction; // Assign the function createFunction to secondLabel const generatedFunc = secondLabel(); // Invoke createFunction through secondLabel and assign the result to generatedFunc const result = generatedFunc(3);

[@Codesmith]

Hey @ilonasell1101 - great question! That would work the same way ☺ - secondLabel is there to demonstrate the difference between assigning the _function definition for createFunction_ to a variable (secondLabel) vs assigning the _evaluated result of invoking createFunction_ to a variable (generatedFunc) 👍

[@AB-cn5hb]

I think it would be more helpful if returned value is in fact reference to memory of function. It would clear bit more.

[@isaacallen9380]

Is const generatedFunc = function (num) { return num*2; } valid syntax?

[@tarsier419]

yes if you want to test code, just right click on any web site -> inspect element -> go to the console tab and you can write code right in there when you want to test something

[@jonathangonzalez6615]

Shout out to the West World Reference

[@muhammadosama6261]

how this is possible in javascript that function can be call before declaring function / defining function ??

[@Codesmith]

The reason you are able to invoke a function before it is declared is due to the concept of Hoisting in JavaScript. It is an interesting process that JavaScript does under the hood, and a concept that you need to be familiar with as you might be tested on it in your Technical Interview. It is the idea that under the hood, variables and functions are "hoisted" to the top of their scopes, and they are allocated space in memory. It works differently for variables and functions, so I encourage you to read up more about it. Here are a few helpful articles to get you started: MDN Article developer.mozilla.org/en-US/docs/Glossary/Hoisting Stack Overflow stackoverflow.com/questions/261599/why-can-i-use-a-function-before-its-defined-in-javascript Hackernoon - hackernoon.com/hoisting-in-javascript-532203715c5c The explanations are good and concise! The code snippet links are broken, but if you copy and paste the url in the address bar for those images, you can see them in another tab to reference! - Codesmith Academic Team

[@plam3905]

43:42 this made me laugh

[@inordirection_]

How do Promises and Async/Await depend on closures? Anyone know?

[@Codesmith]

If you watch the async Javascript the Hard Parts I think it covers at least promises there

[@icaruz9094]

Can I join on your future class

[@holyshooter4142]

LOL THAT DIPLOMA

[@Codesmith]

😂

[@caizza3]

How the concept and the variable environment are both called "closure" is quite confusing when trying to communicate it.

[@Codesmith]

Hey Frank - This is a valid point! Another way to communicate about it is to think of the concept and the variable environment as being one in the same - the lexically scoped variable environment is called a closure and talking about the concept of lexically scoped variable environments is talking about closures. I hope this helps! - Codesmith Academic Team

[@logannelsen4932]

Why Sam?

[@sonofaput]

I have wasted a lot of time on FreeCodeCamp (not saying it's not good, it just doesn't fit my learning style). I wish I found CSX earlier.

[@Codesmith]

Thank you :D

[@MovieMongerHZ]

Him: "Don't watch the game (I need all your attention)". Him: "Provide your name if you don't have a mic so we don't waste time." Him (Later): "Let's waste five minutes plugging my candy." Him (Later): "Let's waste time pitching the codesmith sticker." good content otherwise, but he's a bit hypocritical. Not sure if I'd want to be listening to him live.

[@jon_escamilla_]

Was he really pitching the sticker tough? and yeah. People are weird and get distracted and yet hate those get distracted.

[@weimpromptu]

@@jon_escamilla_ so true. good catch.

[@meilyn22]

He's the teacher man.

[@Codesmith]

😂

[@joshuwa3953]

Dam didn’t know Will was so rude

[@cannabisanomaly]

I love Will so gosh dang much

[@JPDouma]

Good walk through. Thank you. One request, please don't eat while wearing a microphone.

[@cprooney]

Teaching and Empowering others. Super Duper legit

[@Codesmith]

Happy to hear you enjoyed this one!