Is it bad practice to have a series of named functions in js files?

Question

I am writing a js file that has a lot of jquery commands within the doc-ready part and then a whole swath of functions following it that are referenced in the jquery commands. Here's a short example,

//jquery on ready
$(function() {
  //misc jquery commands
  $('#bzm a').click(function(event) {
        event.preventDefault();
    });
  $('.editable').not('video, img, textarea').click(function(event) { 
        event.stopPropagation();
        loadEditor($(this));
        return false;
    });
});

//bunch of named functions referenced by jquery commands
function loadEditor(node, link){
    event.stopPropagation();

    var value = node.text();

    if (editObj){
        commitEditor(editObj);
    }

    if (node.not('video, img, textarea')){    
        $('#textEdit')
            .copyCSS(node)
            .offset(node.offset())
            .css('display', 'block')
            .val(node.text());

        node.css('color', 'transparent');
    }

    if(node.is('a') || node.parent().is('a') ){

        $('#urlEdit').show();
        $('#urlEdit').val(node.attr('href'));
    } else {$('#urlEdit').hide();}

    editObj = node;

    if (link){
        $('#urlEdit').select();
    }else{
        $('#textEdit').select();
    }
}

I feel like I've seen it said that named functions will cause poor performance in js or something like that.. the closest example I can find is here. I'd just like to know for certain.

Can you post a small code snippit to see exactly what you are referring to? — Corey Sunwold, Sep 05 '11 at 22:37

Mike Samuel · Accepted Answer · 2011-09-05T23:13:03.067

No. Calling a named function costs a variable lookup (cheap if not global) and a function call. Passing a named function to another function costs just a variable lookup.

Below are some micro-benchmarks run on Chrome in the square free shell. Take all benchmarks with a grain of salt.

(function () {
  function f() { }
  var a = [1, 2, 3, 4, 5, 6];
  var t0 = Date.now();
  for (var i = 100000; --i >= 0;) { a.map(f); }
  var t1 = Date.now();
  print(t1 - t0);
})() 

24

(function () {
  var a = [1, 2, 3, 4, 5, 6];
  var t0 = Date.now();
  for (var i = 100000; --i >= 0;) { a.map(function f() {}); }
  var t1 = Date.now();
  print(t1 - t0);
})() 

29

Passing the named function is faster than passing the anonymous function possibly because the anonymous function is instantiated repeatedly per loop entry.

+1 for actually doing the test! Indeed, a micro-optimisation either way; do whatever is more readable. — bobince, Sep 05 '11 at 22:52

Is it bad practice to have a series of named functions in js files?

1 Answers1