Closures - Part 5 of Functional Programming in JavaScript

💖 Support the show by becoming a Patreon

A short video explaining the concept of closures, using JavaScript. This is part of a series, where are learning functional programming using JavaScript.

Mozilla JavaScript documentation on Closures

Code from the episode

Playlist of full series

You want to follow me on Twitter and Quora:

💛 Follow on Twitch
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, Software Development, Project Management

[vishalheble]

I think the first example what you have shown is wrong. In order to call a function a closure, the called variable should be present in an outer function rather than just a global scope variable. There needs to be an outer and a inner function to call it a closures.

[therealorberon]

This topic has been keeping me awake at night. Finally I can find myself some closure.

[gernothartung]

o_O
buddy, at the time you made the video you really had ABSOLUTELY NO IDEA of what closure really are

have been watching the playlist 'Functional programming in JavaScript', parts 1 to 4 are made GOOD.
i think i'm gonna keep on watching the playlist but i do hope, that this was an exception.

[aleenaselegy]

The way I internalised closure was during a job interview where i had to type in a searchField to sendRequest to an api but with each additional letter my initial request needed to be cancelled and a new sendRequest made with the added letter in the searchField. Before that I did not understand the concept no matter what I read on it. Coding out real world examples can help to illustrate a point more clearly. Once again, nicely done.

[JulianSloman]

I was very impressed by the first 4 videos, and I learned something from this one too, since I hadn't thought about closures before -- yet somehow this episode didn't give the same tingle. "Here's an example, there's many reasons to use it... now go look it up." - I did and only got half way through the documentation (I'm a bit tired, and only one month into JavaScript (learning it as my first programming language), so maybe I'm not the target audience, but the other videos made thinking about difficult stuff so easy!


Maybe it's just because this topic is somewhat easier to understand than the others, so I'm not getting that "click" experience, and that's why I feel it's incomplete...

Anyways, your other videos are 11/10 to me, and this one's just a perfect 5/7 --- :-P

Thanks so much for your work and good humor!

[poshakajay]

I watch these videos religiously and fell in love with JS. Thanks funfunfunction.

[MathiasDahl]

Hi, thanks for doing this! I have a small comment: you should have picked a better first example. The reason is that even in languages without lexical closures (at least some of them), the example would give the same result. The difference is that, while with a lexical closure, the free variable are resolved from the lexical environment (the source code structure), in a dynamically scoped language it is resolved at runtime. A better example that I think is easy to understand is the classic "makeAdder" example, where an inner function (returned by the makeAdder function) captures the parameter sent in to the call to makeAdder.

Keep up the good work!

[rodbotic]

I have been really enjoying these videos.
Thanks for making functional programming videos not boring.

I have been using jquery for years, and never really understood why it works the way it does.

[georgelinardis]

Wow, I wished I had found this video sooner! Mattias explains it so clearly.

[OviDB]

I love your videos. It's true that you said there are a ton of other use cases for closures. But I guess the most important is encapsulation. I'm just throwing out an example here for the folks watching. In the example below you can increment counter only by calling add(), and there is no other way to do it.
var increment = (function() {
var counter = 0;
return function() {return counter +=1; }
})();

increment();
increment();
increment();

console.log(increment()); // returns 4;

[permnce]

I really enjoy your videos. You have a unique and entertaining way of making difficult concepts easy. Thank you!

[coolworx]

I just want to say that I really enjoy your videos. You do a fantastic job of explaining the concepts and code in a very entertaining way.
I'd love to see some more videos on the techniques you use for functional programming - how to "foresee" the end result, or 'composition'.

I'd also be very interested in your explanation of Promises, and the best ways to take advantage of them.

[TrackCyclingLviv]

that light green reflection in your glasses gives some kind of special charm to overall experience! love it <3

[mattc]

I second @Vishal, the video is a great introduction to the concept, but a pretty critical part to understanding closures is understanding that in JS a closure is the COMBINATION of a function and the lexical environment within which that function was declared.

The really wonderful / magical part of closures is code like:

```
function makeFunc() {
var name = 'Matt'
function displayName() { alert (name)}
return displayName;
}

var myFunc = makeFunc();
myFunc();
```

[LinusGubenis]

I would really like an episode about promises, maybe more then 1 episode, like how to promisify, how to enrich already existing code with promises, how the different higher-order functions work with promises.And after that, higher-order functions with json streams?

[stepsvideos]

Thank you very much for your videos. I especially enjoy when you take us on one of your walks and get philosophical. Those are a special treat. On the topic of closures: I am wondering how much memory they use, since each closure has to keep track of its context, and I assume its parent's context, all the way up to the global object? Could you make a video about this, and why it is or is not a problem when using lots of closures.

[jasonwelsh]

Your coding content is my favorite on the web. Thank you!

[aquibjaved]

Hi, I've been following you on Quora and recently came to know about your videos. These are some great lessons indeed. It'd be great to have a video on callback functions and the synchronous/asynchronous thing with JavaScript, there are quite a lot of people who get confused with these at the beginning and a video from you would be really helpful.

[anamigator]

MPJ, another great video with a lot of energy! Just wanted to re-emphasize Vishal's point on creating another video with a function inside a function example, to make closures more clear.

[tomosman]

Thanks for all of your videos MPJ! Starting a coding bootcamp here in the Uk next week and these are helping massively for the pre-course work :) Keep them coming!