Named Callbacks in JavaScript

You’ve been taught bad JavaScript for years and years. What do I mean? I’m sure you’ve written code like this more than once in your career:

someMethod(function (){
     console.log(“doing stuff…”);
});
So what’s wrong with that? It runs and doesn’t error. Heck, even JSLint won’t complain about it. But what happens something goes wrong inside of your callback? Most debuggers will list the callback as an “anonymous method” in the call stack. Not very helpful is it? Isn’t there something simple we can do make our callbacks easier to read in a call stack?

NAME YOUR CALLBACKS.

Take the example above, and let’s name the callback.

someMethod(function myCallback(){
     console.log(“doing stuff…”);
});
Simple! Let’s imagine doing a jQuery AJAX call with this approach (and yes, I’m ignore the fact that you should use promises – which are WAY better):

$.ajax({
  url: “/myUrl”,
  success: function onAjaxSuccess (data){
           },
  error: function onAjaxError (error) {
           }
});
You’re welcome :)

Originally published on 2013-08-06 in Development

Enjoy this article? Let's keep in touch

I really appreciate you taking the time out of your schedule to read this post. I like to keep my friends updated on new articles and also spawn discussions here and there.

If you'd like to keep in touch, please subscribe below. And I promise, no more than 1 email per week (if even that).