6.6 Closures

Hi folks, in this lesson we're going to take a look at one of JavaScript's most misunderstood and feared features, the Closure. But don't worry, we have nothing to fear from the Closure. Although they are seen as an advanced feature of the language, the premise behind them is actually quite straightforward. Earlier in the course, we looked at scope in JavaScript. And we learned that it refer to the pose of our code in which variables are visible and accessible. As we know, variables declare outside of any function have global scope, which means that they can be used or accessed anywhere in our own scripts, or anywhere in other scripts attached to the page. Variables defined inside functions, on the other hand, are only visible within that function, including within other functions inside that function. The ability to create closures is simply a result of the fact that we can create functions inside of other functions. These functions are known as inner functions. A closure is just an inner function that remembers all of the variables in the scope of the outer function that it's within. This may not seem like a big deal when explained in such times. But recall that once a function returns, it's scope is usually destroyed. This is where the term closure comes from. The inner function closes over the scope that it is contained within, preventing that scope from being destroyed. Let's look at an example to illustrate how closures are formed, and how they behave. First of all let's create a new constructor function that represents an order in a store. At this point it's just a regular constructor, there's nothing special about it at all, there's no closure. But now let's have the constructor return a function. We return a function called addProduct, although the name of the function is only useful for debugging purposes. This function accepts a single parameter called price. Inside of the function then, let's compute a sales tax and a fee, and then add these to the price to create a total. So inside the addProduct function, we calculate a sales tax and a fee, which are both based on the price. We then add the price, the sales tax, and the fee to the total, which was specified as a variable inside of the outer order function. So the order function is the outer function in this case, and the addProduct function is the inner function. So now we can create the closure. So in this statement, we simply invoke the constructor, and store the return value in a variable. Remember that the return value of the constructor is the function addProduct. So the outer function at this point has returned. By all reasonable assumption, it's scope should have been destroyed, including the total variable which exists within it's scope. But because the constructor returns a function, something special happens, as we can see if we invoke the function that got returned. Let's now check the output in our browser. We don't see any errors, we see some values. And those values are the results of evoking the addProduct function, which got returned from the constructor. The inner function, addProduct, created a closure, and that closure protected the total variable, which was in the order constructor's scope. So even after the order constructor had returned, The inner function addProduct protected the total variable. And each time we invoke the addProduct method, the total variable is accessible through this closure. With closures, what's important isn't the environment when the function is invoked, but the environment that existed when the function was created. So in this lesson we looked at closures in JavaScript, and we saw that despite being considered an advanced feature of the language, they are nothing more than information about a scope, and a function that remembers that scope. We learned that when a function returns or creates another function, the inner function remembers all of the variables in scope when the function was defined. In the next lesson we're going to move on and look at prototypes again, this time in a bit more detail. Thanks for watching.