Arrays are collection of elements. The elements are stored in contiguous memory locations and are accessed by using indices in square parentheses. JavaScript Arrays are unlike arrays in other programming language since JavaScript arrays can store any type of data elements.
Constructor of JavaScript Arrays
A JavaScript array object can be created using Array constructor. An array can be created by initializing it with an array of literals.
Syntax
To create an empty array
var array_name= new Array()
var array_name= new Array(array_size)
To create array with elements
var array_name= new Array(comma separated element list)
var array_name= [comma separated element list]
JavaScript Array Properties
length
length property of an array returns the count of elements in the array. If the array size is defined but a lesser number of elements are stored in the array, the length property returns the number of filled and unfilled values. If the elements of the array are printed the uninitialized values are displayed as undefined. The property holds an integer value.
array_name.length
Adding elements to an Array
The elements of a JavaScript Array can be accessed by using the index within square parentheses [] after the name of the array. If an empty array is created then this method can be used to add elements to the array.
Example
<BODY>
<SCRIPT LANGUAGE="JavaScript">
document.write("<BR> Constructor empty array");
var empArray= new Array();
empArray[0]=101;
empArray[1]='James';
empArray[2]='HR';
empArray[3]=200;
for (i=0;i<empArray.length;i++)
{
document.write("<BR>"+empArray[i]);
}
document.write("<BR> Constructor with array size");
var szArray= new Array(10);
szArray[0]=102;
szArray[1]='Harry';
szArray[2]='Sales and Marketing';
szArray[3]=2000;
for (i=0;i<szArray.length;i++)
{
document.write("<BR>"+szArray[i]);
}
document.write("<BR> Constructor initialised with array data list");
var conArray= new Array(103,'Ana','Accounts', 3000);
for (i=0;i<conArray.length;i++)
{
document.write("<BR>"+conArray[i]);
}
document.write("<BR> Constructor with array data list");
var listArray= [104,'Bella','Sales', 4000];
for (i=0;i<listArray.length;i++)
{
document.write("<BR>"+listArray[i]);
}
</SCRIPT>
</BODY>JavaScript Arrays Methods
concat (array1, array2, array3…)
This array object method accepts multiple arrays as arguments. Second array and the rest of the arrays passed as arguments are combined after first array and a combined array is returned. This method combines the array objects into one array object. This method returns one array.
array_object.concat(array1, array2, array3…)
<BODY>
<SCRIPT LANGUAGE="JavaScript">
var empArray= new Array();
var szArray= new Array(10);
var conArray= new Array(103,'Ana','Accounts', 3000);
var listArray= [104,'Bella','Sales', 4000];
document.write("<BR>"+empArray.concat(szArray,conArray,listArray));
</SCRIPT>
</BODY>join ()
The join method is used to join all the elements of an array as string. The join method accepts one argument -a separator character which is used to combine the elements of the array. If you use the join method without specifying the separator character then comma(,) is used to combine the array elements. This method returns a string.
array_object.join(separator_character)
<BODY>
<SCRIPT LANGUAGE="JavaScript">
var empArray= new Array();
var szArray= new Array(10);
var conArray= new Array(103,'Ana','Accounts', 3000);
var listArray= [104,'Bella','Sales', 4000];
document.write("<BR> Using Join metheod");
strval=listArray.join();
document.write("<BR>"+strval);
strval=listArray.join("--->");
document.write("<BR>"+strval);
</SCRIPT>
</BODY>pop ()
This method considers the array as a stack and returns the last element of the array. The returned element is removed from the array. The pop method does not require any argument. This method returns the last element so its return type is the data type of the removed element.
object_array.pop()
<BODY>
<SCRIPT LANGUAGE="JavaScript">
var empArray= new Array();
empArray[0]=101;
empArray[1]='James';
empArray[2]='HR';
empArray[3]=200;
document.write("<BR> Before pop method");
document.write("<BR>" +empArray.join());
document.write("<BR> Popped element");
document.write("<BR>" +empArray.pop());
document.write("<BR> After pop method");
document.write("<BR>" +empArray.join());
</SCRIPT>
</BODY>push (new_element)
The push method also considers the array as a stack and adds the element passed as an argument at the end of the array. The returned element is appended after the existing last element of the array. This method returns an integer value representing the new count of elements (length ).
object_array.push(new_element)
<BODY>
<SCRIPT LANGUAGE="JavaScript">
var empArray= new Array();
empArray[0]=101;
empArray[1]='James';
empArray[2]='HR';
empArray[3]=200;
document.write("<BR> Before push method");
document.write("<BR>" +empArray.join());
document.write("<BR>" +empArray.push("Hello"));
document.write("<BR> after push method");
document.write("<BR>" +empArray.join());
</SCRIPT>
</BODY>reverse ()
The reverse method is used to reverse the elements of the array. The reverse method does not accept any arguments. This method returns copy of the original array with reversed elements and the original array remains unchanged.
object_array.reverse()
<BODY>
<SCRIPT LANGUAGE="JavaScript">
var demoData=[11,22,33,44,55,66,22,5,77,88,11,99,44];
document.write("<BR> Before reverse");
document.write("<BR>" +demoData.join());
document.write("<BR> After reverse");
document.write("<BR>" +demoData.reverse());
</SCRIPT>
</BODY>shift ()
JavaScript array method shift removes the first element of the array. The removed element is returned that can be stored in another variable or displayed. The shift method does not accept any arguments. After using the shift method the length of array is reduced by 1.
object_array.shift()
<BODY>
<SCRIPT LANGUAGE="JavaScript">
var demoData=[11,22,33,44,55,66,22,5,77,88,11,99,44];
document.write("<BR> Before shift");
document.write("<BR>" +demoData.join());
document.write("<BR> Deleted Item ->>" +demoData.shift());
document.write("<BR> After shift");
document.write("<BR>" +demoData.join());
</SCRIPT>
</BODY>slice (start_index, end_index)
Slice method creates a sub-array from an array starting from the start_index to the last_index. The shift method accepts two arguments the index from where the slice should start and the index till where the slice must end. The slice method returns an array.
object_array.slice(start_index, end_index)
<BODY>
<SCRIPT LANGUAGE="JavaScript">
var demoData=[11,22,33,44,55,66,22,5,77,88,11,99,44,22,66,66,44,33];
document.write("<BR>"+demoData.slice(4,8));
</SCRIPT>
</BODY>sort()
Sort method is used to sort the elements of an array. The sorting is done on the basis of ASCII values of the elements since a JavaScript array can be a mixed collection of elements of different data types. The method returns the sorted array.
object_array.sort()
<BODY>
<SCRIPT LANGUAGE="JavaScript">
var demoData=[11,22,33,44,55,66,22,5,77,88,11,99,44];
document.write("<BR> Before Sort");
document.write("<BR>" +demoData.join());
demoData.sort();
document.write("<BR> After Sort");
document.write("<BR>" +demoData.join());
</SCRIPT>
</BODY>splice()
Splice method is used to update the array by replacing the elements by new values. The start_index is from where the update or replacement is to start. delete_count is the count of elements you want to replace. Last argument is the element or array of elements to replace.
Array_object.splice(start_index, delete_count, [array of new elements])
<BODY>
<SCRIPT LANGUAGE="JavaScript">
var demoData=[11,22,33,44,55,66,22,5,77,88,11,99,44,22,66,66,44,33];
demoData.splice(5,1,[11111,222222,333333]);
document.write("<BR>"+demoData.join());
</SCRIPT>
</BODY>toString()
toString array method converts an array into a string with all elements separated by commas .The method does not require any argument and returns a string.
object_array.toString()
<BODY>
<SCRIPT LANGUAGE="JavaScript">
var demoData=[11,22,33,44,55,66,22,5,77,88,11,99,44];
document.write("<BR> after toString");
document.write("<BR>" +demoData.toString());
</SCRIPT>
</BODY>unshift(element1, element2,…)
JavaScript array method unshift adds elements at the beginning of the array. The added elements are added in the sequence they are in the argument list. The unshift method increases the length of array by the count of elements added in the beginning of the array.
object_array.unshift(element1, element2,…)
<BODY>
<SCRIPT LANGUAGE="JavaScript">
var demoData=[11,22,33,44,55,66,22,5,77,88,11,99,44];
document.write("<BR> Before unshift");
document.write("<BR>" +demoData.join());
demoData.unshift([200000,3000000,400000]);
document.write("<BR> After unshift");
document.write("<BR>" +demoData.join());
</SCRIPT>
</BODY>