Javascript Array Tutorial with examples

Creating an Array

To create and store items in an array, you first declare the array’s name (just as you
would a variable) and then supply a list of comma-separated values: Each value rep-
resents one item in the list.

To create an array, you put the list of items between opening and closing brackets—[ ]. For example, to create an array containing abbreviations for the seven days of the week, you could
write this code:

var days = ['Mon', 'Tues', 'Wed', 'Thurs', 'Fri', 'Sat', 'Sun'];

The brackets—[ ]—are very important; they tell the JavaScript interpreter that it’s
dealing with an array. You can create an empty array without any elements like this:

var playList = [];

You can store any mix of values in an array. In other words, numbers, strings, and
Boolean values can all appear in the same array:
var prefs = [1, 223, 'www.oreilly.com', false];

Accessing Items in an Array

You can access the contents of a simple variable just by using the variable’s name.
For example, alert(lastName) opens an alert box with the value stored in the variable
lastName.

However, because an array can hold more than one value, you can’t just
use its name alone to access the items it contains. A unique number, called an index,
indicates the position of each item in an array. To access a particular item in an array, you use that item’s index number.
For example, say you’ve created an array with abbreviations for the days of the week, and want to open an alert box that displayed the first item. You could write this:

var days = ['Mon', 'Tues', 'Wed', 'Thurs', 'Fri', 'Sat', 'Sun'];

alert(days[0]);

Adding an item to the end of an array

To add an item to the end of an array, you can use the index value that’s one greater than the last item in the list. For example, say you’ve have created an array named properties:
var properties = ['red', '14px', 'Arial'];

At this point, the array has three items. Remember that the last item is accessed using an index that’s one less than the total number of items, so in this case, the last item in this array is properties[2]. To add another item, you could do this:
properties[3] = 'bold';

This line of code inserts ‘bold’ into the fourth spot in the array, which creates an
array with four elements: [‘red’, ‘14px’, ‘Arial’, ‘bold’].

Notice that when you add the new item, you use an index value that’s equal to the total number of elements currently in the array, so you can be sure you’re always adding an item to the end of an
array by using the array’s length property as the index. For example, you can rewrite the last line of code like this:
properties[properties.length] = 'bold';

You can also use an array’s push() command, which adds whatever you supply between the parentheses to the end of the array. As with the length property, you apply push() by adding a period to the array’s name followed by push(). For example, here’s another way to add an item to the end of the properties array:
properties.push('bold');

Whatever you supply inside the parentheses (in this example, the string ‘bold’) is added as a new item at the end of the array. You can use any type of value, like a string, number, Boolean, or even a variable. One advantage of the push() command is that it lets you add more than one item to
the array. For example, say you want to add three values to the end of an array named properties, you could do that like this:
properties.push('bold', 'italic', 'underlined');

Adding an item to the beginning of an array If you want to add an item to the beginning of an array, use the unshift() command. Here’s an example of adding the bold value to the beginning of the properties array:
var properties = ['red', '14px', 'Arial'];
properties.unshift('bold');

After this code runs, the array properties contains four elements: [‘bold’, ‘red’, ‘14px’, ‘Arial’]. As with push(), you can use unshift() to insert multiple items at the beginning of an array:
properties.unshift('bold', 'italic', 'underlined');

Deleting Items from an Array

If you want to remove an item from the end or beginning of an array, use the pop() or shift() commands. Both commands remove one item from the array: The pop() command removes the item from the end of the array, while shift() removes one item from the beginning.

As with push() and unshift(), pop() and shift() return a value once they’ve completed
their tasks of removing an item from an array. In fact, they return the value that they
just removed. So, for example, this code removes a value and stores it in the variable
removedItem:
var p = [0,1,2,3];
var removedItem = p.pop();

The value of removedItem after this code runs is 3 and the array p now contains [0,1,2].