Reading and Writing Array Elements


Reading and Writing Array Elements

Elements of an array are accessed using square brackets, sometimes termed the [] operator. (In JavaScript, the [] operator can also be used to access object properties, as I show you in Chapter 7, “ Working with Objects.”)

This means that it’s easy to save a value to an array element or to retrieve a value from an array element.

Here are some examples of reading and writing array elements:

var theVal = theArray[5]; 
// retrieves the value of the sixth element of theArray and 
// stores the value in the variable theVal 

theArray[0] = 256.17; 
// stores the floating point numeric value 256.17 in the first 
// element of theArray 

var i = 1; 
theArray[i] = "Good morning"; 
// stores the text string "Good morning" to theArray[1] 

theArray[i +1] = 12 
// stores the integral numeric value 12 to theArray[2] 

Let’s look at an example that’s a bit more complete. The code shown in Listing 6-1 declares a four-element array, assigns a value to each element of the array, and then retrieves an element and displays it as part of a text string (see Figure 6-1).

Listing 6.1: Reading and Writing Array Elements

start example
<HTML>
<HEAD>
<TITLE> 
   Year of the ? 
   </TITLE>
</HEAD>
<BODY>
<H1>
<SCRIPT> 
      var myArray = new Array(4); 
      myArray[0] = "dog"; 
      myArray[1] = "cat"; 
      myArray[2] = "snake"; 
      myArray[3] = "dragon"; 
      var i = 3; 
      var theYear = myArray[i]; 
      document.write("It is the year of the " + theYear + "."); 
   </SCRIPT>
</H1>
</BODY>
</HTML>
 
end example

click to expand
Figure 6-1: The text value in the array element is displayed.

In part, the example shown in Listing 6-1 demonstrates that a variable can be used for the index of an array. The ability to do this is part of what gives arrays their power, as you’ll see in the examples later in this chapter.

Try This at ome 

As you can see from this example (Listing 6-1), it’s really easy to assign values to array elements and to retrieve values from arrays. Because this is so easy to do, you should try it—so you can make sure you’re comfortable with arrays!



Adding and Removing Array Elements

In most modern programming languages, once you declare the number of elements in an array, that number is fixed. Not so in JavaScript. You can change the number of elements in an array at any point.

To add a new element to an array, you just assign a value to the element. For example, let’s assume you have an array with two elements:

var myArray = new Array(2); 
myArray[0] = "dog"; 
myArray[1] = "cat"; 

The following assignment:

myArray[2] = "snake" 

adds an element with an index of 2 and a value of "snake" to myArray.

The Undefined Value

If a variable, or array element, doesn’t exist, or if the variable (or array element) has been declared but has no value assigned to it, in JavaScript the variable (or array element) evaluates to the special value undefined.

To determine if a variable (or array element) exists and has a value, you can compare the value to undefined. (I provide an example of this in the section “ Iterating Through an Array.”)

Conversely, if you want to get rid of the value of an array element, you can simply assign the special value undefined to the array element at a specific index. Note that this doesn’t actually remove the element, it just makes the value of the element undefined.

For example, let’s take the four-element array created with these statements:

var myArray = new Array(4); 
myArray[0] = "dog"; 
myArray[1] = "cat"; 
myArray[2] = "snake"; 
myArray[3] = "dragon"; 

You can now delete the fourth (and last) element from the array by executing this statement:

myArray[3] = undefined; 

Note 

You can also delete an element in an array using the delete method. The statement delete myArray[3]; is equivalent to the statement myArray[3] = undefined;.

JavaScript Arrays Are Sparse

There’s one other thing you should know about arrays in JavaScript: JavaScript arrays are sparse.

JavaScript arrays go around the world with their laptops and wooden begging bowls and nothing else. Not so. No, when an array is sparse, it doesn’t mean that the array lives an ascetic, monk-like lifestyle in a small hermit cell with only a few possessions. (I thought I’d state this just in case you decided to ask.)

To say that an array is sparse means that the values of the index for the array doesn’t need to be a contiguous range of numbers. Space in the computer’s memory is only allocated for the array elements that are actually stored in the array (and not for elements that are undefined).

For example, the following statements create an array with four defined elements:

var myArray = new Array(); 
myArray[500] = "dog"; 
myArray[1000] = "cat"; 
myArray[2000] = "snake"; 
myArray[3000] = "dragon"; 

As you’ll see in a moment, the value of the length property of this array is 3001; however, only the four elements referenced in these statements (with an index value of 500, 1000, 2000, and 3000) have been allocated space in memory.