Home : Articles : Nested Arrays in JavaScript

Nested Arrays in JavaScript

Tutorial by Matt Doyle. 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!

Responses to this article

There are no repsonses yet.

Post a response

Want to add a comment, or ask a question about this article? Post a response.

To post responses you need to be a member. Not a member yet? Signing up is free, easy and only takes a minute or two. Sign up now.

Keep in touch

Subscribe to our feed or follow us on Twitter for news of our latest articles and other fun stuff.

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 need help with a Web-building issue, check out our online Webmaster Forums, where you can get assistance from members of Elated and other webmasters.