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
More
Chinese
Taiwan
Deutsch
Italian
Janpanese
Korean
Turkish
Indonesian
Ukraine
Polish
Spanish
Slovenian
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