Closure exposure therapy - Exploring closures in JavaScript with friendly live mob programming

🔗 NordVPN (Episode Sponsor)
Coupon code: funfunfunction (Use to get 1 extra month when signing up for the 3-year plan, which also gives 75% off)

Closures in JavaScript. How well do you know them? Maybe you've only barely touched closures in JavaScript, and maybe you've been using them for years? This week, we try to swim in them a bit, think about what closures in JavaScript really are, why they exist, and together code some examples and talk about them. A lot.

06:22 What are closures?
09:00 Are functions hoisted to the top of their closure?
18:10 Closures are referenced, not copied
20:00 Object Orientation and closures and classes
34:30 Where do you use closures / Dependency Injection

🔗 Quokka (the inline evaluation plugin)

💛 Follow on Twitch and support by becoming a Subscriber
We record the show live Mondays 7 AM PT

💛 Fun Fun Forum

💛 mpj on Twitter

💛 CircleCI (Show sponsor)
Robust and sleek Docker-based Continuous Integration as a service. I used CircleCI prior to them becoming a sponsor and I love that their free tier is powerful enough for small personal projects, even if they are private. Use this link when you sign up to let them know you came from here:

💛 Quokka (Show sponsor)
Wonder how MPJ evaluates JavaScript inline his editor. Quokka is the answer - use this link when you buy to let them know you came from here:

💛 FUN FUN FUNCTION
Since 2015, Fun Fun Function (FFF) is one of the longest running weekly YouTube shows on programming 🏅 thanks to its consistency and quality reaching 200,000+ developers.

🤦‍♂️ The Failing Together concept is what makes FFF unique. Most coding content out there focus on step-by-step tutorials. We think tutorials are too far removed from what everyday development is like. Instead, FFF has created a completely new learning environment where we grow from failure, by solving problems while intensively interacting with a live audience.

Tutorials try to solve a problem. Failing Together makes you grow as a developer and coworker.

📹 Each show is recorded live on Twitch in a 2-hour livestream on Mondays. The host, assisted by the audience, is tasked to complete a programming challenge by an expert guest. Like in the real world, we often fail, and learn from it. This, of course, reflects what the audience identifies with, and is one of the most praised aspects of the show.

⏯ On Fridays, an edited version of the show is adapted for and published on YouTube.

Content Topics revolve around: JavaScript, Functional Programming, Software Architecture, Quality Processes, Developer Career and Health, Team Collaboration, Software Development, Project Management

[funfunfunction]

Jump to
06:22 What are closures?
09:00 Are functions hoisted to the top of their closure?
18:10 Closures are referenced, not copied
20:00 Object Orientation and closures and classes
34:30 Where do you use closures / Dependency Injection

[vitorvitali]

please keep doing videos like this, they are so much better

[incubated]

function declarations are fully hoisted. function expressions are hoisted by assignment. that's why you can invoke the function before its declaration, but returning it turns it into an expression, so the assignment is not hoisted. if you were to write let func = function(), only the func name would be hoisted, but the assignment won't happen until the interpreter reaches line number

[JamesGaehring]

Really like this style of live-stream, something nice to break up all the "fail together" vids

[muzafferckay]

If you return an object which includes some functions from factory function then you should define that functions in returning object to avoid created each time the factory function invoked.

[lixler]

Your a smart dude that I just randomly followed off a "shameless plug" (your words ) on quora, 10 people said what you said in that post, but you were the only one I gained knowelege from cause you just kinda said it how it was, and everyone else was just like pretending to be smart only because they knew words. And when you called node a thingamabob in that post, it put a good ass smile on my face to know good smart people still exist. The way you put it, by throwing that little bit of goof in the knowelege, it clicked way better in my head than when the other people called it an interpreter, just to look good, they didn't want to teach. But I've only been playing with JavaScript and API's for like 3 days now, so like I'm the newest of the newest. I'm just a lazy 18 year old kid, but I hope it can make you feel good to know that I genuinely want to sit down and watch your whole channel, learn anything I can, learn everything you have for me, just after seeing 10 mins of this video and reading your 2 year old answer on a 5 year old question. I wish I could meet people like you in real life, in person. Your a special kinda human, special in a legitimately good way, unlike these people I'm forced to live around who are special, but in bad ways I want nothing to do with. I hope your gonna read this and feel what I felt in that moment. I would really like to talk to you some day.

[Fernando-ryqt]

You should do a video about advanced closure applications, like trampolines, it is an amazing optimization for recursive aplications, using the power of closures to avoid stack overflows.

Functional programming is awesome.

[realchrishawkes]

When are you going to try to take this full-time? Good video!

[lenaggar]

I love this format of videos .. kind of reminds me of your old videos when I was in my first steps in web development .. you helped me immensely <3 <3

[danielsimionescu]

Is this the return of functional JS videos? 😆

[fcs_]

Really like your channel! I'm definitely subscribing to your channel. It's filled with lots of useful information about JavaScript. I like JavaScript and you make it explain and teach the topics more clearly with your great teaching style. I look forward to working on more JavaScript projects and to add to my channel now that I understand the language and concepts more deeply. Thanks!

[Kenbomp]

Props for talking about it, closures have been around since the sixties and implement in the 80s on small talk. Haters are talking crap. Think of it as local git for variable. They are important when your code scales beyond single cpu apps. See also snap Berkeley the jscript langauge of scratch which uses closures.

[ШамильДжакеев]

Когда программист такого уровня, с таким огромный багажом знаний, не может отключить построчно линтер, а так же не понимает почему не происходит поднятие (hoisting) - это вселяет надежду в свои силы 😀😉.
Thanks MPJ!

[qwarlockz]

Thank you so much MPJ. I have heard about and even used closures for a while now but did not really get it. This really helped get at least a piece of it. I do have to say the sexiest and most... oooo not sure I can do that... was your refactor at the end moving from the function notation that is verbose but easy to understand to the arrow notation that is so concise and clean and yet... hard to understand what it is doing when you look at it. Often on those I go back to rewrite in function notation in order to see what it is actually doing. But boy it does look pretty!

[generationwolves]

Classes offer a slightly better performance advantage when multiple instances of the object needs to be created. Classes create one blueprint in memory that all instances will share, while closures create a fresh reference in memory for every instance.

Closures are a better fit for simplistic implementations as they are easy to write, and do not use the 'this' keyword. Closures can also be preferred if multiple instances of the object is not required, and encapsulation is important.

[TheAcidMotion]

JavaScript Hoisting isn't an actual thing, it is just an 'easier 'way to explain what happens but i found it to be a pretty bad practice when teaching people JS.

For anyone interested in why we teach "Hoisting" even if it doesn't really exist in a way we define it please check out Kyle Simpson's take on this.

I couldn't recommend enough books Kyle S. wrote as a 'Must read'.

[vlad]

About performance closures vs prototype: recent version of v8 doing optimization, so difference in terms of speed is 10-20%. You can google JS-perf and test it by yourself.

That's another reason why you should write idiomatic JS, and not try to replace compiler. We've seen it for forEach vs for, string concatenation etc.

[BocaR]

Alrighty...that last part made me re-think my comfort with closures

[owen]

Great Job @Fun Fun Function i enjoy this types of videos:)
closures are great if you get some concepts of functional programming :) then the moment comes "AHAAA" and composing the function is a pleasure. And I also think that although JS is object-oriented, it is a style of writing code closer to it for functional programming.

[funfunfunction]

NordVPN (Sponsor)
Coupon code: funfunfunction (Use to get 1 extra month when signing up for the 3-year plan, which also gives 75% off)