JavaScript: Arrays

[VelMurugan]

JavaScript: Arrays

Arrays are a fundamental part of most programming languages and scripts. Arrays are simply an ordered stack of data items. Each element of the array can store its own data, just like a variable, thus you can say arrays are collections of variables. Items can be added and removed from the array at any time, also their value can be changed easily. One other feature of the arrays, which is specific to JavaScript is that the elements in the array can be of different types. For example in an array you can have both a string and an integer.

Using arrays, you can store multiple values under a single name. Instead of using a separate variable for each item, you can use one array to hold all of them.

    * Creating Arrays

    * Associative Arrays

    * Multidimensional Arrays

[VelMurugan]

Creating Arrays

There are a few different ways to create an array. The old way of creating arrays to involve the Array() constructor. JavaScript arrays are dynamic, so you can declare an array and do not pass any arguments with the Array() constructor. In this case you will create an empty array with no elements.

Code Select Expand

<script type="text/javascript">

//We initialize the array using the array() constructor.
var first_array = new Array();

first_array[0] = "This is an element";
first_array[1] = 5;
first_array[2] = "JavaScript - Tutorial";
first_array[3] = 16;
first_array[4] = 7;

var counter=0;

//Let's print out the elements of the array.
for (counter=0; counter<first_array.length; counter  )
   document.write(first_array[counter]   "<br>");

</script>

To declare an array with the specified number of elements you should pass a single integer as an argument. If you pass more than one argument then the number of elements will be equal to the number of data values specified. If you specify numbers or true/false values inside the array then the type of variables will be numeric or Boolean instead of string. Array's elements are accessed using their index, which starts from 0.

Code Select Expand

<script type="text/javascript">

//We declare the first array and pass a single integer as an argument..
var cars = new Array(5);

cars[0] = "Audi";
cars[1] = "Bentley";
cars[2] = "Mercedes";
cars[3] = "Mini";
cars[4] = "BMW";

//Now we declare the second array and pass 8 arguments.
//This technique does not work in JavaScript 1.2.
var flowers = new Array("Rose", 2.45, "Daisy", 1.57, "Orchild", 0.75, "Tulip", 1.15);

var counter=0;
document.write("<h1>Elements of the first array:</h1>");

for (counter=0; counter<cars.length; counter  )
   document.write(cars[counter]   "<br>");

counter=0;
document.write("<h1>Elements of the second array:</h1>");

for (counter=0; counter<flowers.length; counter  ) {

   if (counter % 2 == 0) {
      document.write(flowers[counter]   " costs ");
   }
   else {
      document.write(flowers[counter]   "<br>");
   }

}

</script>

[VelMurugan]

Associative Arrays

Associative arrays are arrays that allow you to call the array element you need using a string rather than a number, which is often easier to remember. The downside is that these aren't as useful in a loop because they do not use numbers as the index value. Have a look at the following example:

Code Select Expand

<script type="text/javascript">

var first_array = new Array();
first_array["key1"] = "the first element";
first_array["key2"] = "the second element";

var second_array  = new Array();
second_array["key3"] = "this is the first element of the second array";
second_array["key4"] = "this is the second element of the second array";

document.write(first_array["key1"]   "<br>");   //prints "the first element."
document.write(second_array["key3"]   "<br>");  //prints "the first element of the second array"
document.write(first_array["key2"]   "<br>");   //prints "the second element"
document.write(second_array["key4"]   "<br>");  //prints "this is the second element of the second array"

</script>

Because the indices in this associative array are not numbers, we cannot use a simple counter in a for loop to work with the array. The way to iterate over the items in an associate array is to use the for (value in array) construct, allowing you to access each item's value via array[value]. Have a look at the example:

Code Select Expand

<script type="text/javascript">

//We initialize the array using the Array() constructor.
//Note that for readability one can spread the argument over several lines.
var flower_shop = new Array ();

flower_shop["rose"] = "5.00";
flower_shop["daisy"] = "4.00";
flower_shop["orchid"] = "2.00";

//let's print out the headers to our table
document.write("<table border="1" cellpadding="5">");
document.write("<tr><th>Flower</th><th>Price</th></tr>");

//Now we start the for loop using the variable flower to hold our key.
for ( var flower in flower_shop) //print the values into a table cell for each iteration
  document.write( "<tr><td>"   flower   "</td><td>"   flower_shop[flower]   "</td></tr>");

//finally close the table
document.write ("</table>");

</script>

[VelMurugan]

Multidimensional Arrays

In the preceding examples you've learned how to use arrays. But what if you want to give more information on each flower? You now have the cost, but what if you wanted to add the number of flowers you get for that price, and the colour of the flower? One of the ways to do it is using multidimensional arrays.

A multidimensional array is an array that contains at least one other array as the value of one of the indexes. Example below shows how to use multidimensional array:

Code Select Expand

<script type="text/javascript">

//Initialize the array using the Array() constructor.
var flower_shop = new Array();

flower_shop['rose'] = new Array( "5.00", "7 items", "red" );
flower_shop['daisy'] = new Array( "4.00", "3 items", "blue" );
flower_shop['orchild'] = new Array( "2.00", "1 item", "white" );

//print "rose costs 5.00, and you get 2 items."
document.write( "rose costs "   flower_shop['rose'][0]   ", and you get "   flower_shop['rose'][1]   ".<br>");
//print "daisy costs 4.00, and you get 3 items."
document.write( "daisy costs "   flower_shop['daisy'][0]   ", and you get "   flower_shop['daisy'][1]   ".<br>");
//print "orchild costs 2.00, and you get 1 item.
document.write( "orchild costs "   flower_shop['orchild'][0]   ", and you get "   flower_shop['orchild'][1]   ".<br>");

</script>