Web Development

Multidimensional arrays in Javascript

Javascript has no inbuilt support for multidimensional arrays, however the language is flexible enough that you can emulate this behaviour easily by populating your arrays with separate arrays, creating a multi-level structure.

Javascript has no inbuilt support for multidimensional arrays, however the language is flexible enough that you can emulate this behaviour easily by populating your arrays with separate arrays, creating a multi-level structure.

You can create an array in Javascript simply by doing any of the following:

var array1 = new Array(5);
var array2 = [1,2,3,4,5];
var array3 = new Array();
var array4 = [];

If you know the size of your array in advance, but not the contents, the first form is better since it allocates the right amount of memory, but doesn't fill it. If you need to populate the array from the beginning, you can just specify the contents when you declare it. The second array has the same contents as if we wrote:

var array2 = new Array(5);
array2[0] = 1; //remember that arrays count from zero
array2[1] = 2;
array2[2] = 3;
array2[3] = 4;
array2[4] = 5;

Lastly, if you want to identify a variable as an array, but don't know how big it is, you can use either of the last two forms.

Retrieving elements from an array has the same syntax as entering them. In the following code, we display two alerts, once before and once after we change the array -- we should see the number 5, followed by the number 10:

var array = [5];
alert(array[0]);
array[0] = 10;
alert(array[0]);

That's more or less all you need to know about single dimensional arrays. When you need extra dimensions, things get slightly more complicated.

Multidimensional Arrays

If you've got a two dimensional array, for example you need to keep track of the contents of a table, then what you really want to do is index them like array[2,3]. There's no support for arrays of this kind, but we can take advantage of the fact that arrays can contain any value -- including other arrays -- to fake it.

In the following example we create a 3x3 array:

var array = new Array(3);
for (var i = 0; i < 3; i++) {
	array[i] = [' ', ' ', ' '];
}

array[0][2] = 'x';
array[1][1] = 'x';
array[2][0] = 'x';

We set three cells to be equal to "x", meaning that our array now contains:

x
x
x

You can create arrays of any depth by adding more array references for each successive dimension you need. For example, to modify the above example to create a 3x3x3 cube, we'd simply write:

var array = new Array(3);
for (var i = 0; i < 3; i++) {
	array[i] = new Array(3);
	for (var j = 0; j < 3; j++) {
		array[i][j] = [' ', ' ', ' '];
	}
}

Multidimensional arrays are useful tools in circumstances where you have to populate the entire space with information. If your data is more sparse -- meaning most of the cells are empty -- then you're better off using associative arrays (hashes or dictionaries in other languages).

0 comments

Editor's Picks