Javascript Arrays Syntax and Examples

Please visit my new Web Site https://coderstechzone.com

For each programming language array is a most common & popular object. Without array most of the times we can not make our logic. Thats why in this post i will try to give you a complete article on Javascript arrays, syntax with appropriate code examples. We knew that variables are used to store a single piece of information in the memory. Where as array can hold a series of information as its elements. So that you can retrieve value by providing a single name with an element number. Think you have to take 15 numeric inputs from user then apply some logic & generate the output. So it will be cumbersome to think of a variable name for each of input. Such type of problem you can overcome by using array. So we can write the definition of an array is "An array is also a variable of a sequence, or list, of values. A value in a JavaScript array can hold a number or string, function or an object. JavaScript arrays can store any datatype. A single value in a JavaScript array will be treated an element." In the later section of the article i will also discuss on "Javascript Dynamic Array Syntax and Declaration" and "Predefined or Builtin Javascript Array Functions".

Syntax of an Array:
Every array has to be declared before using it. In Javascript array declaration syntax is geven below:

var thearrayname=new Array(arraylength)

In the above syntax thearrayname is a variable like array. We can create an array only using the syntax new Array. It's case sensitive and so "Array" should not be defined as "array". You can declare the size of the array in arraylength. So, we can store variables in the array that we have declared as arraylength. You can declare any size based on your requirement.

Declaring & Assigning Values:
So based on above syntax now we want to declare an array of size 4. Which will hold our favourite colors name. So the declaration will be:

var favColor=new Array(4);

Now we need to assign our favourite colors name:

favColor[0]="White";
favColor[1]="Red";
favColor[2]="Green";
favColor[3]="Yellow";

Look at the assignment here you found that i have started from 0. Because Arrays always start from 0th index or position. If we have set the size as 4, the array will have 4 position 0,1,2 & 3.

You can also declare in the following way:

var favColor=new Array("White","Red","Green","Yellow");

Such arrays are known as "Dense Arrays". They are declared by listing the values of the arrau elements in the declaration, in place of the array length.

Few Concern:
1. You can define any element values in any order.
2. You can increase the array length any time.
3. IF you want to assign a value in out range of array index, the value will be discarded.

Retrieving Values:
We have learned how we can stroe values in an array. Now we will learn how we can read values from array. There were two ways we can read values. One is directly calling by index number & another one is looping through array.

Now if you want to print your 4th favourite color name then the code should be:

document.write("My favourite color is : "+favColor[3]);

Now if you want to loop through the array & print all values then the code should be:

<script>
var favColor=new Array(4);

favColor[0]="White";
favColor[1]="Red";
favColor[2]="Green";
favColor[3]="Yellow";

//To get the length of an javascript array, use its length property
var len=favColor.length;
for(i=0;i")
{
document.write("My favourite color "+eval(i+1)+" is :"+favColor[3]);
}
</script>

So i think the basic concept on javascript array is clear now. Now we can move forward for more on arrays.

Javascript Dynamic Array Syntax And Declaration:
In most of the times during logic building we do not want to mention or specify the array with a fixed size or length. In such cases we can create or declare an array with out mentioning the length. This array will dynamically set its value when a new variable or entry is added.

Syntax:

var thearrayname= new Array();

Now we can assign value at any position in this array as it has no length specified. We can test this by using the attribute "length".e.g:

thearrayname[3] = "Yellow";

As we have assigned a value in 3rd position the length of array will now be 4.

Javascript Arrays Builtin Functions:
The following are some standard functions that can be used only with arays:

toString():
This function converts an array to a string. Commas separate the array elements.

join(seperator):
This function is same as the toString() function. It converts an array to a string, but the seperator string separates the array elements.

sort():
This function sorts the contents of an array based upon the ASCII value.

reverse():
This function reverses the contents of an array. The last element becomes first and the first elements becomes last.

The basic syntax for using the above function is as follows:
thearrayname.function()

The following example shows how to use the various standard array functions:

<html>
<head>
<title>
Usage of javascript array built in functions
</title>
</head>
<body style="font-family:verdana;font-size:1.2em">
<br/>
<br/>
<h1>List of builtin javascript array functions</h1>
<hr>
<script language="JavaScript">
var favColor=new Array(4)
favColor[0]="White"
favColor[1]="Red"
favColor[2]="Green"
favColor[3]="Yellow"
document.write("favColor.toString() : "+favColor.toString()+"<br/><br/>");
document.write("favColor.join('') : "+favColor.join('')+"<br/><br/>");
document.write("favColor.reverse() : "+favColor.reverse()+"<br/><br/>");
document.write("favColor.sort() : "+favColor.sort()+"<br/><br/>");
</script>
</body>
</html>

This program uses the toString(), reverse(), sort() and join() functions to manipulate the contents of the array favColor.