Indexing in a javascript array

[johnmerlino]

Hey all,

I read this tutorial about creating javascript tabs:
http://www.elated.com/articles/javascript-tabs/

Now basically there is a tabLinks array (var tabLinks = new Array(). There is a variable called id, which is assigned the value of the href attribute of a link ( we are looping through an array of links and tabLink represents the current link). In the code, there is a line:

 "tabLinks[id] = tabLink;

So id refers to the href attribute value of the link (without a hash) and tabLink is the link itself. tabLinks is the array. My question is are both the attribute and the link itself getting indexed at position 0 of the array, for example? Or is just the link getting indexed? If so, then why have this: [id]? I can't imagine that they are both getting indexed at position 0: [about a]. But if it's just the id getting indexed [about], then why are we assigning the link to this specific index? As you can tell, I'm really confused about how this indexing is working.

Thanks for any response.

[gizmo1650]

id doesn't refer to an attribute, it is a integer that tells the program where in the array to store tabLink.

id=0;
tabLink[id]="test"//these two lines have the same effect as tabLink[0]="test"
id=1
tabLink[id]="foo"//these two lines are the same as tabLink[1]="foo"

after running these four lines tablink now is ["test", "foo"]
the id value tells it were to store "tabLink" in the array

[johnmerlino]

I'm not sure how this assigns an integer to id:

var id = getHash(tabLink.getAttribute('href'));

All getHash does is remove the # from the href attribute.

[Gjslick]

Ok, the reason you're confused is because that guy isn't actually using an Array there (at least not a numerically indexed one). The reason his code works is because of the fact that an Array is-an Object in JavaScript, and he's assigning properties to the object, not numerical indexes to an Array.

Now, properties of objects can be set using two operators: the dot operator, or the subscript operator (square brackets). The following are equivalent:

var myObj = new Object();
myObj.property = "value";

// ...

var myObj = new Object();
myObj[ 'property' ] = "value";

// ...

var myObj = new Object();
var propName = 'property';
myObj[ propName ] = "value";

So like I said, an Array in JavaScript is-an Object, because it extends Object (just like everything else in JavaScript).

var myArr = new Array();  
alert( myArr instanceof Object );  // alerts "true"

And since all objects in JavaScript can have properties, that is why that guy's code works when he assigns the string ID's to the "array". You'll actually notice that if you take his code, and set tabLinks to be just a Object instead of an Array, the code works just the same.

var tabLinks = new Object();

[Gjslick]

So what ends up happening with this guy's code is that tabLinks becomes an Object with 3 properties: "about", "advantages", and "usage". They can be referred to using both dot and subscript operators:

alert( tabLinks.about );

// or

alert( tabLinks[ 'about' ] );

// or

var id = 'about';
alert( tabLinks[ id ] );

Try throwing that code into a function and run that function after the page loads. You can also use a tool like Firebug to show you what variables actually store. After the page loads, type this into the Firebug console:

console.dir( tabLinks );

[johnmerlino]

Thanks do you think this is the most effective way to create tabs like this in pure javascript (not including jQuery)?

[Gjslick]

It's not a bad implementation. There really is no "most effective" way to do tabs; just use whatever it takes to get the job done. If you don't feel like including a library like jQuery into your page, then that should work fine. Just test it and make sure that it works on all of the browsers.

However, using a library with a pre-built tabs implementation that has been tried and tested on many different browsers and platforms will probably fair better in the real world.

-Greg