Appendix A. JavaScript Closures

Throughout this book, we have seen many jQuery methods that take functions as parameters. Our examples have thus created, called, and passed around functions repeatedly. While usually we can do this with only a cursory understanding of the inner JavaScript mechanics at work, at times side effects of our actions can seem strange if we do not have knowledge of the language features. In this appendix, we will study one of the more esoteric (yet prevalent) function-based constructs named closures .

Our discussion will involve many small code examples, from each of which we will want to print out a set of messages. Rather than use a browser-specific logging mechanism (such as console.log()), or create a series of alert() dialogs, we will use a small plugin method as follows:

$.print = function(message) {
  $(document).ready(function() {
    $('<div class="result"><div>')
      .text(String(message))
      .appendTo('#results');
  });
};

With this method defined, we can call $.print('hello') to add the message hello within <div id="results">.