In this section, we will learn what the multidimensional array is and how to use it in JavaScript.

Note: In this section, we’re assuming you’re already familiar with the arrays in JavaScript.

What Is Multidimensional Array in JavaScript? (Array of Arrays in JavaScript)

An array that has other arrays set as its elements is called a multidimensional array.

As mentioned before, inside arrays we can put elements of different types. It turns out that we can put arrays inside an array as well!

How to Create Multidimensional Array in JavaScript?

Creating a multidimensional array is pretty much the same as creating a single dimension array, except this time, the elements of the target array will be another array!

For example:

const multi = [

[1,2,3,4],

[1,2,3],

["Jack","John","Omid"]

]

Here, the identifier `multi` is an array that holds 3 elements.

• The first element is itself another array that has 4 elements and all are of the same type, which is `Number`.
• The second element is itself another array that has 3 elements of type `Number`.
• The last element or the third element is an array with 3 elements in its body and they are of type String.

Note: we still use the comma `,` to separate each array from the other.

Accessing Elements of a Multidimensional Array in JavaScript

We know that to access an element of an array; we need to put a pair of brackets `[]` on the right side of the target array’s name, right?

Example:

arr[0];

This statement will return the first element of the array `arr` no-matter what it is.

But let’s say the `arr` is a multidimensional array and so the result of this call is a value that itself is an array. So how can we access the elements of this result then?

Well, by putting another pair of brackets `[]` on the right side of the last pair of brackets `[]`.

Basically, we will have a statement like the one below:

arr[index_num][index_num];

Think about the statement above as two separate statements that are running in a single call!

Basically, the first statement here is:

arr[index_num];

We know that in a multidimensional array, this statement will return an element that itself is another array!

Now if we add another pair of brackets in front of the first one, we’re basically running another statement that this time works with the returned array of the first call.

So basically the statement:

const element = arr[index_num][index_num];

Is equal to the statement below:

const secondArray = arr[index_num];

const element = secondArray[index_num];

As you can see, the first statement `arr[index_num][index_num];` is shorter and faster way of reaching to the elements of the sub-array.

Note that even if the array is a 3-dimensional array (An array within an array within an array or AKA 3D array) or more, we only need to add more pairs of brackets to get to the final element of the final sub-array. This means each pair of brackets works with the result of the previous pair of brackets (which is an array) and tries to get an element of that resulted array.

Example: accessing elements of a multidimensional array in JavaScript

const array = [
  [1,2,3,4,5], 
  [6,7,8,9,10]
];
const el1 = array[1][3]
console.log(el1)

Output:

9

JavaScript 2D Array: Two Dimensional Array

A two-dimensional array is basically an array within the body of another array. Or basically an array that its elements are themselves arrays.

You’ve seen this in the previous examples, but we just didn’t officially introduce it.

Example: creating 2D Array in JavaScript

const array = [
  ["Ellen","Jack","John","Omid","Ian"], 
  [6,7,8,9,10]
];
const el1 = array[0][4]
console.log(el1)

Output:

Ian

Removing an Element from a Multidimensional Array

There are multiple methods in JavaScript array that could be used to remove elements from an array. For example, pop(), shift(), and slice() methods are used to remove elements from end, beginning, or part of an array, respectively.

Doesn’t matter if the target element is a multidimensional or a single dimension array; using these methods, we can easily remove an element from an array.

Example: removing an element from a multidimensional array

const array = [
  ["Ellen","Jack","John","Omid","Ian"], 
  [6,7,8,9,10]
];
const el1 = array[0].pop();
const el2 = array.pop();
console.log(el1)
console.log(el2)
console.log(array)

Output:

Ian
[6, 7, 8, 9, 10]

["Ellen","Jack","John","Omid","Ian"]

Note: please check the JavaScript Array pop() method section to learn more about this method.

Iterating a Multidimensional Array in JavaScript

We can use for-loop, for-of loop, or while-loop to iterate through the elements of an array or a multidimensional array.

Please check the related section to see how this is done in practice.