How to create two dimensional array in JavaScript ?

The two-dimensional array is a collection of items that share a common name and they are organized as a matrix in the form of rows and columns. The two-dimensional array is an array of arrays, so we create an array of one-dimensional array objects.

We can create a 2D array in many ways:

Approach 1: Using a nested for loop

In this approach, we are using for loop for the creation of a 2D array. we are iterating the loop row*col times.

Example 1: In this example, we will construct a two-dimensional array using integer values. 

Javascript

let gfg = [];
let row = 3;
let col = 3;
let h = 0

// Loop to initialize 2D array elements.
for (let i = 0; i < row; i++) {
    gfg[i] = [];
    for (let j = 0; j < col; j++) {
        gfg[i][j] = h++;
    }
}
console.log(gfg);

Output

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

Example 2: In this example, we will create a two-dimensional array using string values. 

javascript

let gfg = new Array(3);
for (let i = 0; i < gfg.length; i++) {
    gfg[i] = [];
}
let h = 0;
let s = "GeeksforGeeks";

// Loop to initialize 2D array elements.
for (let i = 0; i < 3; i++) {
    for (let j = 0; j < 3; j++) {

        gfg[i][j] = s[h++];
    }
}
console.log(gfg);

Output

[ [ 'G', 'e', 'e' ], [ 'k', 's', 'f' ], [ 'o', 'r', 'G' ] ]

Approach 2: Use the literal notation

In this approach, we are declaring a 2D array originally and storing it to in a variable.

Example: In this example, we will create a 2D array manually. This is the 2D array that stores the information of the student.

Javascript

let MathScore = [
    ["Bar", 20, 60, "A"],
    ["Foo", 10, 52, "B"],
    ["Joey", 5, 24, "F"],
    ["John", 28, 43, "A"],
    ["Liza", 16, 51, "B"]
];
console.log(MathScore);

Output

[
  [ 'Bar', 20, 60, 'A' ],
  [ 'Foo', 10, 52, 'B' ],
  [ 'Joey', 5, 24, 'F' ],
  [ 'John', 28, 43, 'A' ],
  [ 'Liza', 16, 51, 'B' ]
]

Approach 3: Using Array.from() Method

The JavaScript Array from() method returns an Array object from any object with a length property or an iterable object. 

Example: This example shows the implemention of above-explained approach.

Javascript

const rows = 3;
const columns = 4;
const matrix = Array.from({ length: rows }, () =>
               new Array(columns).fill(0));
console.log(matrix);

Output

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

Approach 4: Using Array.fill() Method

In this method, we will use the fill() method and map method for creating the two-dimensional array in Javascript.

Example: This example shows the implemention of above-explained approach.

Javascript

const rows = 3;
const columns = 4;

const matrix = Array(rows).fill().map(() =>
               Array(columns).fill(0));

console.log(matrix);

Output

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

JavaScript is best known for web page development but it is also used in a variety of non-browser environments. You can learn JavaScript from the ground up by following this JavaScript Tutorial and JavaScript Examples.