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).

Do you need help with JavaScript? Gain advice from Builder AU forums

Comments

1

yongjiang - 04/06/08

this website is very good!! thanks for posting this web up!! *thumbs up*

» Report offensive content

2

Zork - 07/09/08

this technique doesnt work in google.chrome in connection with "for in" statement. Chrome return random key position. Code posted below will return k2,k1,k3 instead of k1,k2,k3 like in FFox, Opera or MSIE7

Lets hope they will fix it in next beta or so...

var a = {k1:1,k2:2,k3:3};
for(var i in a)
alert(i);

» Report offensive content

3

dexter - 06/01/09

please display sample program on multidimensional arrays

» Report offensive content

4

BALU - 07/02/09

sorting two dimensional array and displaying the result

function abc()
{
var tstr1 = new Array();
var vari=50;
var htmlText ='';

for(var i=0; i<vari; i++)
{
tstr1.push(["a" + i, "second value" + i]);
}

tstr1.sort(function(a, b)
{ //sorting first value in alphabetical order and the associated value
return a[0] < b[0]
? -1
: a[0] == b[0]
? 0
: 1
;
}
);


for(var t=0; t<tstr1.length; t++)
{
//creating html to display value1 and value 2
htmlText = htmlText + "<li>" + tstr1[t][0] +"----------" + tstr1[t][1] +"</li>";
}
htmlText = "<ul>" + htmlText + "</ul>";
document.write(htmlText);

}

» Report offensive content

5

Sandy - 10/02/09

For the code mentioned below, we can use the other alternative also. Is there any harm in using this?

Old Code:
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';

New Code:
var array = new Array(3);
array = [ ['','','x'], ['','x',''], ['x','',''] ];

» Report offensive content

6

jagbir singh - 18/11/09

hi, iam jagbir singh. u r programe is very well. but i want to know few simple program of array in java script. please sent it in my mail.
i am waiting for your positive responce. thanks.....

» Report offensive content

Leave a comment

You must read and type the 6 chars within 0..9 and A..F

* indicates mandatory fields.

6

jagbir singh - 18/11/09

hi, iam jagbir singh. u r programe is very well. but i want to know few simple program of array in ... more

5

Sandy - 02/10/09

For the code mentioned below, we can use the other alternative also. Is there any harm in using this? Old Code: var ... more

4

BALU - 02/07/09

sorting two dimensional array and displaying the result function abc() { var tstr1 = new Array(); var vari=50; var htmlText =''; for(var i=0; i<vari; i++) { tstr1.push(["a" ... more

Log in


Sign up | Forgot your password?

  • Staff Microsoft shows off IE9 preview

    This week, highlights from Microsoft's MIX10 conference and more in the Roundup. Read more »

    -- posted by Staff

  • Chris Duckett IE9's H.264 vote killed Ogg

    In a split decision by the judges, the winner of the W3C/WHATWG video codec consensus is H.264, taking home the future of video playback on the internet while loser Ogg goes home with nothing but thoughts of what might have been. Read more »

    -- posted by Chris Duckett

  • Staff Google launches Apps Marketplace

    Google launches and app store, while Mozilla plans to re-write its open-source license. More of this week's news in the Roundup. Read more »

    -- posted by Staff

What's on?

  • Optus Deal

    Broadband + home phone + PlayStation®3 in a single package price!