Nested Arrays in JavaScript, Explained

The Array in JavaScript, as with arrays in other scripting and programming languages, is an object that lets you store multiple items in an ordered list, with each item having its own index.

Arrays

Suppose you’re making a grocery list with apples, bananas, and oranges. Instead of storing each item in its own variable, you can store them in an array:

// Declare groceryList array with apples, bananas, and oranges
let groceryList = ["apples", "bananas", "oranges"];

Since the array is an ordered list of items, each of the items in your groceryList array are assigned indices within it, starting at 0 and progressing in the order in which they were stored.

Respectively, “apples” would be assigned an index of 0, “bananas” an index of 1, and “oranges” an index of 2. Here’s how this looks like in terms of code:

// Declare groceryList array with apples, bananas, and oranges
let groceryList = ["apples", "bananas", "oranges"];

// Outputs "apples"
console.log(groceryList[0]);

// Outputs "bananas"
console.log(groceryList[1]);

// Outputs "oranges"
console.log(groceryList[2]);

You can try the above code out for yourself by inspecting this page right now and copy/pasting it into your browser’s console.

Nested Arrays

With JavaScript, you can also nest an Array inside an Array.

Suppose you wanted to sort the items in your groceryList array in three categories: fruits and vegetables.

This time, to make things understandable, we will populate our groceryList array with items in two steps.

First, we’ll declare an empty JavaScript array. Then, we’ll nest two arrays under it—one for fruits, the other for vegetables—and store the category in the zeroth index of each.

Take a peek at the code snippet below to see what exactly this looks like:

// Declare empty groceryList array
let groceryList = [];

// Push fruits and categories to the array
groceryList[0] = Array("fruits", "apples", "bananas", "oranges");
groceryList[1] = Array("vegetables");

With this, we just nested two arrays, fruits and vegetables, under our groceryList array.

Another, more visual way to think about it is as a structured list with items and subitems:

• groceryList
  • [0] fruits
    • [0] apples
    • [1] bananas
    • [2] oranges
  • [1] vegetables

We can access the items in the child array in a similar way as we’d do for the parent array:

// Declare empty groceryList array
let groceryList = [];

// Push fruits and categories to the array
groceryList[0] = Array("fruits", "apples", "bananas", "oranges");
groceryList[1] = Array("vegetables");

// Outputs ['fruits', 'apples', 'bananas', 'oranges']
console.log(groceryList[0]);

// Outputs apples
console.log(groceryList[0][1]);

// Outputs ['vegetables']
console.log(groceryList[1]);

Nested Arrays Within Nested Arrays

Another thing we can do is nest arrays under nested arrays.

Suppose we wanted to split the list of vegetables into fresh and frozen, then add tomatoes and cucumbers to fresh, and baby carrots and broccoli to frozen.

To achieve this, notice how we’re nesting an array under a nested array in line 6, again using the zeroth index for the category names (fresh and frozen):

// Declare empty groceryList array
let groceryList = [];

// Push fruits and categories to the array
groceryList[0] = Array("fruits", "apples", "bananas", "oranges");
groceryList[1] = Array("vegetables",["fresh","tomatoes","cucumbers"],["frozen","baby carrots","broccoli"]);

Once again, the structure of our list evolved. We now have items, subitems, and subs of the subitems:

• groceryList
  • [0] fruits
    • [0] apples
    • [1] bananas
    • [2] oranges
  • [1] vegetables
    • [0] fresh
      • [0] tomatoes
      • [1] cucumbers
    • [1] frozen
      • [0] baby carrots
      • [1] broccoli

And, once again, we can access these by nesting the indexes in our statements:

// Declare empty groceryList array
let groceryList = [];

// Push fruits and categories to the array
groceryList[0] = Array("fruits", "apples", "bananas", "oranges");
groceryList[1] = Array("vegetables",["fresh","tomatoes","cucumbers"],["frozen","baby carrots","broccoli"]);

// Outputs ['fresh', 'tomatoes', 'cucumbers']
console.log(groceryList[1][1]);

// Outputs cucumbers
console.log(groceryList[1][1][2]);

You can then use all of JavaScript’s Array methods to perform actions on your nested arrays.

In Conclusion

Thank you for reading this far and I hoped this explanation, which I tried to make as simple and as beginner-friendly as possible, helped.

Newcomers to JavaScript are often intimidated by the concept of nested arrays because it sounds complicated. But, once you get the hang of it, it’s as simple as creating bulleted lists in Google Docs or working with tables in Google Sheets.