Related Articles

Related Articles

Multidimensional array in JavaScript
  • Last Updated : 23 Oct, 2019

Multidimensional arrays are not directly provided in JavaScript. If we want to use anything which acts as a multidimensional array then we need to create a multidimensional array by using another one-dimensional array. So multidimensional arrays in JavaScript is known as arrays inside another array. We need to put some arrays inside an array, then the total thing is working like a multidimensional array. The array, in which the other arrays are going to insert, that array is use as the multidimensional array in our code. To define a multidimensional array its exactly the same as defining a normal one-dimensional array.

One-Dimensional array:

var arr = []; // Empty 1D array
var arr1 = ["A", "B", "C", "D"] // 1D array contains some alphabets
var arr1 = [1, 2, 3, 4, 5] // 1D array contains some digits

Multidimensional-Dimensional array:

  • Method 1:
    1st, need to define some 1D array
    var arr1 = ["ABC", 24, 18000];
    var arr2 = ["EFG", 30, 30000];
    var arr3 = ["IJK", 28, 41000];
    var arr4 = ["EFG", 31, 28000];
    var arr5 = ["EFG", 29, 35000];
    // "salary" defines like a 1D array but it already contains some 1D array
    var salary = [arr1, arr2, arr3, arr4, arr5]; 

    Here arr1, arr2, …arr5 are some 1D arrays which are inside salary array.

  • Method 2:
    var salary = [
       ["ABC", 24, 18000],
       ["EFG", 30, 30000],
       ["IJK", 28, 41000],
       ["EFG", 31, 28000],
    ];

    Here, salary array works like a multidimensional array. This notations are known as array literals.

Accessing the element of salary array:

  • To access the array element we need a simple index based notation
    // This notation access the salary of "ABC" person which is 18000, 
    // [0] selects 1st row, and [2] selects the 3rd element
    // of that 1st row which is 18000
    salary[0][2];
    
    // Similarly, 
    salary[3][2]; // Selects 28000
    
    **This notation is used for both Method 1 and Method 2.
    
  • For many iteration, we need to use loop to access the elements,
    // This loop is for outer array
    for (var i = 0, l1 = salary.length; i < l1; i++) {
    
        // This loop is for inner-arrays
        for (var j = 0, l2 = salary[i].length; j < l2; j++) {
    
            // Accessing each elements of inner-array
            documents.write( salary[i][j] ); 
        }
    }

Adding elements in Multidimensional Array: Adding elements in multi-dimensional arrays can be achieved in two ways in inner array or outer array. The inner array can be done in two different ways.



  • Adding elements to inner array:
    • We can use simple square bracket notation to add elements in multidimensional array.
      salary[3][3] = "India";
      
      // It adds "India" at the 4th index of 4th sub-array,
      // If we print the entire 4th sub-array, document.write(salary[3]);
      // the output will be :  ["EFG", 31, 28000, "India"]
      // indexing starts from 0
    • We can use push() method to add elements in the array.
      salary[3].push("India", "Mumbai");
      
      // It add "India" at the 4th index and "Mumbai" at
      // 5th index of 4th sub-array
      // If we print the entire 4th sub-array,
      // document.write(salary[3]);
      // The output will be :  ["EFG", 31, 28000, "India", "Mumbai"]
      // Indexing starts from 0
  • Adding elements to outer array: It is much similar to previous methods.
    salary.push(["MNO", 29, 33300]);
    // This row added after the last row in the "salary" array

Removing elements in Multidimensional Array: We can use pop() methods to remove elements from inner-arrays, and also use pop() method for removing a entire inner array.

// Remove last element from 4th sub-array
// That is 28000 indexing starts from 0
salary[3].pop(); 

