JavaScript Multidimensional Array

In this tutorial, you will learn about JavaScript multidimensional arrays with the assistance of examples.

Introduction to JavaScript multidimensional array

JavaScript doesn’t provide the multidimensional array natively. In any case, you can create a multidimensional array by characterizing an array of components, where every component is likewise another array.

Consequently, we can say that a JavaScript multidimensional array is an array of arrays. The simplest method to characterize a multidimensional array is to use the array literal notation.

A multidimensional array is an array that contains another array. For instance,

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

---

Create a Multidimensional Array

Here is the way you can create multidimensional arrays in JavaScript.

Example 1

let studentsData = [['Salman', 24], ['Sara', 23], ['Sohail', 24]];

Example 2

let student1 = ['Salman', 24];
let student2 = ['Sara', 23];
let student3 = ['Sohail', 24];

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

Here, both example 1 and example 2 creates a multidimensional array with the same data.

---

Access Elements of an Array

You can get to the components of a multidimensional array using indices (0, 1, 2 … ). For instance,

let x = [
['Salman', 24],
['Sara', 23], 
['Sohail', 24]
];

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

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

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

You can think about a multidimensional array (for this situation, x), as a table with 3 rows and 2 columns.

	Column 1	Column 2
Row 1	Salman x [0][0]	24 x[0][1]
Row 2	Sara       x [1][0]	23 x[1][1]
Row 3	Sohail    x [2][0]	24 x[2][1]

---

Add an Element to a Multidimensional Array

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

Adding Element to the Outer Array

let studentsData = [['Salman', 24], ['Sara', 23],];
studentsData.push(['Sohail', 24]);

console.log(studentsData); //[["Salman", 24], ["Sara", 23], ["Sohail", 24]

Adding Element to the Inner Array

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

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

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

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

You can also use the Array’s splice() method to add an element at a specified index. For example,

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

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

console.log(studentsData); // [["Salman", 24], ["Sohail", 24], ["Sara", 23]]

---

Eliminate an Element from a Multidimensional Array

You can use the Array’s pop() strategy to eliminate the component from a multidimensional array. For instance,

Remove Element from Outer Array

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

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

Remove Element from Inner Array

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

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

You can likewise use the splice() technique to eliminate a component at a predetermined index. For instance,

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

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

---

Iterating over Multidimensional Array

You can iterate over a multidimensional array using the Array’s forEach() technique to iterate over multidimensional array. For instance,

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

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

Output

Salman
24
Sara
23

The primary forEach() strategy is used to iterate over the external array components and the second forEach() is used to iterate over the internal array components.

You can likewise use the for…of the loop to iterate over the multidimensional array. For instance,

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

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

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

let studentsData = [['Salman', 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]);
    }
}

---

Thanks for reading! We hope you found this tutorial helpful and we would love to hear your feedback in the Comments section below. And show us what you’ve learned by sharing your photos and creative projects with us.

JS Types