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

javascript, Webdevelopment

3 Responses to The lazy programmer at work: _eoo and your Javascript Objects

  1. Wolf says:

    Lovely, Tijs tried to explain this to me once but now I get it :)

  2. Dextro says:

    The perfect easy always working tip! Thanks former colleague ;)

  3. Now we should only convince YUI Compressor to leave out the _eeo-member on compile :) .

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>