// Removes last sub-array
// That is "["EFG", 31, 28000]"
salary.pop();
  • Example 1:
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    // Prints a simple multidimensional array in JavaScript
    <script>
    var arr1 = ["ABC", 24, 18000];
    var arr2 = ["EFG", 30, 30000];
    var arr3 = ["IJK", 28, 41000];
    var arr4 = ["EFG", 31, 28000];
    var arr5 = ["EFG", 29, 35000];
    var salary = [arr1, arr2, arr3, arr4, arr5]; 
    for(var i = 0; i < salary.length; i++) {
        document.write(salary[i] + "<br>");
    }
    </script>

    chevron_right

    
    

    Output:

    ABC, 24, 18000
    EFG, 30, 30000
    IJK, 28, 41000
    EFG, 31, 28000
    EFG, 29, 35000
  • Example 2:
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    // Prints a simple multidimensional array in
    // JavaScript with different declaration
    <script>
    var salary = [
       ["ABC", 24, 18000],
       ["EFG", 30, 30000],
       ["IJK", 28, 41000],
       ["EFG", 31, 28000],
    ]; 
    for(var i = 0; i < salary.length; i++) {
        document.write(salary[i] + "<br>");
    }
    </script>                    

    chevron_right

    
    

    Output:

    ABC, 24, 18000
    EFG, 30, 30000
    IJK, 28, 41000
    EFG, 31, 28000
    EFG, 29, 35000
  • Example 3:
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    // Prints a simple multidimensional array in JavaScript
    // where we just print the salary of a specific person
    <script>
    var salary = [
       ["ABC", 24, 18000],
       ["EFG", 30, 30000],
       ["IJK", 28, 41000],
       ["EFG", 31, 28000],
    ]; 
    document.write("salary of 2nd person : " + salary[1][2] + "<br>");
    document.write("salary of 4th person : " + salary[3][2] + "<br>");
    </script>                    

    chevron_right

    
    

    Output:

    salary of 2nd person : 30000
    salary of 4th person : 28000
  • Example 4:
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    // Prints a simple multidimensional array in
    // JavaScript where we add elements in the array 
    // using simple square bracket and push() method
    <script>
    var salary = [
       ["ABC", 24, 18000],
       ["EFG", 30, 30000],
       ["IJK", 28, 41000],
       ["EFG", 31, 28000],
    ]; 
      
    // Prints first array
    document.write("Original array :<br>");
    for(var i = 0; i < salary.length; i++) {
        document.write(salary[i] + "<br>");
    }
      
    // Adding "India" at the 4th index of 4th sub array
    salary[3][3] = "India";
      
    document.write("<br>after adding \"India\" at the 4th array :<br>");
    for(var i = 0; i < salary.length; i++) {
        document.write(salary[i] + "<br>");
    }
      
    document.write("<br>after adding \"USA\" and \"Canada\" "
         + "at the 3rd array using \"push()\" method :<br>");
    salary[2].push("USA", "Canada");
      
    // Adding "USA" and "Canada" in the 2nd sub-array
    for(var i = 0; i < salary.length; i++) {
        document.write(salary[i] + "<br>");
    }
    </script> 

    chevron_right

    
    

    Output:

    Original array :
    ABC, 24, 18000
    EFG, 30, 30000
    IJK, 28, 41000
    EFG, 31, 28000
    
    after adding "India" at the 4th array :
    ABC, 24, 18000
    EFG, 30, 30000
    IJK, 28, 41000
    EFG, 31, 28000, India
    
    after adding "USA" and "Canada" at the 3rd array using "push()" method :
    ABC, 24, 18000
    EFG, 30, 30000
    IJK, 28, 41000, USA, Canada
    EFG, 31, 28000, India
  • Example 5:
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    // Prints a simple multidimensional array in
    // JavaScript where we add a new inner array 
    <script>
    var salary = [
       ["ABC", 24, 18000],
       ["EFG", 30, 30000],
       ["IJK", 28, 41000],
       ["EFG", 31, 28000],
    ]; 
      
    // Prints first array
    document.write("Original array :<br>");
      
    for(var i = 0; i < salary.length; i++) {
        document.write(salary[i] + "<br>");
    }
      
    document.write("<br>After adding a new inner array :<br>");
      
    // Pushing a new sub-array
    salary.push(["MNO", 29, 33300]);
      
    for(var i = 0; i < salary.length; i++) {
        document.write(salary[i] + "<br>");
    }
    </script> 

    chevron_right

    
    

    Output:

    Original array :
    ABC, 24, 18000
    EFG, 30, 30000
    IJK, 28, 41000
    EFG, 31, 28000
    
    After adding a new inner array :
    ABC, 24, 18000
    EFG, 30, 30000
    IJK, 28, 41000
    EFG, 31, 28000
    MNO, 29, 33300
  • Example 6:
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    // Prints a simple multidimensional array in
    // JavaScript where we remove a single element
    //and a entire sub-array
    <script>
    var salary = [
       ["ABC", 24, 18000],
       ["EFG", 30, 30000],
       ["IJK", 28, 41000],
       ["EFG", 31, 28000],
    ]; 
      
    // Prints first array
    document.write("Original array :<br>");
      
    for(var i = 0; i < salary.length; i++) {
        document.write(salary[i] + "<br>");
    }
      
    document.write("<br>After removing last element " 
                + "of last inner array :<br>");
      
    // Removes the last element of 3rd sub-array
    salary[3].pop();
      
    for(var i = 0; i < salary.length; i++) {
        document.write(salary[i] + "<br>");
    }
      
    document.write("<br>After removing last inner array :<br>");
      
    // Removes last sub-array
    salary.pop();
      
    for(var i = 0; i < salary.length; i++) {
        document.write(salary[i] + "<br>");
    }
    </script> 

    chevron_right

    
    

    Output:

    Original array :
    ABC, 24, 18000
    EFG, 30, 30000
    IJK, 28, 41000
    EFG, 31, 28000
    
    After removing last element of last inner array :
    ABC, 24, 18000
    EFG, 30, 30000
    IJK, 28, 41000
    EFG, 31
    
    After removing last inner array :
    ABC, 24, 18000
    EFG, 30, 30000
    IJK, 28, 41000

full-stack-img




My Personal Notes arrow_drop_up
Recommended Articles
Page :