JavaScript: 3 Ways to Create Multidimensional Arrays

A multidimensional array is an array that contains one or more arrays as elements. In other words, it is an array of arrays. Among multidimensional arrays, two-dimensional arrays (or 2D arrays) are widely used because they can represent many types of data that have a grid-like or tabular structure. Their elements are organized into rows and columns

This article walks you through a couple of different ways to create multidimensional arrays in JavaScript.

Using square brackets (the array literal notation)

JavaScript does not have a built-in syntax for multidimensional arrays, but you can create them by using an array of arrays.

For example, you can create a 2D array with 3 rows and 4 columns like so:

let myArray = [
  [1, 2, 3, 4],
  [5, 6, 7, 8],
  [9, 10, 11, 12]
];

console.log(myArray);

Output:

[
  [1, 2, 3, 4],
  [5, 6, 7, 8],
  [9, 10, 11, 12]
]

You can access and modify the elements of a multidimensional array by using indexes. For instance, to get the value of 6 from the above array, you can use array[1][1]. To change it to 10, you can use array[1][1] = 10.

This example shows how to create a three-dimensional array (3D array) in JavaScript:

/* 
Create a 3D array with 2 matrices, 
each with 3 rows and 4 columns
*/
let myArray = [
  [
    [1, 2, 3, 4],
    [5, 6, 7, 8],
    [9, 10, 11, 12]
  ],
  [
    [13, 14, 15, 16],
    [17, 18, 19, 20],
    [21, 22, 23, 24]
  ]
];

console.log(myArray);

Using the Array() constructor

The preceding approach seems neat and intuitive. However, it isn’t the only possible way. You can also use the new Array() constructor to create an array and then assign each element as another array.

Example:

// create an array with 3 elements
const array = new Array(3);

// assign the first element as an array of 3 numbers
array[0] = [1, 2, 3];

// assign the second element as an array of 3 numbers
array[1] = [4, 5, 6];

// assign the third element as an array of 3 numbers
array[2] = [7, 8, 9];

console.log(array);

Output:

[ 
  [ 1, 2, 3 ], 
  [ 4, 5, 6 ], 
  [ 7, 8, 9 ] 
]

Using nested loops

You can make use of nested loops to create an empty multidimensional array and then fill it with values. This techniqeu is useful when you need to programmatically create an array with a large number of rows and columns.

Example:

let rows = 3; // number of rows
let cols = 3; // number of columns
let array = []; // create an empty array

// loop through each row
for (let i = 0; i < rows; i++) {
  // create an empty sub-array for each row
  array[i] = [];
  
  // loop through each column
  for (let j = 0; j < cols; j++) {
    // assign a random value to each element
    array[i][j] = Math.floor(Math.random() * 10);
  }
}

console.log(array);

Output (yours might be different from mine because the code use Math.random() ):

[ 
  [ 7, 3, 4 ], 
  [ 5, 6, 4 ], 
  [ 0, 6, 9 ] 
]

Conclusion

You’ve learned some distinct ways to make new multidimensional arrays in JavaScript. They are very versatile and efficient for storing and manipulating complex data, especially numeric data.

If you find errors or anachronisms in the code examples, please let me know by leaving comments. I will review and update them as soon as possible. Happy JavaScripting & have a nice day!