Groupios-folderShape

By Rahul Jain

For those of you familiar with JavaScript, you know that a closure is an inner function that has access to the outer (enclosing) function’s variables — scope chain. The closure has 3 scope chains:

  1. It has access to its own scope (variables defined between its curly brackets).
  2. It has access to the outer function’s variables.
  3. It has access to the global variables.

It’s important to remember that JavaScript closures can affect the performance of the application, such as through:

  • Higher CPU utilization. This is especially true with the Internet Explorer (IE) browser. (Note: Most of our global clients still believe in IE as best for their web applications.) Application hang experiences are noticed commonly in the IE browser, as compared to Firefox or Chrome.
  • Higher process memory. If a web page with closures is executed for a long duration, this could lead to a system unresponsive error.

It’s important to note that memory utilized by closures does not get released until the whole browser window is closed. In other words, when only the affected tab is closed, memory release doesn’t happen.

Let’s dive deep into JavaScript closures…

To start, open any of your web applications in chrome/IE, then open the task manager with the processes tab selected. Sort the list with the memory column. Check where chrome.exe/iexplore.exe image name is listed. See the screenshot below:

javascripteclosures

Performance considerations

It is unwise to unnecessarily create functions within other functions if closures are not needed for any specific requirement. This approach will negatively affect script performance both in terms of processing speed and memory consumption.

For example, when creating a new object/class, methods should normally be associated to the object’s prototype rather than defined into the object constructor. This is because whenever the constructor is called, the methods are reassigned (that is, for every object creation).

Demonstration of bad vs. good closures

The code below does not take advantage or the benefit of closures:

function MyObject(name, message) {

     this.name = name.toString();

     this.message = message.toString();

     this.getName = function() {

           return this.name;

     };

     this.getMessage = function() {

          return this.message;

     };

}

Here is code restructured with proper JavaScript closures:

function MyObject(name, message) {

        this.name = name.toString();

        this.message = message.toString();

}

MyObject.prototype = {

       getName: function() {

           return this.name;

       },

      getMessage: function() {

           return this.message;

      }

}

Or as follows:

function MyObject(name, message) {

     this.name = name.toString();

     this.message = message.toString();

}

MyObject.prototype.getName = function() {

     return this.name;

};

MyObject.prototype.getMessage = function() {

     return this.message;

};

Join the Conversation

Your email address will not be published. Required fields are marked *

Wipro Acquires Appirio