In this tutorial, you will learn about javascript multidimensional array with the help of examples. An array that contains another array is referred to as a multidimensional array. As an example:

// multidimensional array
const data = [[1, 2, 3], [1, 3, 4], [4, 5, 6]];

Create a Multidimensional Array

In JavaScript, here’s how to make multidimensional arrays.

Example 1:

let studentsData = [['Jack', 24], ['Sara', 23], ['Peter', 24]];

Example 2:

let student1 = ['Jack', 24];
let student2 = ['Sara', 23];
let student3 = ['Peter', 24];

// multidimensional array
let studentsData = [student1, student2, student3];

In this case, both examples 1 and 2 generate a multidimensional array with the same data.

Access Elements of an Array

You can access the elements of a multidimensional array using indices (0, 1, 2 …). For example:

let x = [
['Jack', 24],
['Sara', 23], 
['Peter', 24]
];

// access the first item 
console.log(x[0]); // ["Jack", 24]

// access the first item of the first inner array
console.log(x[0][0]); // Jack

// access the second item of the third inner array
console.log(x[2][1]); // 24

Consider a multidimensional array (in this case, x) to be a table with three rows and two columns.

Add an Element to a Multidimensional Array

To add elements to a multidimensional array, use the Array’s push() method or an indexing notation.

Adding Element to the Outer Array

let studentsData = [['Jack', 24], ['Sara', 23],];
studentsData.push(['Peter', 24]);

console.log(studentsData); //[["Jack", 24], ["Sara", 23], ["Peter", 24]

Adding Element to the Inner Array

// using index notation
let studentsData = [['Jack', 24], ['Sara', 23],];
studentsData[1][2] = 'hello';

console.log(studentsData); // [["Jack", 24], ["Sara", 23, "hello"]]

// using push()
let studentsData = [['Jack', 24], ['Sara', 23],];
studentsData[1].push('hello');

console.log(studentsData); // [["Jack", 24], ["Sara", 23, "hello"]]

To add an element at a specific index, utilise the Array’s splice() method. As an example:

let studentsData = [['Jack', 24], ['Sara', 23],];

// adding element at 1 index
studentsData.splice(1, 0, ['Peter', 24]);

console.log(studentsData); // [["Jack", 24], ["Peter", 24], ["Sara", 23]]

Remove an Element from a Multidimensional Array

To remove an element from a multidimensional array, use the Array’s pop() method. As an example:

Remove Element from Outer Array

// remove the array element from outer array
let studentsData = [['Jack', 24], ['Sara', 23],];
studentsData.pop();

console.log(studentsData); // [["Jack", 24]]

Remove Element from Inner Array

// remove the element from the inner array
let studentsData = [['Jack', 24], ['Sara', 23]];
studentsData[1].pop();

console.log(studentsData); // [["Jack", 24], ["Sara"]]

To remove an element at a certain index, use the splice() technique. As an example:

let studentsData = [['Jack', 24], ['Sara', 23],];

// removing 1 index array item
studentsData.splice(1,1);
console.log(studentsData); // [["Jack", 24]]

Iterating over Multidimensional Array

It is possible to iterate over a multidimensional array using the Array’s forEach() method. As an example:

let studentsData = [['Jack', 24], ['Sara', 23],];

// iterating over the studentsData
studentsData.forEach((student) => {
    student.forEach((data) => {
        console.log(data);
    });
});

Output:

Jack
24
Sara
23

The first forEach() method iterates over the outer array items, whereas the second forEach() method iterates through the inner array components.

You may also iterate through the multidimensional array using the for…of loop. As an example:

let studentsData = [['Jack', 24], ['Sara', 23],];

for (let i of studentsData) {
  for (let j of i) {
    console.log(j);
  }
}

The for loop can also be used to iterate through a multidimensional array. As an example:

let studentsData = [['Jack', 24], ['Sara', 23],];

// looping outer array elements
for(let i = 0; i < studentsData.length; i++){

    // get the length of the inner array elements
    let innerArrayLength = studentsData[i].length;
    
    // looping inner array elements
    for(let j = 0; j < innerArrayLength; j++) {
        console.log(studentsData[i][j]);
    }
}

You may like:

while and do-while loop in JavaScript

continue and break Statements in JavaScript

continue and break Statements in JavaScript

javascript multidimensional arrays javascript multidimensional array javascript multidimensional array javascript multidimensional array javascript multidimensional array