Web DevCenter
oreilly.comSafari Books Online.Conferences.
MySQL Conference and Expo April 14-17, 2008, Santa Clara, CA

Sponsored Developer Resources

Web Columns
Adobe GoLive
Essential JavaScript
Megnut

Web Topics
All Articles
Browsers
ColdFusion
CSS
Database
Flash
Graphics
HTML/XHTML/DHTML
Scripting Languages
Tools
Weblogs

Atom 1.0 Feed RSS 1.0 Feed RSS 2.0 Feed

Learning Lab






Working with Object Trees: Part One
Pages: 1, 2, 3

Populating an array

You populate an array by assigning values to its elements. For example, the code in Listing 2 creates an array called myArray and populates the first and second elements. In this case, the first element is a number and the second element is a string. Unlike in some other languages where an array must contain elements of the same data type, it is perfectly legal in JavaScript to populate an array with various types of elements.


Listing 2: Populating an array



<script language="JavaScript">
// define an array variable and create an Array object
var myArray = new Array();
// populate the first and second elements
myArray[0] = 1;
myArray[1] = "the name";
</script>

You can even assign an array as an element of another array, as demonstrated in the code in Listing 3.


Listing 3: Assigning an array as an element of another array

<script language="JavaScript">
// define an array variable and create an Array object
var anArray = new Array();
var anotherArray = new Array();
anArray[0] = 1;
// assinging another array as an element of anArray
anArray[1] = anotherArray;
</script>

Knowing how to create and populate an array is basically the foundation for working with an object hierarchy in JavaScript.

The 'delete' operator

Not until Netscape Navigator 4 did JavaScript have the delete operator for deleting an array element. However, as you will soon see, using the delete operator is not an ideal way of deleting an element because it does not decrease the length property of the array.

Listing 4 lists the code that uses the delete operator to delete the third element of an array. Notice how the third element value changes.


Listing 4: Deleting an array element

<html>
<script language="JavaScript">
var myArray = new Array();
myArray[0] = "first element.";
myArray[1] = "second element.";
myArray[2] = "third element.";
document.write(myArray.length + "<br />");
document.write(myArray[2] + "<br />");
delete myArray[2];
document.write(myArray.length + "<br />");
document.write(myArray[2] + "<br />");
</script>
</html>

The code in Listing 4 writes the length property of myArray and the third element of it before and after the third element is deleted using the delete operator. Running the code in Microsoft Internet Explorer 4 and 5, and Netscape Navigator 4, you will see the following result. Note that the length property does not change after you delete the third element.

3
third element.
3
undefined

Running the code in Netscape Navigator 3 gives you the following result:

3
third element.
3
null

The code in Listing 5 deletes an array element and reassigns a new value to the deleted element.


Listing 5: Deleting an array element and reassigning a new value

<html>
<script language="JavaScript">
var myArray = new Array();
myArray[0] = "first element.";
myArray[1] = "second element.";
myArray[2] = "third element.";
document.write(myArray.length + "<br />");
document.write(myArray[1] + "<br />");
delete myArray[1];
document.write(myArray.length + "<br />");
document.write(myArray[1] + "<br />");
myArray[1] = "new element.";
document.write(myArray.length + "<br />");
document.write(myArray[1] + "<br />");
document.write(myArray.length + "<br />");
document.write(myArray[2] + "<br />");
</script>
</html>

Running the code in Listing 5 in Internet Explorer 4 and 5, and Netscape Navigator 4, gives you the following result.

3
second element.
3
undefined
3
new element.
3
third element.

It is obvious that the delete operator does not really remove the element from memory. Therefore, you sometimes need to devise another way to delete an array element.

Pages: 1, 2, 3

Next Pagearrow