Javascript Array TUTORIAL for beginners



Since Array is a bit vast topic, we have decided to expand the tutorial to cover a number array related topics in this tutorial.

Let us revisit the following piece of code that calculates the areas of three rectangles. The length of the three rectangles are stored in an array. The breadth of the rectangle are stored in another array. And the area in a third array. 


<html>
<body>
<script type="text/javascript">
<!--

var length = new Array(3);
var breadth = new Array(3);
var area = new Array(3);
var i;

length[0] = 10;
length[1] = 20; 
length[2] = 30;

breadth[0] = 5; 
breadth[1] = 15; 
breadth[2] = 25;

           for (i = 0; i <= 2; i++)
            {
                area[i] = length[i] * breadth[i];
                document.write("Area [",i,"] = ");
                document.write(area[i]);
                document.write("<br/>");
            }
//-->
</script>
</body>
</html>


The program produces the following output


Area [0] = 50
Area [1] = 300
Area [2] = 750
Let us take a look at how the array is initialized



var length = new Array(3);
var breadth = new Array(3);
var area = new Array(3);


The statement

var breadth = new Array(3);


initializes the array length and has a size of 3. You can check it using the following javascript code


document.write(breadth.length);


However, it is not necessary to specify the length of the javascript array at the begining. The javascript array can stay unspecified at the begining and can grow as

required. So we could replace the statements

var length = new Array(3);
var breadth = new Array(3);
var area = new Array(3);


with just

var length = new Array();
var breadth = new Array();
var area = new Array();

And the program will work perfectly fine.

We may however combine the initialization in one single statement as in

var length = new Array(10,20,20);
var breadth = new Array(5,15,25);



So if we write the code

<html>
<body>
<script type="text/javascript">
<!--
var length = new Array(10,20,20);
var breadth = new Array(5,15,25);
var area = new Array();
var i;


           for (i = 0; i <= 2; i++)
            {
                area[i] = length[i] * breadth[i];
                document.write("Area [",i,"] = ");
                document.write(area[i]);
                document.write("<br/>");
            }
//-->
</script>
</body>
</html>


It will still produce the same result.


Javascript has yet another preferred way of declaring the arrays. We do away with the Array keyword and use square brackets  [ ]. So instead of   


var length = new Array(10,20,20);
var breadth = new Array(5,15,25);

We use


var length = [10,20,20];
var breadth = [5,15,25];

The following code still produces the same result



<html>
<body>
<script type="text/javascript">
<!--
var length = [10,20,20];
var breadth = [5,15,25];
var area = new Array();
var i;


           for (i = 0; i <= 2; i++)
            {
                area[i] = length[i] * breadth[i];
                document.write("Area [",i,"] = ");
                document.write(area[i]);
                document.write("<br/>");
            }
//-->
</script>
</body>
</html>

Finally, we can replace


var area = new Array();

with

var area = [];

And will still have the same result. The newer javascript trend has been towards the use of the [] brackets. But you may occassionally come aross the older method, so it is

always better to know both the methods.


There is however, one subtle difference, which you must know if you are initializing the array. Take a look at the following  examples


var x = new Array(5); // Creates an empty Array that has a size of 5.
var y = [5];          // Creates an Array with 5 as the first element.



The following code

<html>
<body>
<script type="text/javascript">
<!--
var x = new Array(5); // Creates an empty Array that has a size of 5.
var y = [5];          // Creates an Array with 5 as the first element.



               document.write(x.length); document.write("<br/>");
               document.write(y.length);document.write("<br/>");
               document.write(x[0]); document.write("<br/>");
               document.write(y[0]);document.write("<br/>");
          
//-->
</script>
</body>
</html>


Will give the output



5
1
undefined
5