Summary: in this tutorial, you will learn how to work with a JavaScript multidimensional array and manipulate its elements effectively.

Introduction to JavaScript multidimensional array

JavaScript does not provide the multidimensional array natively. However, you can create a multidimensional array by defining an array of elements, where each element is also another array.

For this reason, we can say that a JavaScript multidimensional array is an array of arrays. The easiest way to define a multidimensional array is to use the array literal notation.

To declare an empty multidimensional array, you use the same syntax as declaring a one-dimensional array:

Code language: JavaScript (javascript)

The following example defines a two-dimensional array named activities:

Code language: JavaScript (javascript)

In the activities array, the first dimension represents the activity and the second one shows the number of hours spent per day for each.

To show the activities array in the console, you use the console.table() method as follows:

Code language: JavaScript (javascript)

The following illustrates the output:

Code language: plaintext (plaintext)

Note that the (index) column is for the illustration that indicates the indices of the inner array.

To access an element of the multidimensional array, you first use square brackets to access an element of the outer array that returns an inner array; and then use another square bracket to access the element of the inner array.

The following example returns the second element of the first inner array in the activities array above:

Code language: JavaScript (javascript)

Adding elements to the JavaScript multidimensional array

You can use the Array methods such as push() and splice() to manipulate elements of a multidimensional array.

For example, to add a new element at the end of the multidimensional array, you use the push() method as follows:

Code language: CSS (css)

Code language: plaintext (plaintext)

To insert an element in the middle of the array, you use the splice() method. The following inserts an element in the second position of the activities array:

Code language: CSS (css)

Here is the output:

Code language: plaintext (plaintext)

This example calculates the percentage of the hours spent on each activity and appends the percentage to the inner array.

Code language: JavaScript (javascript)

The following shows the output in the console:

Code language: plaintext (plaintext)

Removing elements from the JavaScript multidimensional array

To remove an element from an array, you use the pop() or splice() method.

For example, the following statement removes the last element of the activities array.

Code language: CSS (css)

Output:

Code language: plaintext (plaintext)

Similarly, you can remove the elements from the inner array of the multidimensional array by using the pop() method. The following example removes the percentage element from the inner arrays of the activities array.

Code language: JavaScript (javascript)

Output:

Code language: plaintext (plaintext)

Iterating over elements of the JavaScript multidimensional array

To iterate a multidimensional array, you use a nested for loop as in the following example.

Code language: JavaScript (javascript)

The first loop iterates over the elements of the outer array and the nested loop iterates over elements of the inner array.

The following shows the output of the script in the console:

Or you can use the forEach() method twice:

Code language: JavaScript (javascript)

Output:

Code language: plaintext (plaintext)

In this tutorial, you have learned how to use an array of arrays to create a JavaScript multidimensional array.