Creating two dimensional array in javascript

Suggested Videos
Part 20 - JavaScript array push and pop methods
Part 21 - JavaScript array mutators
Part 22 - JavaScript array filter method



JavaScript does not have a special syntax for creating multidimensional arrays. Instead we create an array of arrays.



Example : The following JavaScript code creates a 2 dimensional 3x3 array.

var myArray1 = new Array(3)

for (i = 0; i < 3; i++)

    myArray1[i] = new Array(3)

myArray1[0][0] = "1"

myArray1[0][1] = "2"

myArray1[0][2] = "3"

myArray1[1][0] = "4"

myArray1[1][1] = "5"

myArray1[1][2] = "6"

myArray1[2][0] = "7"

myArray1[2][1] = "8"

myArray1[2][2] = "9"

for (var i = 0; i < 3; i++)

{

    for (var j = 0; j < 3; j++)

    {

        document.write(myArray1[i][j] + "&emsp;");

    }

    document.write("<br/>");

}

Output : 


In Example 1, we have manually populated each storage location in the array. Instead we can use to 2 nested for loops as shown below.

var myArray1 = new Array(3)

for (i = 0; i < 3; i++)

    myArray1[i] = new Array(3)

var start = 1;

for (var i = 0; i < 3; i++)

{

    for (var j = 0; j < 3; j++)

    {

        myArray1[i][j] = start;

        start = start + 1;

    }

}

for (var i = 0; i < 3; i++)

{

    for (var j = 0; j < 3; j++)

    {

        document.write(myArray1[i][j] + "&emsp;");

    }

    document.write("<br/>");

}

Performing addition between 2 two dimensional arrays in JavaScript 

Example : 
a) The first 3 x 3 array should contain numbers from 1 to 9
b) The second 3 x 3 array should contain numbers from 9 to 1
c) The numbers present at each index position in the first and second array should be added and the result should be stored in a third 3x3 array.

// Create the first 2 dimensional 3 X 3 array

var myArray1 = new Array(3)

for (i = 0; i < 3; i++)

    myArray1[i] = new Array(3)

var start = 1;

for (var i = 0; i < 3; i++)

{

    for (var j = 0; j < 3; j++)

    {

        myArray1[i][j] = start;

        start = start + 1;

    }

}

for (var i = 0; i < 3; i++)

{

    for (var j = 0; j < 3; j++)

    {

        document.write(myArray1[i][j] + "&emsp;");

    }

    document.write("<br/>");

}

document.write("<br/>");

document.write("&emsp;+");

document.write("<br/>");

document.write("<br/>");

// Create the second 2 dimensional 3 X 3 array

var myArray2 = new Array(3)

for (i = 0; i < 3; i++)

    myArray2[i] = new Array(3)

for (var i = 0; i < 3; i++)

{

    for (var j = 0; j < 3; j++)

    {

        start = start - 1;

        myArray2[i][j] = start;

    }

}

for (var i = 0; i < 3; i++)

{

    for (var j = 0; j < 3; j++)

    {

        document.write(myArray2[i][j] + "&emsp;");

    }

    document.write("<br/>");

}

document.write("<br/>");

document.write("&emsp;=");

document.write("<br/>");

document.write("<br/>");

// Create the third 2 dimensional 3 X 3 array

var myArray3 = new Array(3)

for (i = 0; i < 3; i++)

    myArray3[i] = new Array(3)

for (var i = 0; i < 3; i++)

{

    for (var j = 0; j < 3; j++)

    {

        myArray3[i][j] = myArray1[i][j] + myArray2[i][j];

    }

}

for (var i = 0; i < 3; i++)

{

    for (var j = 0; j < 3; j++)

    {

        document.write(myArray3[i][j] + "&emsp;");

    }

    document.write("<br/>");

}

Creating a 2 dimensional 3 X 5 array

var myArray1 = new Array(3)

for (i = 0; i < 3; i++)

    myArray1[i] = new Array(5)

var start = 101;

for (var i = 0; i < 3; i++)

{

    for (var j = 0; j < 5; j++)

    {

        myArray1[i][j] = start;

        start = start + 1;

    }

}

for (var i = 0; i < 3; i++)

{

    for (var j = 0; j < 5; j++)

    {

        document.write(myArray1[i][j] + "&emsp;");

    }

    document.write("<br/>");

}

Output :