Guide to Debug Anonymous JavaScript functions

JavaScript programming language has a special feature - allows us to create function without naming - anonymous JavaScript functions. This feature almostly used everywhere, this kind of JavaScript function can become a big trouble to debug. This JavaScript article tutorial guides us how to debug anonymous JavaScript functions. Please go to the inner post page for full completed instructions and JavaScript code examples.


Sampled by © JavaScriptBank.com
Javascript allows you to create function without name. That's why we name them (oxymoron), anonymous functions. Almost used everywhere, this kind of function can become a real nightmare to debug. We will see what is the problem and how to solve it.

Anonymous functions


Let's first see what is an anonymous function by looking at some code:

var myObject = {
    doSomething
:function () {
       console
.loh("my message");
   
}
};

document
.body.onclick=function(){
    myObject
.doSomething();
}
The code in it self does not do much...
But you can see that we define functions that do not have a name.
They are assigned to a property.

Notice that:
var myFunc = function() {

}
function myFunc() {

}

is different in the timing you will be able to call these functions.
For example:

myFunc();
var myFunc = function() {

}

will fail but not:
myFunc();
function myFunc() {

}

Functions are parsed first and are available, whatever the order you write your code in. (Not true in the console of Firebug though.)
By the way, did you see the typo? console.loh() instead of console.log().

If you run this script, you will get a nice error that you can look in Firebug, Firefox:

onclick()
(?)()

Not helping...
If you have hundreds of line of javascript code, I can tell you that it may take some time to get to the error...

So how can we handle this?

Name your anonymous functions

ok,so what's the deal? name your anonymous functions, oxymoron, here, oxymoron there...

It's easy, give a name to your anonymous functions:

var myObject = {
    doSomething
:function $_doSomething() {
       console
.loh();
   
}
};

document
.body.onclick=function $_bodyClick(){
    myObject
.doSomething();
}

Prefixing all the anonymous functions with $_ is just a convention
that is going to help in a few seconds.
Traced in Firebug, you get:

$_doSomething()
$_bodyClick
()

A little bit nicer than the cryptic first output!

But naming anonymous functions for the sole purpose of debugging is going to add unnecessary bytes right??
Indeed, we should name them for debugging and erase their name for the live version.
But this is too much of hassle and nobody will do it unless...

Javascript Preprocessor at the rescue.

There are many preprocessors out there that allows you to simplify the build process of your javascript files.
One of them,jsmake (which I've also written-sorry), allows you to automatically name all your anonymous functions or do the opposite, remove their names.

In order to remove all the anonymous function names, you will need to prefix them with $_. If you let the preprocessor name them instead of doing it by hand, it will prefix them with $_ so that you can remove them again very easily via the same preprocessor!


A simple example will be:

var testing = function () {
   
return true;
}
var myObject = {
    doSomething
:function () {
       console
.log();
   
}
};
document
.body.onclick=function(){
    myObject
.doSomething();
}
document
.body.addEventListener('click',function(e){
   
var object= {};
   
object.testing = function() {
       
return true;
   
}
});

Once preprocessed, you get:
var testing = function $_testing1 () {
   
return true;
}
var myObject = {
    doSomething
: function $_doSomething1 () {
       console
.log();
   
}
};
document
.body.onclick = function $_onclick1 (){
    myObject
.doSomething();
}
document
.body.addEventListener('click',function $_anon1(e){
   
var object= {};
   
object.testing = function $_testing2 () {
       
return true;
   
}
});

You can read more about this here.
Don't hesitate to introduce other preprocessors that do the same thing or offer even more functionality!

Language
Translate this page to English Translate this page to French Translate this page to Vietnamese

Recent articles
Insights for Advanced Zooming and Panning in JavaScript Charts
How to open a car sharing service
Vue developer as a vital part of every software team
Vue.js developers: hire them, use them and get ahead of the competition
3 Reasons Why Java is so Popular
Migrate to Angular: why and how you should do it
The Possible Working Methods of Python Ideology
JavaScript Research Paper: 6 Writing Tips to Craft a Masterpiece
Learning How to Make Use of New Marketing Trends
5 Important Elements of an E-commerce Website


Top view articles
Adding JavaScript to WordPress Effectively with JavaScript Localization feature
Top 10 Beautiful Christmas Countdown Timers
Top 10 Best JavaScript eBooks that Beginners should Learn
65 Free JavaScript Photo Gallery Solutions
16 Free Code Syntax Highlighters by Javascript For Better Programming
Best Free Linux Web Programming Editors
Top 50 Most Addictive and Popular Facebook mini games
More 30 Excellent JavaScript/AJAX based Photo Galleries to Boost your Sites
Top 10 Free Web Chat box Plug-ins and Add-ons
The Ultimate JavaScript Tutorial in Web Design


Free JavaScript Tutorials & Articles
at www.JavaScriptBank.com