1. Technology

Learn Modern Unobtrusive JavaScript

Arrays

By

There are two ways in JavaScript to group items together. Where there is no particular ordering required or implied by the various items then the most obvious way or associating them together is to make them all properties of the same object. That object can then be passed around the code making all of the properties available at the same time without needing to pass each separately.

Where the items do have a specific order that they need to be processed in then JavaScript provides an alternative object that we can use as the basis for our group of items. This type of object is the Array which adds a large number of additional methods that make processing the items in the required order much easier.

As with objects, there are several different ways that we can create an array.


var ary = new Array();
var ary2 = new Array(3);
var ary3 = new Array('1','2','3','4');
var ary4 = ['1','2','3','4'];

The first of these simply creates a new array called ary which contains no items. The items would need to be added after the array has been created. The second example creates an array that already contains three items each of which currently has a value of null since no values have actually been assigned yet. The last two examples create identical arrays each with four items and each of which assigns the values '1', '2', '3', and '4' to those four items. The [] notation is a shortcut way of referencing a new Array the same way that {} is a shortcut for a new Object.

We can both assign values to and reference values in an array by using the [] notation with a number representing the item within the array that we want to reference. JavaScript arrays are numbered from zero and so ary4[2] currently contains a value of '3'. You can assign a value to any element in an array, even one way beyond those items that currently exist. Where you do assign a value to an element outside of the existing array, the array will be expanded to include that element and intervening elements will be null.

There is a page in the reference section that already lists all the Array methods and properties and of course all of those listed in the prior tutorial on Objects also apply. There are also proposals for additional methods to be added that will make array processing even more useful and some browsers have already implemented some of those methods. Should you decide to use those methods then you will either need to define them yourself for those browsers that do not yet support the methods or use a JavaScript framework which provides the definitions of the methods for you. Those methods listed in my method reference are available on all but the most antiquated of browsers and can therefore be safely used without needing to code them for yourself.

Because arrays have an order to the entries we can also set up a loop to process through all of the entries in the array one after the other in the specified order. We'll get to how to do that in a subsequent tutorial.

Some programming language have the concept of multi-dimensional arrays where you can assign an array to have two or more ordered values associated with each item instead of only one. Such languages would allow items to be referenced using a[x,y] or even a[x,y,z]. JavaScript only allows one dimensional arrays. That isn't really any real disadvantage though because JavaScript allows the items in an array to be anything at all and so we can place an array into each item in our array so as to effectively achieve the same result as a multi-dimensional array.


var a = [['1,1','1,2'],['2,1','2,2']];

This example defines an array of two elements each of which is an array of two elements (see how convenient the shortcut notation is). We can reference the item containing '2,1' for example using a[1][0] (which isn't greatly different from the a[1,0] notation that languages that do support two dimensional arrays would use.

One other restriction that many other languages have which doesn't exist in JavaScript is the requirement that all of the items in an array be the same type. This requirement doesn't exist in JavaScript and so the following is a perfectly valid array.


var b = [3,'t',myobj,['x',3]];

It is however far more common when the various items are of different types to define them as properties of an object rather than as an array since such mixes of different types seldom have any order associated with them and using an array implies that the order has some meaning.

Associative Arrays

Some languages support the concept of associative arrays where the items in the array are named rather than numbered. Javascript does support this concept in that you can reference entries such as myobj['myprop'] however such associative array references are treated as object references in JavaScript and so myobj['myprop'] is equivalent to myobj.myprop and none of the additional methods or properties that arrays have and objects do not can be used with an associative array.

More of This Tutorial

  1. About.com
  2. Technology
  3. JavaScript
  4. Javascript Tutorials
  5. Learn Modern JavaScript
  6. Unobtrusive JavaScript - Arrays

©2014 About.com. All rights reserved.