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?

 

When JavaScript was first introduced to the world it didn't have a dedicated Array data structure. Here we look at the Array object which is easy to use, but it can cause some confusion if you forget that every data structure in JavaScript is also an object, or more importantly an associative array.

 This is part of a series on implementing data structures in JavaScript. The earlier articles are:

See also:

 

 

JavaScript is a strange language if you are more familiar with Java, C++ or C#, say. For example, in JavaScript every object is an associative array. In fact it would be fairer to say that the associative array is the fundamental data structure in JavaScript and this is so powerful it can be used to implement object or just about any other data structure you care to think up.

However, if you do approach JavaScript from the perspective of another language then you will expect to find something that behaves like a traditional array. When JavaScript was first introduced to the world it didn't have a dedicated Array data structure - it didn't need one and in many ways it still doesn't. The associative array is quite sufficient but to make JavaScript easier to use it does have an Array object. This is easy to use but it can cause some confusion if you forget that every data structure in JavaScript is also an object, or more importantly an associative array.

The Array Object

JavaScript provides a special built-in object that behaves much more like a standard indexed array - the Array object - than the more basic associative array.

This inherits from Object so, just like every other object in Javascript, it is also an associative array. However, it is extended to handle arrays with integer indices in a way that corresponds much more to the way indexed arrays work.

That is, an Array object looks like a standard linear array of the sort that you find in almost any language - but there are some things that make it behave in ways that you might not expect.

As in the case of most languages, the Array object is indexed by an integer. However, unlike most languages you don't have to specify the size of the Array before you start using it.

For example in JavaScript you can simply create an Array object and start storing values in elements:

var myArray=new Array();
myArray[0]="A";
myArray[1]="B";
myArray[2]="C";

and so on. In this case you can select any element of the array by index e.g. myArray[1] is "B".

You can also create an array object using an Array literal to initialize it. For example:

myArray=["A","B","C"];

creates exactly the same array as the previous example.

Notice that:

myArray=[];

is a common idiom used to create an uninitialized array.

As a third way of creating and initializing an Array object, you an also include the initial values in the constructor function:

var myArray=new Array("A","B","C");

All three methods tend to be used in practice. Which is preferable depends on circumstance, but there are advantages to the array literal notation.

The length of an Array

One of the extras that the JavaScript Array object has is a length property. This keeps track of the size of the array so that you can make use of this information in for loops and the like.

The length property looks a lot like declaring the size of the array, but it isn't quite the same as, say, the dimension specifier in a static language.

The first big difference is that length is updated as you use the array. That is, length is always one more than the largest index you have used.

For example, after:

myArray=[];
myArray[20]="A";

length is set to 21 corresponding to the 21 elements from myArray[0] to myArray[20] . Notice that only element 20 has been initialized and all of the elements from myArray[0] to myArray[19] return undefined if accessed.

You can create an array and set its length using the constructor to specify the final element of the array. For example:

var myArray=new Array(10);

sets the length of the array to 11 i.e. elements 0 to 10. All of the elements are set to undefined.

Notice that this means you can't use the constructor method to create an array with a single element. You also can't write things like:

var myArray=new Array(1.5);

as this doesn't specify the length of an array.

You can also set the length of an array after it has been created by assigning directly to the length property. For example:

myArray=[];
myArray.length=20;

sets the length of the array to 20 with all of the elements still uninitialized.

If you set the size of an array to be larger than it currently is then no much actually happens. However, if you set the size of an array to be smaller than it currently is, then you lose elements. For example:

var myArray=new Array("A","B","C");
myArray.length=1;

alert(myArray[1]);

displays undefined because after setting the array's length to 1 only myArray[0] is left.

Working with Array

Notice that you can refer to array elements that don't currently exist. That is, unlike in other languages, you don't have to "declare" the length of an array before you use it.

If you attempt to access an element that hasn't been initialized then undefined is returned. For example:

myArray=[];
alert(myArray[50]);

displays "undefined".

If you assign to an element that doesn't currently exist then that element is created. For example:

myArray[50]=10;
alert(myArray[50]);

displays 10, but if you try to display myArray[40] you will discover that its value is still undefined.

Put simply:

  • When you create an array object you don't have to specify its length - elements are created as you store values in them.
  • Any elements you access that you haven't stored a value in return undefined.
  • The array keeps a record of "how long it is" in its length property.
  • The length of an array is simply one more than the highest indexed element you have used.
  • You can set the length property by direct assignment or via the Array constructor.

 



Last Updated ( Tuesday, 15 January 2013 )
 
 

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