An array is a type of variable that stores a collection of variables. Arrays in JavaScript are zero-based - they start from zero. (instead of foo[1], foo[2], foo[3], JavaScript uses foo[0], foo[1], foo[2].)
Overview
JavaScript arrays at a glance:
animals = ["cat", "dog", "tiger"] // Initialization
fruits = [["apple", "orange"], ["pear"]] // Initialization of a nested array
cat = animals[0] // Indexed access
apple = fruits[0][0] // Indexed access, nested
animals[0] = "fox" // Write indexed access
for (var i = 0; i < animals.length; ++i)
item = animals[i] // For each loop
animals = animals.concat("mouse") // Append
animals = animals.concat(["horse", "ox"]) // Expand
animals.pop() // Yields "ox", removing it from animals
animals.push("ox") // Push ox back to the end
animals.shift() // Yields "fox", removing it from animals
animals.unshift("fox") // Place fox back to the beginning
mytext = [1, 2, 3].join("-") // Yields "1-2-3" via join
items = mytext.split("-") // Splits
Basic use
To make a new array, make a variable and give it a value of new Array().
var foo = new Array()
After defining it, you can add elements to the array by using the variable's name, and the name of the array element in square brackets.
foo[0] = "foo";
foo[1] = "fool";
foo[2] = "food";
You can call an element in an array the same way.
alert(foo[2]);
//outputs "food"
You can define and set the values for an array with shorthand notation.
var foo = ["foo", "fool", "food"];
Exercise
Make an array with "zzz" as one of the elements, and then make an alert box using that element.
Nested arrays
You can also put an array within an array.
The first step is to simply make an array. Then make an element (or more) of it an array.
var foo2 = new Array();
foo2[0] = new Array();
foo2[1] = new Array();
To call/define elements in a nested array, use two sets of square brackets.
foo2[0][0] = "something goes here";
foo2[0][1] = "something else";
foo2[1][0] = "another element";
foo2[1][1] = "yet another";
alert(foo2[0][0]); //outputs "something goes here"
You can use shorthand notation with nested arrays, too.
var foo2 = [ ["something goes here", "something else"], ["another element", "yet another"] ];
So that they're easier to read, you can spread these shorthand notations across multiple lines.
var foo2 = [
["something goes here", "something else"],
["another element", "yet another"]
];
Properties and methods of the Array() object
concat()
The concat() method returns the combination of two or more arrays. To use it, first you need two or more arrays to combine.
var arr1 = ["a","b","c"];
var arr2 = ["d","e","f"];
Then, make a third array and set its value to arr1.concat(arr2).
var arr3 = arr1.concat(arr2) //arr3 now is: ["a","b","c","d","e","f"]
Note that in this example the new arr3 array contains the contents of both the arr1 array and the arr2 array.
join() and split()
The Array Object's join() method returns a single string which contains all of the elements of an array — separated by a specified delimiter. If the delimiter is not specified, it is set to a comma. The String object's split() method returns an array in which the contents of the supplied string become the array elements — each element separated from the others based on a specified string delimiter.
To use join(), first make an array.
var abc = ["a","b","c"];
Then, make a new variable and set it to abc.join().
var a = abc.join(); //"a,b,c"
You can also set a delimiter.
var b = abc.join("; "); //"a; b; c"
To convert it back into an array with the String object's split() method.
var a2 = a.split(","); //["a","b","c"]
var b2 = b.split("; "); //["a","b","c"]
pop() and shift()
The Array pop() method removes and returns the last element of an array. The Array shift() method removes and returns the first element of an array. The length property of the array is changed by both the pop and shift methods.
(note: The shift() method also changes all the index numbers of the array. For example, arr[0] is removed, arr[1] becomes arr[0], arr[2] becomes arr[1], and so on.)
First, make an array.
var arr = ["0","1","2","3"];
Then use pop() or shift().
alert(arr); //outputs "0,1,2,3"
alert(arr.pop()); //outputs "3"
alert(arr); //outputs "0,1,2"
alert(arr.shift()); //outputs "0"
alert(arr); //outputs "1,2"
push() and unshift()
The push() and unshift() methods reverse the effect of pop() and shift(). The push() method adds an element to the end of an array and returns its new length. The unshift() method does the same with the beginning of the array (and like shift(), also adjusts the indexes of the elements.)
arr.unshift("0"); //"0,1,2"
arr.push("3"); //"0,1,2,3"