Javascript Object inside of Object

Question

I'm working with phylogentic trees and I want an object for the tree itself and then an object for each species, 4 species total. I'm trying to have the tree contain the species objects under tree.leaf and then assign an array of attributes to each species but through the tree object, because I'm randomizing the order of the species so I can't depend on species names but I can use leaf placement(Hope that makes sense). I'm having trouble updating the html, a div inside a table though.

Simplified Version:

var tree = new Object();
var speciesA = new Object();

tree.leaf1 = speciesA;
//Not sure if this next line assigns to speciesA or what exactly happens
tree.leaf1.attributes = new Array("Attr1","Attr2",etc);

var count = 1;
for(attr in speciesA.attributes)
{
    //There are 4 divs per speices to display attributes
    document.getElementById("A"+String(count)).innerhtml = speciesA.attributes[attr];
    count++;// used to specify divs ie A1 = attribute1, A2 = attribute2 etc
}

So I guess my main question is will this work/do what I think it does?

If needed I can pastebin my html and full js files.

Answer 1

What you have should work, but it can be written a bit cleaner. I would suggest this:

var tree = {
    leaf1: {attributes: ["Attr1", "Attr2"]}
};

var attributes = tree.leaf1.attributes;
for (var i = 0; i < attributes.length; i++) {
    document.getElementById("A"+(i+1)).innerHTML = attributes[i];
}

Things I changed:

1. Used a javascript literal to make the definition a lot more compact
2. Used {} and [] for defining arrays and objects rather than new Object() and new Array().
3. Used for (var i = 0; i < xxx.length; i++) syntax to iterate array elements only, not all properties. This is the "safe" way to iterate elements of an array.
4. Remove the String(count) as it is not needed. Javascript will auto-convert a number to a string when adding to another string.
5. Cached the value of the attributes array to save having to deep reference it each time.
6. Removed separate count variable as the for index can be used

---

To answer one of your other questions, when you do this:

tree.leaf1 = speciesA;

you have assigned a "reference" to speciesA to tree.left1. A reference is like a pointer. It is not a copy. So, the both refer to exactly the same object. Any change you make to speciesA or to tree.leaf1 is make a change to the exact same object.

So, when you then do this:

//Not sure if this next line assigns to speciesA or what exactly happens
tree.leaf1.attributes = new Array("Attr1","Attr2",etc);

you are indeed modifying the speciesA object since speciesA and tree.leaf1 point to the same object.

---

In javascript, arrays, objects and strings are assigned by reference. That means that when you assign one to a variable, it just points to the original object. A copy is not made. So, change the object via either either one will change the other (since they both point to the same object). Strings are immutable (a string is never actually changed). Things that feel like modifications to a string always just return a new string so this aspect of javascript doesn't affect strings so much. But, it is very important to know that arrays and objects are assigned by reference.