|

An Example of JavaScript Closure Using The Date Object

Javascript Closure

You can never have enough examples of closure in JavaScript. In this quick tutorial, we’ll take a look at a few examples of accessing variables both with and without closure to show how scoping changes in this type of code. The purpose of this exercise is to have a look at the difference between standard JavaScript functions vs nested type functions that create closure and allow variables to persist in memory longer than they would if not in a closure. We’ll do this using the Date object in JavaScript.


Running the date example without closure

This first example is simply to demonstrate calling a function two times, with a difference in time to show that on each function call, a different value is accessed in the date variable. Let’s walk through the code. We first define a function named withoutClosure(). This function assigns a new date object to the date variable. We then simply return the current milliseconds using date.getMilliseconds(). The next two lines fetch the div we are going to populate with this value, and we call the function to actually put some milliseconds inside the div. After this, we use a setTimeout() function so that we can call this function again, but 500 milliseconds later. By doing so, we demonstrate that the milliseconds have changed – hence we are not accessing the same variable. A new date object gets created on each call of the withoutClosure() function. Go ahead and click the button as many times as you like to see if you can get the milliseconds to be equal. Try as you might, you will never get the same value twice!

Click Clear


Running the date example with closure

Now we will tackle the same problem, but while using a nested function which will produce closure around the date object. This is a great example of how a variable will “hang around in memory” for as long as is required by the inner function which is producing the closure. In this example, we can see that there are two times which the withClosure() function gets called. The second time the withClosure() function gets called, it is within a setTimeout() function call. This is simply to add a delay to the second call of the withClosure() function. In reality, we are actually calling the anonymous function within the withClosure() function. This is because withClosure() itself is actually returning a function, not a computed value. Remember, in JavaScript, functions are first class citizens, which means we can pass them around just like any other value or variable. So to be fair, it is actually the method date.getMilliseconds() that gets called twice in the program. The first time around when it gets called, it fetches the milliseconds value of the date object. 500 milliseconds later, it gets called again. In this example, no matter what you do – you will always get the same exact value for milliseconds for each of the two output values. Try to run the program as many times as you like to get a different value, they will always be the same! This is because of closure, and the fact that on each call, you are accessing the same date object. This differs from the first example where on each call, a new date object is being accessed, not the same one. Check out the Doug Crockford article to find more fun examples of closure.

Click Clear


Running the example with a module like closure pattern

The final example of closure with the date object is just a slight modification of the second example, but in a more module like pattern. In this example, instead of returning a function out of withClousre2(), we actually return an object where the key holds a reference to the nested function within withClosure2(). This example works mostly the same as example two above, so we will not step through the code line by line. Again, you can run the program as many times as you like, and the value produced by the call to date.getMilliseconds() will always be the same. Again this is because via closure, the same date object is being access on each function call.

Click Clear


Final Example

As one final example, we’ll simply add a few more calls to the date.getMilliseconds() method and demonstrate that it is accessing the same date object each time. This is a good example of how closure will persist those variables you need for as long as is required. We could add a hundred calls to the date.getMilliseconds() method and the same result would be returned every time.

Click Clear


An Example of JavaScript Closure Using The Date Object Summary

This was a fun little example of exploring JavaScript Closure with a few different examples using the built in Date object in JavaScript. Have Fun!