Closures - Beau teaches JavaScript

Closures are an important concept in JavaScript and other programming languages. Learn the basics of closures in this video!

Code:
More info:

⭐JavaScript Playlists⭐

-
We're busy people who learn to code, then practice by building projects for nonprofits. Learn Full-stack JavaScript, build a portfolio, and get great references with our open source community.

[emilewamsteker]

So far, this is one of the best descriptions of closures I've come across. However, when you explain closures, it's worth doing a brief review of function syntax. I think what confuses most people about closures is the return statement of the outer function, what exactly is being returned. Most people believe the return statement is returning what is evaluated in the inner function, when, in fact, it is returning the function itself along with its lexical scope. Note, that in the return statement, the displayName function does not have a set of parentheses following it. Remember that a function without parentheses is the function itself -- all of its syntax, instructions, lexical scope-- and NOT the value of the evaluated function, as most people might think. In this example, when the inner function is passed to the global scope, it gets stored to a variable in much the same manner as a function expression. As with a function expression, to invoke it, you place parentheses after it to call its respective function, and it evaluates. I've have yet to see anyone explain this in a video. Their is an assumption that the viewer already understands this concept. The problem with learning closures is that by the time a student gets to them, they are so used to the syntax of function declarations, that they take them for granted and probably do not realize that only the function name is used in the return statement, and not a function call.

[kifkifa]

After writing JavaScript code for the last couple of years now I understand what exactly is javascript closure. You made my day bro. Thanks alot.

[dostaquitos]

I am still confused but less confused than after my 30min lecture + activities on this. Thank you for being an excellent teacher!

[jbrabec]

Awesome example! This helped me a ton when you related it to an object-oriented class with private data and public and protected functions

[keephunnid]

Wow, just spend at least the past 2 hours trying to understand closures watching a few 20+ minute videos, reading up, etc.

This video is literally the shortest content out of any of them but it is the only one that is clear and logical and it definitely helped me understand closures.

Thank you!

[RainOnline]

Well you always manage to explain it the way I can understand it. So to everyone else, we all learn different! for me Beau is the way..

[zs]

Thanks for the great video and tutorial. This is how I like to think of closures. Please feel free to correct me if my understanding of some concepts aren't correct as I'm just learning about closures myself.

/*
The closure of a function is the function(s) its enclosed in and the inner function(s) has access to the variables defined in those closures even after those functions are no longer on the execution stack. Paste and run the below in Google Chrome console and drill down into the scopes to check the closures out. In the below example the inner function is enclosed in speak function hence it's closure is the function speak. If speak itself was within another outer function then inner function has TWO closures the speak function as well as the outer one enclosing speak.
*/

function speak(greeting)
{
var inner = function (name)
{
console.log(greeting + " " + name);
}

return inner
}

var theGreeting = speak("Hello");


console.dir(theGreeting);

[Av-fnwx]

Thanks Beau, . After 2 years as a JS engineer, finally understood closures watching a 6 years old video

[Woodshadow]

A month in on this stuff and I am still completely lost

[henry]

Super helpful and straight to the point! Thanks a lot for sharing.

[bulldawg]

Yes, one of the better explanations I've come across, too ... Concise, too ...

[biljam]

Thank you! I was really confused by closures.

[swarmdesignsolutions]

this is by far the best video - thanks

[centrumsaiyan]

Thanks, I have watched several great tutorial channels and yet, closure is still something i'm not confident talking about.

[dmitrik]

so, the private variable in the parent container function is modified by the child container function?
Ex.
function parentFunction() {
let counter = 0
function childFunction() {
console.log("counter", counter)
console.log("counter increment", counter+=1)
}
return childFunction
}

let result = parentFunction()
result()
result()
result()

[kokomi]

You get it simple, and you still get it well done.

[MistaJones]

Thanks for this, this helped give me a little more clarity with one of the lessons I'm learning in JavaScript on udemy. Liked and subscribed.

[minbenja]

It's when a function or variable has access to other variables within the scope or the environment it was created in. They are sometimes used to emulate private methods. Which can only be called by other methods in the same class. Since JS does not have a native way of doing this.

[Flowstyletattoo]

Just had a break through.

Thank you.

[sorcerir]

I logged in to say thank you. Gosh I finally understand what closures are. Wait, do I really???? lol