The Right Code

Home of Greg Bergé. Let's speak about JavaScript.

Naming functions, yes but not all the time

You've probably heard that using named functions is better in JavaScript, better for stack trace and debugging. In most cases it's true, but sometimes it's better to avoid naming a function.

Unreferenced functions

The functions that I call unreferenced are functions that are not attach to an object. Some examples are functions used as callback, or in promise, or others.

Unnamed function

Let's write a little example:

setTimeout(function () {  
  throw new Error('Unnamed unreferenced function.');
}, 0);

In this case, the stack trace is:

Error: Unnamed unreferenced function.  
    at http://fiddle.jshell.net/_display/:23:11 

There is only the place in the code, no trace of setTimeout in the stack trace, hard to debug.

Named function

Now try with a named function:

setTimeout(function timeoutHandler() {  
  throw new Error('Named unreferenced function.');
}, 0);

The stack trace is:

Error: Named unreferenced function.  
    at timeoutHandler (http://fiddle.jshell.net/_display/:27:11) 

We have now the name of the function in the stack trace.

Conclusion

So for unreferenced functions, it's clear, named functions are better.

Referenced functions

The functions that I call referenced are functions that are attached to an object (an instance, a prototype, etc..).

Unnamed function

OK let's try with a unnamed function:

var foo = {};  
foo.unnamedFunction = function () {  
  throw new Error('Unnamed referenced function.');
});

The stack trace is:

Error: Unnamed referenced function.  
    at Object.foo.unnamedFunction (http://fiddle.jshell.net/_display/:32:11)
    at window.onload (http://fiddle.jshell.net/_display/:44:7) 

As you can see, we have the complete reference of the function and its name Object.foo.unnamedFunction, so it's good for debug.

Named function

var foo = {};  
foo.namedFunction = function namedFunction() {  
  throw new Error('Named referenced function.');
});

You can notice that the declaration is redundant and not very nice, we have the name twice in code, it's not very clear.

And now the stack trace is:

Error: Named referenced function.  
    at Object.namedFunction (http://fiddle.jshell.net/_display/:35:11)
    at window.onload (http://fiddle.jshell.net/_display/:50:7)  

If the function name and the reference are not the same we have:

Error: Named referenced function.  
    at Object.namedFunction [as attachedNamedFunction] (http://fiddle.jshell.net/_display/:35:11)
    at window.onload (http://fiddle.jshell.net/_display/:50:7)  

As you can see, we can't read the name of the object where the function was called. Very hard to debug and not very elegant in the code.

Conclusion

For referenced function it's better to attach anonymous functions. The code is clearer and the stack trace is more complete.


If you hear someone saying that naming function is always better you could now tell him that he is wrong! Naming function is not needed and not adviced for functions attached to an object. To remember that, if you have to write the name two times, you are probably doing something wrong.

You can find the JSFiddle that I used to write this article.

comments powered by Disqus