JavaScript Data Structures - the Array object
JavaScript Data Structures - the Array object
Written by Mike James   
Monday, 23 April 2012
Article Index
JavaScript Data Structures - the Array object
Access and manipulation methods
Multidemensional arrays?



Iterating Array

One of the reasons that we often use an Array is that we need to process each one of the elements in turn.

There is a natural pairing between the Array and the standard for loop. For example:


You could say that the array was invented to give the for loop something to do.

Notice that in JavaScript there is the possibility that you will encounter Array elements that haven't been initialized, i.e. they will be undefined.

It is also better to avoid using the for in loop with an Array because this iterates over all of the properties of the Array object, and not just the elements of the Array. It is even more complicated than this because properties that are set to DontEnum are left out of the iteration. In short, if you use for in you can't be 100% sure that you are going to get just the elements of the array.

There is also another big difference that can occasionally be useful is that for in only iterates over the array elements that are defined. For example:

var myArray=new Array("A","B","C");
for (x in myArray) {

In this case a for loop would display six elements with myArray[4] displaying as undefined. The for in loop, however, skips the undefined element. This might seem like a neat way of doing things but it probably isn't worth the risk of it not working due to other properties being included in the loop. There is also the small problem of the index variable, x in this case, being a string rather than an integer.

In general, if you need to iterate through an Array, use a standard numeric for loop. It is both safe and fast and it fits into the "ethos" of using an Array so much better.

The Access Methods

As Array is an object, is has some methods that have been added to make it more useful. These make the JavaScript array easier to use in some applications than arrays in other languages.

For example the pop and push methods can be used to remove an item from the end of the array or add an item:


adds A to the end of the array and increases length by 1.


removes the last element from the array and stores it in x; it also decreases length by 1. You can see that pop and push can be used to implement a stack - see Javascript data structures - Stacks.

Similar to the pop and push methods, the Shift and Unshift methods remove and add items to the start of the array. These two operations are ideal for implementing a queue or deque.

The Array Manipulation Methods

You can work with the Array in JavaScript in ways that are very similar to a string of characters. To understand how these methods work, think of an Array as a string of element rather than characters.

The concat method returns a new array that is the concatenation of two other arrays:

var C=A.concat(B);

stores a new array in C that is the result of putting the Arrays A and B together (with B's elements following A's). You can concat more than two Arrays using A.concat(B,C) etc.

The slice method extracts a sub array from an existing array:

var B= A.slice(1,3);

creates a new array in B that starts at element A[1] and ends at element A[2]. That is slice(s,e) returns the array from element s to element e but not including element e.

Similarly  the splice method can be used to remove or insert elements:

var B=A.splice(3,5);

will create a new array in B with five elements missing started at element 3, You can also specify new values to insert:

var B=A.splice(3,2,"a","b","c");

deletes two elements starting at element 3 and then inserts three elements starting at element 3.

Given these methods handle an array as if it was a type of string, there is also the join method which converts an Array into a string with an optional separator. There is also the very useful string function, split , which will split a string into an Array based on a specified separator character.

Array Ordering Methods

As one of the prime properties of an array is that it stores its elements in a fixed order, there should be methods that change this order.

The reverse method will reverse an array in place, i.e. it actually modifies the array:


reverses the order of the elements in A.

Similarly sort will put the elements into order:


sorts the elements of A into numerical order.

If the elements of A are not numeric values, then you have to supply an order function that compares its two parameters a and b  and returns -1 if a<b, 1 if a>b and 0 if a=b.

For example to sort strings on string length alone you might use:

 if (a.length<b.length)return -1;

 if (a.length>b.length)return 1;
if (a.length=b.length)return 0;



Last Updated ( Tuesday, 15 January 2013 )

RSS feed of all content
I Programmer - full contents
Copyright © 2016 All Rights Reserved.
Joomla! is Free Software released under the GNU/GPL License.