Javascript Arrays

An array is basically a collection of variables that can be referenced as a group. Let's begin by looking at several different ways that we can define an array. Note that in each case we are creating our own array that will have its own properties but which will share the methods that are defined by the built in array object.

1 var myArray = new Array();
2 var anotherArray = new Array(5);
3 var thirdArray = new Array(2, 5, 3, 7);
4 var arrayFour = new Array('abacus','boat','yak','zebra');
5 var fifthArray = new Array(width:10,height:20,depth:15);
6 var arraySix = [];
7 var seventhArray = [2,5,3,7];
8 var array8 = [width:10,height:20,depth:15];

Having defined your array you can then reference the entries within the array in order to either load new values into those entries or to extract the values currently held by those entries. This is the second use for the square bracket notation since we reference the particular entries in the array by specifying which entry we want to reference within square brackets after the object name.

alert(thirdArray[1]);
alert(array8['height']);

The first of these statements will extract the 5 from thirdArray since this is the value stored in position 1 within the array (all Javascript arrays count from zero). The second will extract the 20 that is held in the entry within array8 that has the name height associated with it.Note that the value that we place within the square brackets to identify the entry that we want to access need not be a constant as in these examples. We can also use a variable name there in order to access the entry corresponding to the nunber or name held in that variable.

Of course to be able to access all of the entries we need to know just how many entries there are in the array. For numbered array, this information is available to us via a property of the array called length. The length property of an array always contains a number one greater than that of the position within the array that holds the last entry so with the examples that we have looked at so far anotherArray.length contains 5 (since we have defined that the array should hold at least that many entries) while thirdArray.length and arrayFour.length both contain 4 (since they have values loaded into entries zero through three).

JavaScript provides the following methods that can be used to manipulate the entire content of an array.

firstArray.concat(secondArray)

This method allows us to join two arrays together. The entries in secondArray are added to the end of the entries already in firstArray.

myArray.join(',')

This method converts the content of the array into a text string by placing the entries one after the other with the spacified separator (a comma in this example) between each entry.

myArray.pop()

This extracts the last entry from the array. It both returns the value of the last entry in the array and removes that entry from the array.

myArray.push(element)

This adds whatever is contained within element into a new entry added to the end of the array. Very useful for adding to an array without having to work out how many entries the array already contains. Push and pop can also be used together to use an array as a stack where new entries are added to the end and the newest entry added is also the first one that needs to be retrieved. This arrangement is known as a stack because it works the same way as a stack of dirty dishes works with the first one to be washed being the last one added to the top of the stack.

myArray.reverse()

reverses the order of all of the entries in the array so that the first entry becomes the last and the last becomes the first.

myArray.shift()

works similarly to pop except that instead of retrieving the last entry from the array it retrieves the first. The entry is also removed from the array when it is retrieved and so all of the remaining entries get moved down. Push and shift can be used together to use an array as a queue where the first entry added is also the first that needs to be retrieved just the same way that the first person to queue for a bus is the first to be able to get on board.

myArray.unshift(element)

allows us to add element to the front of an array moving all of the existing elements down one to make room for it.

myArray.slice(start,end)

this method allows us to extract any section of the array into a new array simply by specifying the first and last entries we want to extract. You can even specify the positions using negative numbers if you want to count from the end of the array instead of from the start.

myArray.sort(compareFunction)

allows us to sort the entries in our array. If we don't specify a compareFunction to use for the sort then the entries will be sorted into ascending order as if the contents are all text strings. We can override the sort order to get the entries sorted into whatever order we like simply by specifying the name of a function to use for the comparisons that the sort will use to work out the order to out the entries in. That function will receive the two entries to be compared and needs to return 1 or -1 depending on which of the values is considered to be greater or return 0 if they are considered to be equal.

myArray.splice(position,number,element1,...)

this method is the ultimate in array manipulation since it both retrieves and removes a specified group of entries from the array (fthe specified number of entries starting from position) as well as inserting the elements supplied in the third and sunsequent parameters into that spot in the array in place of the entries retrieved. The rest of the array entries after that will be moved as needed depending on whether the number of entries removed from the array is greater or less than the number of entries inserted in their place.

 

This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow
Donate