{ Closures. }

Objectives:

Understand what the keyword arguments represents and how it can be used

Closure

One of the most difficult concepts to understand when first learning JavaScript is closure. Let's take a stab at a definition:

Closure is when a function is able to access variables from an outer function that has already returned.

Thanks to JavaScript's inner workings, a function is able to remember variables defined in functions even if that function has returned. Let's see what we mean by that with an example.

functionouter(a){
returnfunctioninner(b){
return a + b;
}
}
outer(5) // this returns the inner function// this calls the inner function right away
outer(5)(2) // 7// we can store the inner function in a variablevar laterAdd = outer(10)
// we can now call that inner function
laterAdd(15) // 25// but how was the inner function able to remember the parameter "a" defined in the outer function which already returned? The answer is through closure.

Closures in the wild

There are many use cases for closures. One of the more common ones is to create a "private variable," or a variable that can not be accessed directly (and overwritten). Here's an example that uses closure to create a "private" variable.

So who can access our age variable? Only the defineAge function, which has returned, and the growUp function, which, through the use of closure, has access to the age variable. Amazingly, this is true even though the outer function defineAge has already returned. Our age variable is now protected and no one can gain access to it! In cases like this, we say that growUp (the inner function) has closure over the scope of defineAge.

Now that one line we just wrote was pretty neat! var instructors = createInstructors().showInstructors();, but could we do better? What if we do not want to call createInstructors every time, so that we could write something like createInstructors.showInstructors()? To do that, we can use IIFEs!

What we have just created is a small module, which is a piece of code that is encapsulated and can be reused quite easily. The pattern we just used to write our code is famously called the module pattern! It's a great way to wrap everything in an IIFE that contains private data that can not be accessed globally. We can even refactor this more so that our logic is not in the return statement.

More on closures

If you would like to see some more examples on closures take a look at the video below. The slides for this video are here

The arguments array (well not exactly...)

Every single time that a function is called, we get access to a special keyword called arguments which looks like an array (it is not EXACTLY an array, but we will cover the reason why a bit later) and can be accessed using [] notation. Here is an example:

Exercises

Answer the following questions:

What is a closure?

List two reasons why closures are useful

What is a module?

What is the arguments array-like object?

Why do we call arguments an array-like-object?

Write a function called createCounter. This function should contain a variable count that is initialized to 0. This function should return another function that when invoked, increments the counter by 1 and returns the count variable. You should be able to create multiple counters with the createCounter function and they should all have their own private variable called count.