Tutorial: Nested arrays in JavaScript
Level: Advanced. Published on 10 June 2008 in JavaScript arrays
JavaScript allows you to nest arrays inside other arrays. This tutorial explains how to nest arrays in JavaScript, and how to work with nested arrays.
In previous tutorials we've taken a look at JavaScript array basics, manipulating arrays, and sorting arrays. So far, all the arrays we've dealt with have been "flat" arrays; each array element contains a single value, such as a number, string, or object.
However, like most programming languages, JavaScript lets you create arrays inside arrays, known as nested arrays. In a nested array, the elements of one array are themselves arrays. For example:
var pets = new Array ( );
pets[0] = new Array ( "Sheba", 13, "cat" );
pets[1] = new Array ( "Jasper", 12, "dog" );
alert ( pets[0][0] + " is a " + pets[0][1] + " year old " + pets[0][2] ); // Displays "Sheba is a 13 year old cat"
alert ( pets[1][0] + " is a " + pets[1][1] + " year old " + pets[1][2] ); // Displays "Jasper is a 12 year old dog"
Here we've created an array of 2 elements. Each element is in turn an array containing 3 elements. To access the elements of the inner arrays, you simply use two sets of square brackets. For example, pets[1][2] accesses the 3rd element of the array inside the 2nd element of the pets array.
You can nest arrays as deeply as you like. For example, here we've created a top-level array called animals, into which we've placed the above pets array, as well as a similar dinosaurs array — that's 3 levels of nesting in total:
var pets = new Array ( );
pets[0] = new Array ( "Sheba", 13, "cat" );
pets[1] = new Array ( "Jasper", 12, "dog" );
var dinosaurs = new Array ( );
dinosaurs[0] = new Array ( "Cyril", 45, "Tyrannosaur" );
dinosaurs[1] = new Array ( "Gertrude", 72, "Brontosaur" );
var animals = new Array ( pets, dinosaurs );
alert ( animals[0][1][0] + " is a " + animals[0][1][1] + " year old " + animals[0][1][2] ); // Displays "Jasper is a 12 year old dog"
If you're used to a language like C, you may be wondering if you can create multi-dimensional arrays in JavaScript. While JavaScript doesn't support true multi-dimensional arrays, you can use array nesting, as described above, to achieve the same effect.
Looping through nested arrays
Of course, once you start nesting arrays you quickly end up with lots of array elements. The easiest way to work with large arrays is to use loops. And in order to process nested arrays, you need to use nested loops.
For example, the following code loops through the animals nested array we created above, displaying each of the animals, along with their ages and types:
for ( i=0; i<animals.length; i++ )
{
for ( j=0; j<animals[i].length; j++ )
{
alert ( animals[i][j][0] + " is a " + animals[i][j][1] + " year old " + animals[i][j][2] );
}
}
You now know how to create and use nested arrays in JavaScript. You'll find nested arrays are useful when you want to store highly structured data — such as our animals example above — and when you're creating multidimensional data structures (commonly used in games and graphics applications). Enjoy!
The end
That's the end of this article. We hope you found it useful. If you're still stuck and would like further help, check out our online Help Forums, where you can get assistance from members of Elated and other webmasters.
Also, don't forget the free ELATED Extra Newsletter, where you can get more great Web-building articles and tips sent straight to your inbox!
If you would like to offer us feedback on this or any of our articles, please contact us. Have fun!