Multi-Dimensional Array in JavaScript

Updated March 17, 2023

Introduction to Multi-Dimensional Array in JavaScript

Natively, JavaScript does not provide multidimensional arrays or any syntax of them. However, we can create a multidimensional array in JavaScript by making an array of arrays i.e. the array will be consisting of other arrays as elements. The easiest way to define a Multi-Dimensional Array in JavaScript is to use the array literal notation. Below examples will create a 2-dimensional array person.

var Employee = [
[100, ‘Ram’, ‘Agra’],
[101, ‘Shyam’, ‘Aligarh’],
[102, ‘Amit’, ‘Gwalior’]
]

The below figure illustrates the employee array:

Accessing Elements of Multidimensional Arrays:

To access the elements of a 2D array we use two square brackets in the following manner:

Alert(Employee[1][2]); // Aligarh

Over here the first square bracket will give you an inner array as result at each row index of the outer array as shown below:

The second square bracket is used to access the particular element of the inner array on the given outer array row index. Hence Employee[1][0] will reference the first element in the second sub-array.

Console.log(Employee[1][0]); // 101

Properties of Multi-Dimensional Array in JavaScript

Below are the properties of Multi-Dimensional Array in JavaScript:

1. isArray( ): This Function will help determine that the given array is an array or not. The return type of this function is Boolean.

var d[][];
Array.isArray(d); // True

2. typeof: This operator is used to find the type of object passed.

var d[][];
typeof d; // Object

3. length: This Function will return the length of the array passed.

var d[3, 6, 7];
d.length; // 3

Top 8 Methods in Multi-Dimensional Array in JavaScript

Below are the methods used in Multi-Dimensional Array in JavaScript:

1. Pop( )

This method is used to remove the element at the last index of the array. This will eventually result in the array length decreased by 1.

Code:

var employee = [
[101, 'Shyam', 'Aligarh'],
[100, 'Ram', 'Agra'],
[102, 'Amit', 'Gwalior'],
[103, 'Rahul', 'Mumbai']
];
employee.pop();
console.log(employee);
employee[2].pop();
console.log(employee);

Output:

2. Push( )

This method is used to insert an element in the array at the last index of the array. This will eventually result in the array length increased by 1.

Code:

var employee = [
[101, 'Shyam', 'Aligarh'],
[100, 'Ram', 'Agra'],
[102, 'Amit', 'Gwalior']
];
employee.push([103, 'Rahul', 'Mumbai']);
console.log(employee);
employee[2].pop('TCS');
console.log(employee);

Output:

3. Sort( )

This method is used to sort the array elements alphabetically or in the numeric order given whichever type of array is passed. The Sort method will also change the order of the array permanently.

Code:

var employee = [
[101, 'Shyam', 'Aligarh'],
[100, 'Ram', 'Agra'],
[102, 'Amit', 'Gwalior']
];
employee.sort();
console.log(employee);

Output:

4. Reverse( )

This method is used to reverse the array elements. The output of this method is making the last index element to first and first index element to the last.

Code:

var employee = [
[101, 'Shyam', 'Aligarh'],
[100, 'Ram', 'Agra'],
[102, 'Amit', 'Gwalior']
];
employee.reverse();
console.log(employee);

Output:

5. IndexOf( )

This method is used to find the index of the first occurrence of the particular element in the array. If the element is not present then it will return -1.

Code:

var employee = [
[101, 'Shyam', 'Aligarh'],
[100, 'Ram', 'Agra'],
[102, 'Amit', 'Gwalior']
];
var id = 'Ram';
function index(id, arr) {
for (var i=0; i<arr.length; i++) {
for (var j=0; j<arr[i].length; j++) {
if (arr[i][j] == id) { return i; }
}
}
return -1;
}
console.log(index(id, employee));

Output:

6. Shift( )

This method is used to shift array to the left i.e. removing the first element of the array and moving the other elements to their left.

Code:

var employee = [
[101, 'Shyam', 'Aligarh'],
[100, 'Ram', 'Agra'],
[102, 'Amit', 'Gwalior']
];
console.log(employee.shift());
console.log(employee);

Output:

7. Unshift( )

This method is used to shift array to the right i.e. adding a new element on the 0 indexes and moving all the other elements to their right.

Code:

var employee = [
[101, 'Shyam', 'Aligarh'],
[100, 'Ram', 'Agra'],
[102, 'Amit', 'Gwalior']
];
employee.unshift([103, 'Rahul', 'Mumbai']);
console.log(employee);

Output:

8. Splice( )

This method is used to insert or remove any number of elements from the array.

Code:

var employee = [
[101, 'Shyam', 'Aligarh'],
[100, 'Ram', 'Agra'],
[102, 'Amit', 'Gwalior']
];
employee.splice(0,1);// remove 1 element from 0 index
console.log(employee);
employee.splice(0,2);// remove 2 element from 0 index
console.log(employee);
employee.splice(0,0,[103, 'Rahul', 'Mumbai']);// add 1 element at 0,0
console.log(employee);
employee.splice(0,1,[100, 'Ram', 'Agra']);// add 1 element at 0,1
console.log(employee);

Output:

Traversing the Elements of Multi-Dimensional Arrays

To iterate through all the elements of the multidimensional array we need to use nested for loop concept as below:

Code:

// outer loop is for the outer array
for (var i=0; i<arr.length; i++){
// inner loop is for the inner arrays
for (var j=0; j<arr[i].length; i++){
// access each element of the 2D array
Console.log(arr[i][j]);
}
}

Conclusion

Multidimensional arrays in JavaScript provides the facility to store different types of data into a single array with each element inner array capable of storing independent data from the rest of the array with its length, which cannot be achieved in Java, C, and other languages.