Does use of anonymous functions affect performance?

by

The performance problem here is the cost of creating a new function object at each iteration of the loop and not the fact that you use an anonymous function:

for (var i = 0; i < 1000; ++i) {    
    myObjects[i].onMyEvent = function() {
        // do something    
    };
}

You are creating a thousand distinct function objects even though they have the same body of code and no binding to the lexical scope (closure). The following seems faster, on the other hand, because it simply assigns the same function reference to the array elements throughout the loop:

function myEventHandler() {
    // do something
}

for (var i = 0; i < 1000; ++i) {
    myObjects[i].onMyEvent = myEventHandler;
}

If you were to create the anonymous function before entering the loop, then only assign references to it to the array elements while inside the loop, you will find that there is no performance or semantic difference whatsoever when compared to the named function version:

var handler = function() {
    // do something    
};
for (var i = 0; i < 1000; ++i) {    
    myObjects[i].onMyEvent = handler;
}

In short, there is no observable performance cost to using anonymous over named functions.

As an aside, it may appear from above that there is no difference between:

function myEventHandler() { /* ... */ }

and:

var myEventHandler = function() { /* ... */ }

The former is a function declaration whereas the latter is a variable assignment to an anonymous function. Although they may appear to have the same effect, JavaScript does treat them slightly differently. To understand the difference, I recommend reading, “JavaScript function declaration ambiguity”.

The actual execution time for any approach is largely going to be dictated by the browser’s implementation of the compiler and runtime. For a complete comparison of modern browser performance, visit the JS Perf site

More Related Contents:

  1. Which “href” value should I use for JavaScript links, “#” or “javascript:void(0)”?
  2. Unobtrusive JavaScript: at the top or the bottom of the HTML code?
  3. Why is iterating through an array backwards faster than forwards
  4. Does the tag position in HTML affects performance of the webpage?
  5. Is optimizing JavaScript for loops really necessary?
  6. HTML5 Canvas Performance and Optimization Tips, Tricks and Coding Best Practices [closed]
  7. Javascript (jQuery) performance measurement and best practices (not load time)
  8. Convert JSON to array in Javascript
  9. jQuery: load pages with ajax, caching, clean URLs and back button support
  10. When to use Vanilla JavaScript vs. jQuery?
  11. Declaring multiple variables in JavaScript
  12. Array vs. Object efficiency in JavaScript
  13. Why is mutating the [[prototype]] of an object bad for performance?
  14. post increment vs pre increment – Javascript Optimization
  15. What is the cost of ‘$(this)’?
  16. Should CSS always precede Javascript?
  17. Javascript when to use prototypes
  18. JavaScript loop performance – Why is to decrement the iterator toward 0 faster than incrementing
  19. Efficient Javascript String Replacement
  20. Javascript prototype operator performance: saves memory, but is it faster?
  21. Are JavaScript Arrays actually implemented as arrays?
  22. Array Join vs String Concat
  23. Is “Put Scripts at the Bottom” Correct? [closed]
  24. How many concurrent setTimeouts before performance issues?
  25. Are ES6 template literals faster than string concatenation?
  26. Why is looping through an Array so much faster than JavaScript’s native `indexOf`?
  27. How browser executes Javascript and renders asynchronously
  28. JavaScript Profiler in IE
  29. What are some good css and js minimizers for production code? [closed]
  30. How to profile and get Javascript performance [duplicate]

Leave a Comment