Monday, August 29, 2011

Report the name of a JavaScript function

I do a LOT of JS development lately: straight up HTML5, PhoneGap for Android and iPhone and Node.JS on the server side. One command line I use in all environments is console.log.
console.log allows you to print out a string, a variable and even a complex object (just use JSON.stringify on it first) to the console view of:
  • Developer Tools in IE8 and higher (hit F12)
  • Developer Tools in Chrome (different keys for different OSs – nice, Google)
  • Firebug in Firefox (install as an extension)
Since advanced JS uses a lot of event calls, anonymous functions and multiple files, it’s hard at times to figure out where things go wrong. So I’ve gotten into the habit of adding an entrance printout at the beginning of each function. But it has gotten cumbersome and annoying after a while, so I searched for a more elegant solution. I found this StackOverflow question, and based on the replies, constructed this code:

var fname = /^function\s+([^(]+)/.exec(arguments.callee.toString())[1];
console.log(fname);


Now, this looks like a cumbersome code to paste into each and every function, so I wanted to write a general funnction I can call anywhere to print the current function name. The problem is, if you put this code into a function, say reportFunctionName() and call it, you get "getFunctionName" printed out. The answer was in the same SO post:

function reportName() {
  var fname = /^function\s+([^(]+)/.exec(reportName.caller.toString())[1];
  console.log(fname);
}


Note the use of caller instead of callee. Also note both methods would not work well for anonymous functions (duh - no name -> nothing to print :)

Finally, I started using Github's Gist feature to collect all my code snippets, so you can find both code pieces mentioned here and here respectively.

No comments:

Post a Comment

I enjoy all comments - unless they're spam. If you want to push a product/service/site - this is not the forum.