JavaScript Arrays

JavaScript arrays are basically used in storing multiple values in a single variable.

Create an Array in JavaScript

Here is an example, shows how to create an array in JavaScript:

var fruits = new Array( "Guava", "Apple", "Orange" );

You can also create an array in JavaScript, simply by assigning the values like this:

var fruits = [ "Guava", "Apple", "Orange" ];

The fruits[0] represents the first element which is "Guava" here, and the fruits[2] is the third element which is "Orange" here.

Display Array Element in JavaScript

Here is an example, shows how to display/print array element in JavaScript:

<!DOCTYPE html>
<html>
<head>
	<title>JavaScript Array Object Example</title>
</head>
<body>

<p id="array_object_para"></p>
<script>
	var cars = ["Audi", "Mercedes", "BMW"];
	document.getElementById("array_object_para").innerHTML = cars[0];
</script>

</body>
</html>

Here is the output produced by the above Array object example in JavaScript.

Here is the live demo output of the above JavaScript Array Object example program.

Create an Array in JavaScript using new Keyword

Here is an example, shows how to create an array in JavaScript using the keyword new:

<!DOCTYPE html>
<html>
<head>
	<title>JavaScript Array Object Example</title>
</head>
<body>

<p id="array_object_para2"></p>
<script>
	var cars = new Array("Audi", "Mercedes", "BMW");
	document.getElementById("array_object_para2").innerHTML = cars[0];
</script>

</body>
</html>

It will display the same output as produced from the above JavaScript Array Object example program.

Access Array Elements in JavaScript

To access any elements present in a array, then index the array. For example, if you want to access the first element of a array named myArr, then index this array as myArr[0]. Here is an example:

var name = cars[0];

You can also alter the value present at particular index number of the array. Here is an example, alter the value of the first element of the array cars:

cars[0] = "Opel";

JavaScript Array Object Properties

The table given below describes properties of the Array object in JavaScript.

Property	Description
constructor	holds the value of the constructor function that has created the object
length	holds the number of elements in an array
prototype	adds properties and methods to the Array object

JavaScript Array Object Methods

The table given here describes methods of the Array object in JavaScript.

Method	Description
concat()	joins two or more arrays
join()	joins all the elements of an array into a string
pop()	removes the last element of an array and returns that element
push()	adds new element as the last element and the returns the length of the new array
reverse()	reverses the order of list of element in an array
shift()	removes the first element of an array and then returns that element
slice()	selects a part of an array and then returns that part as a new array
sort()	sorts the elements of an array
splice()	adds or removes the elements of an array
tostring()	converts an array into a string and then returns the string
unshift()	adds new elements to an array and then returns the new length
valueof()	returns the primitive value of an Array object

JavaScript Array Example

Here is an example demonstrates array in JavaScript.

<!DOCTYPE HTML>
<HTML>
<HEAD>
	<TITLE>JavaScript Array Example</TITLE>
	<SCRIPT type="text/javascript">
		js_array_var1=new Array("Sunday", "Monday", "Tuesday", "Wednesday", "Thursday");
		js_array_var2=new Array(1, 2, 3, 4, 5);
		document.write("Array 1 : "+js_array_var1+"<HR/>")
		document.write("Array 2 : "+js_array_var2+"<HR/>")
		document.write("Concatenated Both Arrays : "+js_array_var1.concat(js_array_var2+"<HR/>"))
		document.write("Joined Both Arrays : "+js_array_var1.join(js_array_var2)+"<HR/>")
		document.write("Array 1 Popped Out : "+js_array_var1.pop()+"<HR/>")
		document.write("Reversed Array 1: "+js_array_var1.reverse()+"<HR/>")
		document.write("Shifted Array 1 : "+js_array_var1.shift()+"<HR/>")
		document.write("Sorted Array 1 : "+js_array_var1.sort())
	</SCRIPT>
</HEAD>
<BODY>

</BODY>
</HTML>

Here is the output produced by the above JavaScript array example.

Here is the live demo output of the above Array object example in JavaScript.

JavaScript Online Test

« Previous Tutorial Next Tutorial »