Grokking JavaScript Part 2 : Simple Arrays
Posted by postfuturist on 2009-08-18 23:55:57

An array in Javascript is a superset of an object that contains an ordered list of references. Here is the simplest Javascript array imaginable:

[]

The references in an array are not named, so creating an array of (references to) values and assigning that to a reference (variable) is easy.
var myarray = [1,2,"3","four"];

Arrays elements can be referenced through a square bracket syntax similar to the properties of an object are referenced. The difference is that the index is numerical, with the first reference in the array being the zeroth.
var anarray = ["foo","bar",1000];
document.write(anarray[0]); // foo
document.write(anarray[1]); // bar
document.write(anarray[2]); // 1000

Since arrays are also objects, named references may be added after creation.
var myarray = [1,2,3,"ABC"];
myarray.name = "MJ";
myarray["othername"] = "Michael";

There is no "literal" syntax to initialize a JavaScript array with object properties. Some web pages suggest iterating through an array with the "for(x in y)" syntax, but this is prone to bugs, as this iteration will iterate also through the object properties of an array.
var myarray = [1,2,3,"ABC"];
myarray.name = "MJ";
myarray.push("hey");

for(x in myarray)
{
document.write("(" + x + " -> " + myarray[x] + ") ");
}
// (0 -> 1) (1 -> 2) (2 -> 3) (3 -> ABC) (name -> MJ) (4 -> hey)
document.write(array.length); // 5


To just iterate through the array elements and not the properties, the traditional C style for loop works best:
for(var x = 0 ; x < myarray.length ; x++)
{
document.write("(" + x + " -> " + myarray[x] + ") ");
}
// (0 -> 1) (1 -> 2) (2 -> 3) (3 -> ABC) (4 -> hey)

As you can see from these examples, arrays have some built-in properties and functions, like "push()" to add items to the end of the array and "length" which returns the number of array elements (not object properties). These helper functions and properties do not exist in the array's object property map, they are just part of the language and the JavaScript runtime knows what to do. In addition to the push() function, there is a pop() function which removes the last item of the array and returns it. To add items to the front of an array, there is the unshift() function and to remove them from the front of the array, shift(). There are others. Here is a taste:
var test = ["a","b","c"];
test.push("d"); // ["a","b","c","d"]
var letter = test.pop(); // letter is "d" and test is back to original state
var first = test.shift(); // first is "a" and test is ["b","c"]
test.unshift("A"); // ["A","b","c"]
test.splice(1,1); // removed second element, so test is ["A","c"]
var large = concat(test, ["d","e"]); // large is ["A","b","d","e"]
var short = large.slice(1,2); // short is ["b","d"]
var desc = large.join("+"); // desc is a string : "A+b+d+e"

The functions all act on the array elements, not the object properties. Arrays can contain themselves, too.
var myarray = [3,2,1,"ABC"];
myarray.push(myarray);
print(myarray[4][4][4][4][0]); // 3

Like objects, arrays have a special Java-like syntax for initializing them in addition to the literal syntax in the previous examples.
var e = new Array();
e.push("first");
var another = new Array("first", "second"); // same as ["first","second"]


Comment from delicious robots blog - Grokking JavaScript Part 3 : Functions:
[...] JavaScript functions are also objects, just like arrays are also objects. Functions, when treated like objects, act like objects. They exist as instances [...]

    Leave a comment: