Functional JavaScript First Steps

Closure

Anjana Vakil

Anjana Vakil

Software Engineer & Educator
Functional JavaScript First Steps

Check out a free preview of the full Functional JavaScript First Steps course

The "Closure" Lesson is part of the full, Functional JavaScript First Steps course featured in this preview video. Here's what you'd learn in this lesson:

Anjana describes that closure occurs when a function defined inside another function retains access to scope from the outer function's body. This allows the inner function to access data that was not explicitly passed to it as an argument.

Preview
Close

Transcript from the "Closure" Lesson

[00:00:00]
>> Okay, in our next section we're gonna talk about closure, function closure, and what that means. This may be a term that you've heard kind of thrown around in JavaScript or it might be new. And again, the terminology is not so much the important thing as the takeaways of the ideas.

[00:00:19]
Keep in mind when we talked about higher order functions, we said that functions can return other functions as outputs just like they can take in other functions as inputs like map and filter and reduced it. Now here's the other thing, within the body of a function you can define another function.

[00:00:44]
And because the body of a function has its own scope, its own notion of the values of variables. When you define an inner function, that inner function has access to the outer function scope. It has access to whatever values that outer function is working with. So if you define a function within another function, when you return out that inner function, an interesting thing happens.

[00:01:17]
Which is that you have the possibility for that inner function once it's returned to remember values from the scope in which it was defined even if those are not being passed in directly to the function. [SOUND] What does that even mean? So that's the conceptual. Let's take a look at what that looks like.

[00:01:45]
Here is an example of a really simple and perhaps not the most useful, but kind of cool little function called makeAdjectifier which takes in an adjective. This function is gonna define, its defining here another function which takes in a noun. And then because it has access to this scope of this makeAdjectifier function, it's going to return a string that uses both the adjective and the noun.

[00:02:22]
So what happens when I call makeAdjectifier with an adjective? If I make a new function called coolify, coolify is what I'm gonna name the function returned by makeAdjectifier when I call it on cool. Now coolify is a function. Remember, this function returns a function. coolify is now something that I can apply to a noun like workshop and get out a string cool workshop.

[00:02:52]
I can apply it to a different noun drink and get out a string cool drink. And what this means is that now I can call coolify on whatever nouns I want and it will always remember that the adjective it's supposed to add is cool not rad, awesome, or whatever else.

[00:03:15]
And this is interesting because I'm no longer in the context in the scope of makeAdjectifier. But because JavaScript supports the notion of closures, the notion of these inner functions that are able to what's called close over some value that exists in the scope of the function in which they were defined.

[00:03:40]
JavaScript is a language that supports this meaning that this function now, even though makeAdjectifier is done running, I am no longer in that function, it has retained that scope, it can remember that value. So in a functional world, we said we're no longer working with state, we're no longer working with values changing over time, and we're not remembering state.

[00:04:06]
But in a closure, we have kind of a loophole for that. We have sort of a way to remember something that is not an explicit argument to the function that nevertheless is useful for its computation without resorting to side effects for example, reading a global adjective variable. So this becomes a really useful tool in functional programming, which is what we're gonna dig into in this section's exercise.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now