As of Javascript 1.6 indexOf() is a method available for use with Arrays. However, there’s one subtle difference when operating on a String and an Array, both are case sensitive, Array.indexOf() is type sensitive. This is documented but for those of you who’ve not bothered with the documentation, and it’s not working as expected, here’s a heads up on a subtle gotcha…

<script type="text/javascript">
	var list = new Array("1",2,"3",4,"5");

	console.log("Index of 1: " + list.indexOf(1));
	console.log("Index of 2: " + list.indexOf(2));
	console.log("Index of 3: " + list.indexOf(3));
	console.log("Index of 4: " + list.indexOf(4));
	console.log("Index of 5: " + list.indexOf(5));

	var jist = list.join(",");

	console.log("Index of 1: " + jist.indexOf(1));
	console.log("Index of 2: " + jist.indexOf(2));
	console.log("Index of 3: " + jist.indexOf(3));
	console.log("Index of 4: " + jist.indexOf(4));
	console.log("Index of 5: " + jist.indexOf(5));
</script>

Viewing the debug output in Firebug we can see the type checking; the string elements in the array are not found. Concatenate the array to a string and perform the same check – it’s now type insensitive.

I’m surprised I’ve not run into this before but Javascript has two sub string methods.

[String].substr(start, length);
[String].substring(indexA, indexB);

To clarify by example:

var name = "Greg Knapp";
alert(name.substr(5, 5)); // Knapp
alert(name.substring(5, 10)); // Knapp

Minor but caught me out this afternoon.

I had cause to use script.aculo.us at work today, which depends on the Prototype framework. I’ve used Prototype previously (in fact on this very blog!). However, when I dropped script.aculo.us in on the site I was working on, all hell broke loose with my JavaScript breadcrumbs.

I was dynamically populating two arrays via PHP, one for the page captions and the other for the page URLs, JavaScript was then used to combine these arrays by way of Array.push() and Array.join(). After a few minutes debugging I realised Prototype was the culprit, spewing out a wad of JavaScript source all over the page header (innuendo not intended!).

A few more minutes Googling and I’d discovered it was Prototype’s Array extensions at work that had broken things. As explained by David Bergman iterating over an Array using a for (i in array) reveals the extensions added to Array class.

The author of Prototype (being a “Rubyan”) added these extension to bring JavaScript a little closer to home for the rest of the Ruby community. Converting my for to Array.each() remedied the problem – worth noting for future reference and hopefully this will save someone else 10 – 15 minutes head scratching. Thanks to David for his fine explanation and solution to the problem!