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.

 ``` ```

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 area = new Array(3); ```

with just

```var length = 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);

So if we write the code

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

for (i = 0; i <= 2; 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);

We use

var length = [10,20,20];

The following code still produces the same result

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

for (i = 0; i <= 2; 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