JavaScript does not provide the multidimensional array natively. However, we can make a multidimensional array in JavaScript by defining an array of elements where each element is also another array. So, a multidimensional array in JavaScript is an array of arrays. To define a multidimensional array is exactly the same as defining a normal one-dimensional array. The easiest way to define a multidimensional array is to use the array literal notation for example;

let employees = [['Devine', 46], ['Amos', 26], ['Teddy', 28]];

Accessing Elements of Multidimensional Arrays

You can access the elements of a multidimensional array using indices.

console.log(employees[2][0]);  
// Teddy

Adding elements to a multidimensional array

You can use the Array.push() method or index notation to add elements to a multidimensional array. Adding elements in multidimensional arrays can be done in two ways, inner array or outer array.

Adding elements to the outer array

let employees = [['Devine', 46], ['Amos', 26], ['Teddy', 28]];
employees.push(['Hasnah', 31]);

console.log(employees);
// [["Devine", 46], ["Amos", 26], ["Teddy", 28], ["Hasnah", 31]]

Adding elements to the inner array

let employees = [['Devine', 46], ['Amos', 26], ['Teddy', 28]];
employees[2][2] = 'Administrator';

console.log(employees);
// [["Devine", 46], ["Amos", 26], ["Teddy", 26, "Administrator"]]

You can also use the Array.splice() method to add an element at a specified index.

let employees = [['Devine', 46], ['Teddy', 28]];

// adding an element
employees.splice(1, 0, ['Amos', 26]);

console.log(employees);
// [["Devine", 46], ["Amos", 26], ["Teddy", 28]]

Removing elements from a multidimensional array

We can use the pop() method to remove elements from a multi-dimensional array.

Removing elements from outer array

let employees = [['Devine', 46], ['Teddy', 28]];
employees.pop();

console.log(employees);
// ["Devine", 46]

Removing elements from inner array

let employees = [['Devine', 46], ['Teddy', 28]];
employees[1].pop();

console.log(employees);
// [["Devine", 46], ["Teddy"]]

You can also use the splice() method to remove an element at a specified index.

let employees = [['Devine', 46], ['Teddy', 28]];
employees.splice(1, 1);

console.log(employees);
// ["Devine", 46]

Iterating over a multidimensional array

You can iterate over a multidimensional array using the forEach() method. The first forEach() method iterates over the outer array elements and the second iterates over the inner array elements.

let employees = [['Devine', 46], ['Teddy', 28]];

employees.forEach((employee) => {
    employee.forEach((data) => {
        console.log(data);
    });
});

Output is:

Devine
46
Teddy
28

You can also use the for loop to iterate over a multidimensional array.

let employees = [['Devine', 46], ['Teddy', 28]];

// This loop is for the outer array
for (let i = 0; i < employees.length; i++) {

      // This loop is for the inner array
      for (let j = 0; j < employees[i].length; j++) {

            // Accessing each element
            console.log(employees[i][j]);
      }
}

Output is:

Devine
46
Teddy
28

Point to remember

• Array methods like push(), sort(), reverse(), indexOf(), shift(), unshift() and so on can also be used on multidimensioinal arrays.

Conclusion

In this article, you have learned how to create an array of arrays to create a JavaScript multidimensional array. Multidimensional arrays help us to store different types of data into a single array.

Thanks for reading!!