Arrays

Contact Us or call 1-877-932-8228
Arrays

Arrays

An array is a grouping of objects that can be accessed through subscripts. At its simplest, an array can be thought of as a list. In JavaScript, the first element of an array is considered to be at position zero (0), the second element at position one (1), and so on. Arrays are useful for storing related sets of data.

Arrays are declared using the new keyword.

var myarray = new Array();

It is also possible and very common to use the [] literal to declare a new Array object.

var myarray = [];

Values are assigned to arrays as follows:

myarray[0] = value1;
myarray[1] = value2;
myarray[2] = value3;

Arrays can be declared with initial values.

var myarray = new Array(value1, value2, value3);
//or, using the [] notation:
var myarray = [value1, value2, value3];

The following example is similar to the previous one, except that it prompts the user for four different colors and places each into the userColors array. It then displays the values in the userColors array in the spans and assigns them to document.bgColor when the user clicks on the spans.

Unlike in some languages, values in JavaScript arrays do not all have to be of the same data type.

Code Sample:

VariablesArraysOperators/Demos/Arrays.html
---- C O D E   O M I T T E D ----

<script type="text/javascript">
	//Pop up four prompts and create an array
	var userColors = new Array();
	userColors[0] = window.prompt("Choose a color.", "");
	userColors[1] = window.prompt("Choose a color.", "");
	userColors[2] = window.prompt("Choose a color.", "");
	userColors[3] = window.prompt("Choose a color.", "");
</script>
</head>
<body>
<p>
	<span onclick="document.bgColor = userColors[0];">
	<script type="text/javascript">
		document.write(userColors[0]);
	</script>
	</span> |
	<span onclick="document.bgColor = userColors[1];">
	<script type="text/javascript">
		document.write(userColors[1]);
	</script>
	</span> |
	<span onclick="document.bgColor = userColors[2];">
	<script type="text/javascript">
		document.write(userColors[2]);
	</script>
	</span> |
	<span onclick="document.bgColor = userColors[3];">
	<script type="text/javascript">
		document.write(userColors[3]);
	</script>
	</span>
</p>
</body>
</html>

As the page loads, an array called userColors is declared.

var userColor = new Array();

The next four lines populate the array with user-entered values.

userColors[0] = window.prompt("Choose a color.", "");
userColors[1] = window.prompt("Choose a color.", "");
userColors[2] = window.prompt("Choose a color.", "");
userColors[3] = window.prompt("Choose a color.", "");

The body of the page contains a paragraph with four span tags, the text of which is dynamically created with values from the userColors array.

Associative Arrays

Whereas regular (or enumerated) arrays are indexed numerically, associative arrays are indexed using names as keys. The advantage of this is that the keys can be meaningful, which can make it easier to reference an element in an array. The example below illustrates how an associative array is used.

Code Sample:

VariablesArraysOperators/Demos/AssociativeArrays.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Associative Arrays</title>
<link href="style.css" rel="stylesheet" type="text/css">
<script type="text/javascript">
	var beatles = [];
	beatles["singer1"] = "Paul";
	beatles["singer2"] = "John";
	beatles["guitarist"] = "George";
	beatles["drummer"] = "Ringo";
</script>
</head>
<body>
<p>
	<script type="text/javascript">
		document.write(beatles["singer1"]);
		document.write(beatles["singer2"]);
		document.write(beatles["guitarist"]);
		document.write(beatles["drummer"]);
	</script>
</p>
</body>
</html>

Array Properties and Methods

The tables below show some of the most useful array properties and methods. All of the examples assume an array called beatles that holds "Paul", "John", "George", and "Ringo".

var beatles = ["Paul", "John", "George", "Ringo"];
Array Properties
Property Description
length Holds the number of elements in an array.
beatles.length // 4


Array Methods
Property Description
join(delimiter) Returns a delimited list of the items indexed with integers in the array. The default delimiter is a comma.
beatles.join(":") // Paul:John:George:Ringo
push() Appends an element to an array.
beatles.push("Steve")
pop() Removes the last item in an array and returns its value.
beatles.pop() // Returns Ringo
shift() Removes the first item in an array and returns its value.
beatles.shift() // Returns Paul
slice(start, end) Returns a subarray from start to end. If end is left out, it includes the remainder of the array.
beatles.slice(1 ,2) //Returns [John, George]
splice(start, count) Removes count items from start in the array and returns the resulting array.
beatles.splice(1, 2) //Returns [Paul, Ringo]
sort() Sorts an array alphabetically.
beatles.sort() //Returns [George, John, Paul, Ringo]
Next