![Multidimensional Array in JavaScript [All Array Operations]](https://www.codeleaks.io/wp-content/uploads/2021/03/Multidimensional-Array-in-JavaScript-–-All-Array-Operations.jpg)
Multidimensional array in JavaScript is not supported by default. To use such a data structure that behaves as multidimensional arrays, we need to create various one-dimensional arrays and put them inside of another one-dimensional array.
Table of Contents
What is multidimensional array in JavaScript?
A JavaScript multi-dimensional array is an array of arrays. The container array for those one-dimensional arrays will be used and manipulated as multidimensional array.
There are two different ways to create it which we will be illustrating in this article later on, however, the most common approach is known as Array Literals.
Creating Multidimensional Arrays in JavaScript
Method#01: Passing the Defined 1D Arrays in the Container Array
Following are the two steps involved in this approach of creating multi-dimension arrays:
- Defining various 1D arrays, that will be manipulated as array items.
- Passing that defined original array to another 1D array, that will act as container for them.
//Step#01: Define some 1D Arrays
var arr1 = ["John", 23];
var arr2 = ["Charles", 28];
var arr3 = ["Taylor", 21];
var arr4 = ["Gennifer", 30];
var arr5 = ["Bob", 22];
//Step#02: "userData" defines like a 1D array but it actually contains some 1D arrays to behave like a multidimensional array
var userData = [arr1, arr2, arr3, arr4, arr5]; Here arr1, arr2, arr3, arr4, and arr5 are the different one-dimensional arrays which are then passed into the userData[] array. userData[] itself is a 1D-array, but since it has various arrays as its items, so it will behave like a multidimensional 2D array.
Method#02: Using Array Literal Notation
var userData = [
["John", 23],
["Charles", 28],
["Taylor", 21],
["Gennifer", 30],
["Bob", 22]
]; Here again, userData[] will act as the multidimensional array for the individual one-dimensional arrays.
Accessing Multidimensional Arrays in JavaScript
To access ab element from a multidimensional array, we need to adopt an index-based approach. We will pass two indices in square brackets, the first index will indicate the row, and the second will indicate the column.
Such that, userData[1][0] will fetch “Charles” from the array. This approach works for both of the multidimensional array creation methods.
Let’s now access all the elements of our two-dimensional array. For that purpose, we need to use nested loops so that we can iterate over the elements of the entire array. See the example below to understand the concept.
Code
var userData = [
["John", 23],
["Charles", 28],
["Taylor", 21],
["Gennifer", 30],
["Bob", 22]
];
//loop for outer array acting as container
for(var i = 0; i < userData.length; i++){
//loop for inner arrays acting as items
for(var j = 0; j < userData[i].length; j++){
//printing the individual items
console.log(userData[i][j]);
}
} Output
Adding New Elements to Multidimensional Array
Elements can be added two both the inner array and the outer array. There are two ways by which we can add elements in the inner array. One is to simply using the indices with square brackets to assign value, and the other one is to use the push() method.
Adding Elements to the Inner Array
The Square Bracket Notation for Adding New Elements in the Inner Array
userData[4][2] = 25; This will add 25 as a new element in the array which already contains “Bob” and 22.
Using push() Method to Add New Elements in the Inner Array
Following is the code for demonstrating the push() method way.
userData[4].push(25); Output
Adding Elements to the Outer Array
To add new elements in the outer or container array, you don’t need to pass an index necessarily. The push() method will automatically add the new entry to the end of the array object.
userData.push(["Justin", 29]); Output
As can be seen, [“justin”, 29] has been added at the end of userData[] array.
Removing Elements from Multidimensional Array
To remove elements both from the outer array, and the inner array we can use pop() method.
Using pop() Method on Inner Array
In case of inner array the pop() method will remove the last element of the specified array using index. Check the example below:
userData[3].pop(); In this case it will remove the last item from the array whose index is 3. So, after Gennifer there will be no element of age in our case.
Output
Using pop() Method on Outer Array
In case of outer array, the pop() method will remove the last entire array.
userData.pop(); Output
As observed the array item of [“Justin”, 29] has been completely removed.
Conclusion
In this article, we discussed the concept of multidimensional arrays in JavaScript. However, in general JavaScript does not support multidimensional arrays, but we saw how we can create them with the help of some 1D arrays.
Later on, we performed the array operations on the JavaScript multidimensional array that we created with coding examples and their outputs helped us in understanding the concept.
If you are learning programming from scratch or a beginner to JavaScript, this article may help you understand a few basic concepts about the array data structure and its dimensions.
