Nested Arrays in JavaScript

Farah Ismah Hana — Mon, 28 Sep 2026 01:17:57 +0000

Introduction

When working with arrays in JavaScript, we usually start with a simple list of values. This works well when all the values belong to the same group.

Sometimes, we may want to group those values while still keeping them in a single array.

For example:

const numbers = [
  [10, 20, 30],
  [40, 50, 60]
];

Here, the numbers are organized into two groups. Each group is an array, and both arrays are stored inside the numbers array.

This is called a nested array.

To make the idea easier to understand, let's look at a regular array first.

What Is a Nested Array?

A regular array stores values in a single list:

const fruits = ["Apple", "Banana", "Orange"];

console.log(fruits[0]);
console.log(fruits[1]);
console.log(fruits[2]);

The output is:

Apple
Banana
Orange

Each value has an index that represents its position. In JavaScript, the index starts from 0, so Apple is at index 0, Banana is at index 1, and Orange is at index 2.

Now, instead of putting all the values directly into one list, we can split them into smaller groups:

const fruits = [
  ["Apple", "Banana"],
  ["Orange", "Mango"]
];

console.log(fruits[0]);
console.log(fruits[1]);

The output is:

["Apple", "Banana"]
["Orange", "Mango"]

The fruits array now contains two other arrays. These inner arrays keep the values in separate groups.

Accessing Data in a Nested Array

Once the data is grouped, we need to know how to access the values inside it.

With a regular array, we only need one index:

const fruits = ["Apple", "Banana", "Orange"];

console.log(fruits[1]);

This gives us:

Banana

A nested array works in a similar way, but we may need more than one index.

Let's use the numbers array again:

const numbers = [
  [10, 20, 30],
  [40, 50, 60]
];

If we want the first group, we can use:

console.log(numbers[0]);

The output is:

[10, 20, 30]

Here, numbers[0] gives us the first inner array.

What if we only want 20?

Since 20 is inside the inner array, we need a second index to access it:

console.log(numbers[0][1]);

The output is:

Let's break it down:

numbers[0]    // [10, 20, 30]
numbers[0][1] // 20

The first [0] gets the first inner array. Then [1] gets the second value from that array.

So, when working with a two-level nested array, we can access a value like this:

array[firstIndex][secondIndex];

The first index points to the inner array, and the second index points to the value inside it.

Another Example

The same idea can be applied to other types of data.

For example, let's group some student names:

const students = [
  ["Hana", "Dini"],
  ["Khalisha", "Khayra"]
];

console.log(students[0][0]);
console.log(students[1][1]);

The output is:

Hana
Khayra

For students[0][0], the first [0] gets the first inner array, and the second [0] gets the first name from that array.

The same idea applies to students[1][1]: the first [1] gets the second inner array, and the second [1] gets the second name.

Reading the indexes from left to right makes it easier to see which group and which value we are accessing.

Conclusion

Nested arrays are useful when we need to organize related values into different groups.

The syntax may look a little unfamiliar at first, especially when there is more than one index. But once we know that each index moves us to the next level, it becomes easier to read and work with.

Once we understand how to access values in a nested array, we can start working with those values in different ways.

DEV Community: Farah Ismah Hana

Nested Arrays in JavaScript

Introduction

What Is a Nested Array?

Accessing Data in a Nested Array

Another Example

Conclusion