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 _eoo 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 _eoo

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 _eoo, which is short for End Of Object. This _eoo 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
	},
	_eoo: true
}

Using the _eoo 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 🙂

Published by Bramus!

Bramus is a frontend web developer from Belgium, working as a Chrome Developer Relations Engineer at Google. From the moment he discovered view-source at the age of 14 (way back in 1997), he fell in love with the web and has been tinkering with it ever since (more …)

Join the Conversation

3 Comments

Leave a comment

Leave a Reply to Jurriaan Persyn Cancel reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.