Once we've created an array, we'll inevitably want to retrieve or change the value of its elements. To do so, we can use the array access operator (i.e., square brackets), [ ], which we introduced in Chapter 5.
To access an individual element, specify the array's identifier, followed by the element's index within square brackets, like this:
arrayName[elementNumber]
where arrayName is usually a variable pointing to the array, and elementNumber is an integer value specifying the element's index. The first element is number 0, and the last element number is 1 less than the array's length. Specifying an element number greater than the last valid element number causes the interpreter to return undefined. For example:
// Create an array using an array literal, and store it in trees var trees = ["birch", "maple", "oak", "cedar"]; // Display the first element of trees in the Output window trace(trees[0]); // Displays: "birch" // Assign the third element's value to the variable favoriteTree // (remember indexes start at 0, so index 2 is the third element!) var favoriteTree = trees[2]; // favoriteTree becomes "oak"
Now here's the fun part. Since we can specify the index of an element as any number-yielding expression, we can use variables or complex expressions just as easily as we use numbers to specify an element index. For example:
var i = 3; var lastTree = trees[i]; // Set lastTree to "cedar"
We can even use function-call expressions that have numeric return values as our array indexes:
// Set randomTree to a randomly picked element of trees // by calculating a random number between 0 and 3 var randomTree = trees[Math.floor(Math.random( ) * 4)];
Hot dog, that's powerful! You might use a similar approach to pick a random question from an array of trivia questions or to pick a random card from an array that represents a deck of cards.
Note that accessing an array element is very similar to accessing a variable value. Array elements can be used as part of any complex expression, as follows:
var myNums = [12, 4, 155, 90]; var myTotal = myNums[0] + myNums[1] + myNums[2] + myNums[3]; // Sum the array
Summing the values of an array's elements manually isn't exactly the paragon of optimized code. Later, we'll see a much more convenient way to access an array's elements sequentially.
To set an element's value, we use arrayName[elementNumber] as the left-hand operand of an assignment expression:
// Make an array var cities = ["Toronto", "Montreal", "Vancouver", "Waterloo"]; // cities is now: ["Toronto", "Montreal", "Vancouver", "Waterloo"] // Set the value of the array's first element // cities becomes ["London", "Montreal", "Vancouver", "Waterloo"] cities[0] = "London"; // Set the value of the array's fourth element // cities becomes ["London", "Montreal", "Vancouver", "Hamburg"] cities[3] = "Hamburg"; // Set the value of the array's third element // cities becomes ["London", "Montreal", 293.3, "Hamburg"] cities[2] = 293.3; // Notice that the datatype change is not a problem
Note that we can use any nonnegative numeric expression as the index when setting an array element:
var i = 1; // Set the value of element i // cities becomes ["London", "Prague", 293.3, "Hamburg"] cities[i] = "Prague";