Explaining Closure through a simple function and in-flight beverages.
*Attention* The flight to a better understanding of Javascript is now ready for take off. Please secure all belongings in the overhead compartments and look towards the front of the plane for a presentation by our flight attendants.
If there’s something that everyone is looking for in 2020, it’s closure. In this case we define closure as a feeling that an emotional or traumatic experience has been resolved. During my stress inducing, covid ridden job search, I’ve been looking for closure in more ways than one. Today, let’s take a look at how learning about closure can give you closure when it comes to learning Javascript.
To get started, I’d like for you to take a look at this function.
Here we have a function called sayInt, which takes in an integer and returns a function that returns a variable called number which is bound to our i argument in sayInt. Wow that seemed like a mouthful! Let’s break this down line by line to get ourselves acquainted with the terminology used in this post.
Line 1: This is the statement which defines our function.
Line 2: Here is where our first binding happens. Bindings are how we catch and hold values in Javascript. They are often referred to as variables and are defined in three ways; let, var, and const. This variable here uses let and binds our argument- i to the variable- number.
Line 3: This return function is our closure because the function being returned is calling on a variable that’s outside of its lexical scope. The variable number is a local variable to the function sayInt, but it’s still accessible in the return function because of how closure works.
With closure, you can call on an outer function’s variables inside an inner function.
Line 6/7: Here we are setting our next two bindings. We’re binding int1 and int2 to the invocation of the function sayInt, but with varying arguments for what i will represent.
Line 9/10: Here is what we would like to print. The console.logs on 9 and 10 will print the number provided as the arguments in lines 6 and 7. Here we need to invoke our variables because otherwise we would print out our inner function, ( ) => number, instead of the result of our inner function. If we don’t invoke this function, we won’t have closure to our closure!
When we run this function we will receive a print out of 1 and 2.
Line 3 is really where all of this closure magic happens. As explained earlier, this is closure because we’re using the outer variable (number) from our outer function inside the inner returned function. Javascript allows this because of how things relate to a function’s lexical scope.
To visualize what lexical scope is and how it relates to closure, imagine you’re on an airplane about to be given in-flight beverages. You can see the cart of drinks available to you, but are only given access to them whenever you ask the flight attendant.
Think of the plane as our outer function, the drinks as our variables, and your request for a beverage as our inner function. Being on the plane, or in our outer function, gives us access to our drink variables. We call on one of these variables when we invoke our inner function (asking for a drink).
Javascript allows our functions that are within the same scope to access variables contained in outside functions of the same scope. In essence, that’s all lexical scope means. In other words, if you saw another plane fly by you couldn’t ask the flight attendant on that plane for a drink. That’s because that plane is outside of our drink-asking-function’s lexical scope.
I hope that this gave you a little closure on your adventure learning closure. All that’s left to do now is sit back, relax, and enjoy the flight.
