« | Home | »

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):

PLAIN TEXT
JavaScript:
  1. // A Javascript Object
  2. var MyJsObject = {
  3.     param1: true,
  4.     param2: false,
  5.     func1 : function() {
  6.         // my code here
  7.     }
  8. }

Whenever you expand that object, one would add a new function/param to the object, separated by a comma:

PLAIN TEXT
JavaScript:
  1. // Expanding the Object
  2. var MyJsObject = {
  3.     param1: true,
  4.     param2: false,
  5.     param3: "Yes we can",
  6.     func1 : function() {
  7.         // my code here
  8.     },
  9.     func2 : function() {
  10.         // my code here
  11.     }
  12. }

Now, I myself have noticed that sometimes I forget to add a comma, like so:

PLAIN TEXT
JavaScript:
  1. // This will fail
  2. var MyJsObject = {
  3.     param1: true,
  4.     param2: false,
  5.     param3: "Yes we can"
  6.     func1 : function() {
  7.         // my code here
  8.     },
  9.     func2 : function() {
  10.         // my code here
  11.     }
  12. }

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:

PLAIN TEXT
JavaScript:
  1. // This will fail, will it?
  2. var MyJsObject = {
  3.     param1: true,
  4.     param2: false,
  5.     param3: "Yes we can",
  6.     func1 : function() {
  7.         // my code here
  8.     },
  9. }

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:

PLAIN TEXT
JavaScript:
  1. // "Bramus! The lazy programmer" at work
  2. var MyJsObject = {
  3.     param1: true,
  4.     param2: false,
  5.     param3: "Yes we can",
  6.     func1 : function() {
  7.         // my code here
  8.     },
  9.     _eeo: true
  10. }

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

Date Published
Published:
Feb 22 2009 / 6:41 pm
Categories
Categories:
Javascript, Webdevelopment
Comments
Comments:
3 Comments
Jump to comment form

Best of Bram.us

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