How to Create a Two Dimensional Array in JavaScript?

A two-dimensional array is an array of arrays. In a two-dimensional array, each array item is again an array which contains the actual data. In other words, it is a collection of multiple one-dimensional arrays.

Here is an example of a two-dimensional array in JavaScript:

// A two-dimensional array in JS
const arr = [
    [1, 2, 3],
    [4, 5, 6],
    [7, 8, 9]
];

Create a two-dimensional Array using For Loop

In this method, we use the Array() constructor and a for loop to create the two-dimensional array. If you pass a single argument to the Array() constructor, it creates an array of that size.

For example, Array(3) will create an array of size 3 with empty values. We will use this concept to create the two-dimensional array.

Here is an example:

const rows = 3;  // No. of rows
const cols = 3;  // No. of columns

// Create a 1-D array of size rows
const arr = new Array(rows); 

for(let i=0;i<rows;i++){
    
    // Make each row an array of size cols
    arr[i] = new Array(cols);
    
    // Fill inner arrays with zeros
    arr[i].fill(0); 
}

// Print the array
console.log(arr);

Output:

[0, 0, 0]
[0, 0, 0]
[0, 0, 0]

Using Array.from() Method

You can also use the Array.from() method to create a 2-dimensional array.

The Array.from() method lets you create an array from an array or an array-like object. The second argument in this method is a callback function which runs on each array item and lets you map them accordingly.

Here is an example:

const rows = 3;  // No. of rows
const cols = 3;  // No. of columns

// Create the two-dimensional array
const arr = Array.from(Array(rows), ()=>new Array(cols).fill(0));

// Print the array
console.log(arr);

Output:

[0, 0, 0]
[0, 0, 0]
[0, 0, 0]

Using Array.map() Method

The Array.map() method runs on each array element one by one and lets you map them to any desired value.

In our case, we will first create a one-dimensional array of size=rows using the Array() constructor and then map each item of this array to a new array of size=cols.

Something like this:

const rows = 3;  // No. of rows
const cols = 3;  // No. of columns

// Create the two-dimensional array
const arr = new Array(rows).fill(0).map(item=>new Array(cols).fill(0));

// Print the array
console.log(arr);

Output:

[0, 0, 0]
[0, 0, 0]
[0, 0, 0]

Using Array.fill() Method(Not Recommended)

You can also use the Array.fill() method to create a two-dimensional array. But this method is not recommended.

The only purpose of discussing this method is to make you aware of its disadvantages.

The Array.fill() method copies value by reference, not by value. So, if you create a two-dimensional array using the Array.fill() method, only the first row will be created in the memory.

All the remaining rows(second, third, fourth,….) will be a copy of the first row, but by reference. So, if you make any changes in any row, the same changes will appear across all the rows of the array.

For example, if we set only the first item of the array to 10 i.e. arr[0][0]=10;, the first item of each row will also be set to the value 10.

Here is an example:

const rows = 3;  // No. of rows
const cols = 3;  // No. of columns

// Create the two-dimensional array
const arr = new Array(rows).fill(new Array(cols).fill(0));

// Set first array element to 10
arr[0][0] = 10;

// Print the array
console.log(arr);

Output:

[10, 0, 0]
[10, 0, 0]
[10, 0, 0]

Author

  • Manoj Kumar

    Hi, My name is Manoj Kumar. I am a full-stack developer with a passion for creating robust and efficient web applications. I have hands-on experience with a diverse set of technologies, including but not limited to HTML, CSS, JavaScript, TypeScript, Angular, Node.js, Express, React, and MongoDB.

    View all posts