What's a JavaScript Closure?

 Sep 18, 2015

In today’s blog I will explain the concept of a closure in JavaScript. The best way to grasp this concept is by means of a step-by-step example. Let’s define a function prepareMessage that accepts one input parameter.
function prepareMessage(msg) { … }
Now inside this function you will define and initialise a variable message as follows,
var message = 'Message: ' + msg;
The next step is what defines a closure. You will define an anonymous function that will be the return of prepareMessage and inside this function you will use the local variable message you have just declared.
function prepareMessage(msg) { var message = 'Message: ' + msg; var showMessage = function() { alert(message); } return showMessage; }
Note that the prepareMessage function itself is not going to display any message, it prepares the message and then returns a handle to a function that will be display the message. What’s special here is the fact that this returned handle will allow the caller to display a message that has access to the local variable message defined when prepareMessage was first called even though the prepareMessage has already returned by the moment the caller is using the returned handle. To complete the demonstration we need to use the function above to prepare and then show a message.
var displayMessage = prepareMessage('Closure in action'); displayMessage();
The result will be the output “Message: Closure in Action”. Note that after we returned from the call to prepareMessage the local variable message declared inside prepareMessage was kept alive and that is what allowed displayMessage() to display what we saw. This behaviour is what we call a closure. To summarise, if an outer function returns a handle to an inner function then all the local variables for the outer function will remain accessible to the inner function. You can think of a closure as the container for all those local variables that are still alive long after the outer function was called. To learn more about JavaScript we recommend Microsoft course 20480 - Programming in HTML5 with JavaScript and CSS3.

How do your Excel skills stack up?   

Test Now  

About the Author:

Newton Godoy  

With over 17 years of in-class training experience and over 16 years of industry experience, Newton offers students a wealth of real-world technical knowledge and expertise in the areas of .NET application development, SQL Server and SharePoint Server. After spending several years lecturing as a professor, Newton found his true calling and began his career as a MCT. He worked as a technical trainer for some of Brazil's and Australia’s largest corporate training organisations before finally finding a home with New Horizons where he is now one of our top trainers. Newton brings a thorough mentoring capability to the classroom where he can advise on technical issues and challenges often beyond the scope of the course curriculum. His combination of technical knowledge and instructor experience make him one of the most respected instructors within the IT training industry.

Read full bio
top
Back to top