JavaScript

What are JavaScript Multidimensional Arrays

An array is a variable type present in most programming languages which contains multiple values of homogeneous data. The simplest arrays store data in a linear form and are known as one-dimensional arrays.

In JavaScript multidimensional arrays are simply arrays within arrays; the most simplest of which are two dimensional arrays known as matrices; We can create arrays with any number of dimensions.

Some programming languages like C# do support true multidimensional arrays while others like JavaScript just have nested arrays. The multidimensional arrays in JavaScript are known as jagged arrays; in jagged arrays each array in the parent array can have a different number of elements.

Note: The browser console is used for the demonstration of examples in this article.

What is a 1D array in JavaScript

One dimensional arrays are used to store a single series of data like the name of all the animals present at the zoo or the roll numbers of students in a class. But when it comes to storing more complex data like the pixel matrix of an image in a single variable then we need multidimensional arrays.

var num = [1,2,3]

How to declare a 2D array in JavaScript

In JavaScript, declaring a 2D array is very simple. Just put two arrays (separated by commas) in a parent array and you will have a 2 dimensional array:

var nums = [[1,2,3],[4,5,6]];

For better readability we can write it in this way as well:

var nums = [
           [1,2,3],
           [4,5,6]
          ];

Now it looks very similar to a matrix.

How to declare an Nth-Dimensional array in JavaScript

In JavaScript you can have multidimensional arrays up to the Nth dimension meaning you can add as many dimensions to your arrays as you require. Following is an example of a three dimensional array in JavaScript:

// Declaration of a 3-Dimensional array
threeDimensionalArray = [
    // two 2-Dimensional arrays within a 3-D array
    [
        // two 1-Dimensional arrays inside a 2-D array
        [],
        []
    ],
    [
        // two 1-Dimensional arrays inside a 2-D array
        [],
        []
    ]
];

How to access, assign and modify values of elements of multidimensional arrays in JavaScript

To access an element present within a 2D array we need to provide two indices instead of just one e.g. to access the first element of the first row of the 2D array/matrix we will use the following syntax:

num[0][0];

Similarly for the first element of the second row we will use:

num[1][0];

Similarly, for higher dimension arrays we will use as many indices as the dimensions of the array. If we need to access each element of the array in a sequence then using nested loops is the best option:

var num = [[1,2,3],[4,5,6]];

for (let i = 0; i < num.length; i++) {
   
    for (let x = 0; x < num[i].length; x++) {

        console.log(num[i][x]);

    }
}

In the above example the first loop, loops through the rows of the matrix while the second loop, loops through the columns. The second/nested loop iterates through the columns until there are no columns left then it terminates. The first loop then goes to the next row and the nested loop again starts from the 0th column of the next line.

We can assign values to a multidimensional array when we are declaring it (as shown above in the 2-D array declaration section). We can also modify these values later in the following way:

var num = [[1,2,3],[4,5,6]];

num[0][0] = 99;

console.log(num[0][0]);

Methods for Multidimensional arrays in JavaScript

We can use all the methods of one-dimensional arrays like push(), pop(), shift(), unshift on multidimensional arrays as well. These methods can be used to add elements in the child arrays as well as add more arrays to the parent array. E.g if we want to add another row to our two dimensional array then we will use the push() method in the following way:

var num = [[1,2,3],[4,5,6]];

num.push([7,8,9]);

console.log(num);

Conclusion

One dimensional arrays are best when it comes to similar kind of data that needs to be stored in a linear form; but when it comes to complex data we do need multidimensional arrays e.g if we need to represent a chess board which has eight rows and eight columns we can use multidimensional arrays.

In this post we learned all about multidimensional arrays in JavaScript, how to declare them, assign them values as well as accessing and modifying the values of the elements present within multidimensional arrays. Moreover we also learned that all the methods related to one dimensional arrays are also applicable on multidimensional arrays.

About the author

Shehroz Azam

A Javascript Developer & Linux enthusiast with 4 years of industrial experience and proven know-how to combine creative and usability viewpoints resulting in world-class web applications. I have experience working with Vue, React & Node.js & currently working on article writing and video creation.