« Meanwhile, on Twitter | Home | Quickr Flickr Greasemonkey Script »
The lazy programmer at work: _eoo and your Javascript Objects
I admit: I'm a lazy programmer. If there's anything I can do to reduce code, I'm in. Above that: if there's anything I can do to avoid mistakes and errors, I'm in too. In order to have less errors/mistakes whilst whipping up some Javascript Objects I've created a little trick: the use of the _eeo datamember.
Objects in Javascript
Whenever you create an object in JS, you do somehting like this (at least that's how I do it):
-
// A Javascript Object
-
var MyJsObject = {
-
param1: true,
-
param2: false,
-
func1 : function() {
-
// my code here
-
}
-
}
Whenever you expand that object, one would add a new function/param to the object, separated by a comma:
-
// Expanding the Object
-
var MyJsObject = {
-
param1: true,
-
param2: false,
-
param3: "Yes we can",
-
func1 : function() {
-
// my code here
-
},
-
func2 : function() {
-
// my code here
-
}
-
}
Now, I myself have noticed that sometimes I forget to add a comma, like so:
-
// This will fail
-
var MyJsObject = {
-
param1: true,
-
param2: false,
-
param3: "Yes we can"
-
func1 : function() {
-
// my code here
-
},
-
func2 : function() {
-
// my code here
-
}
-
}
The above of course won't go undetected, as it will produce an error. Using Firebug you'll get this lovely error, pointing you immediately towards the errorous file:

Another mistake one can make is to have an extra comma after your very last function. This - for example - can happen when you delete a function from the object:
-
// This will fail, will it?
-
var MyJsObject = {
-
param1: true,
-
param2: false,
-
param3: "Yes we can",
-
func1 : function() {
-
// my code here
-
},
-
}
The problem with the above is that it won't give an error in Firefox (my weapon of choice), allowing to code along without even knowing I've left a lost comma at the very end of my JS file!
The real problem here
The real problem of the problem above is that it actually will give an error in - yeah, you've guessed it - Internet Explorer.
As many webdevelopers I test sites in IE not that often: I first get my stuff straight in Firefox, and then test IE and start fixing the errors.
Now, there's a problem with “the problem of the problem”: IE gives an error, but - again, you've guessed it right - it totally isn't descriptive; You get something like: “Line: 10; Char: 1; Error: Expected identifier, string or number; Code: 0; File: yourpage.html”
The error given is worthless as neither the correct file nor the correct line-number is mentioned in the error! Finding the file that's causing the error can take quite some time if you have lots of JS files.
Introducing _eeo
In order to never ever mistakenly produce such an error I use this little trick: the very last datamember/property/whatever-you-like-to-call-it of every Object I write is a dummy parameter _eeo, which is short for End Of Object. This _eeo always is the last datamember of the Object, as seen below:
-
// "Bramus! The lazy programmer" at work
-
var MyJsObject = {
-
param1: true,
-
param2: false,
-
param3: "Yes we can",
-
func1 : function() {
-
// my code here
-
},
-
_eeo: true
-
}
Using the _eeo trick, one can never - mistakenly - have a lost comma at the end and one must always add a comma when adding new functions/datamembers (which you do before the _eoo param). This reduces mistakes, as there's no doubt anymore
Turns out that this little trick is that good, that my former colleagues at Netlash and Netlog are using this trick too nowadays
About this entry

Feb 22 2009 / 6:41 pm


Best of Bram.us
Start getting used to scratching and smudging the iPhone with this Flash based iPhone Simulator
Automatically wrap/float/contour text around freeform images using CSS for usage in (X)HTML pages.
Pimp Your Firefox to be a web all-star
A look at the inc.common.php, spreading handy functions.
Photoshop Script inspired in the Chlomoscript to unobtrusively pimp photos you have taken.
Methods to adding file management options to TinyMCE (Part 1), Extending TinyFCK (Part 2) and PHP file uploads overview (Spinoff 1).





Comments
Lovely, Tijs tried to explain this to me once but now I get it
The perfect easy always working tip! Thanks former colleague
Now we should only convince YUI Compressor to leave out the _eeo-member on compile
.