How to build matrices in JS? Also known as multi-dimensional arrays, these are just arrays of arrays in JS. An easy way to build multi-dimensional arrays is to output them using nested loops, as we’ll show in this tutorial.

Build a multi-dimensional array in JavaScript

In JS, a multi-dimensional array is an array of arrays (of arrays etc…).

Here’s a simple two-dimensional matrix:

-------------
| 100 | 200 |
-------------
| 30  | 25  |
-------------

How do we build this in JS? And how do we access the members of this matrix?

To build it, we do this:

let tda = [];
tda.push([100,200]);
tda.push([30, 25]);
tda;
/*
returns:
(2) [Array(2), Array(2)]
0: (2) [100, 200]
1: (2) [30, 25]
*/

In the above array of arrays, each member (which is also an array), represents a row in the two-dimensional matrix.

To access any specific “cell” in the matrix, we use the following syntax:

tda[0][0]; // 100

To get back the value of 100 from row 1, position 1 of the matrix, we call tdm[0][0]. Or we might say row 0, position 0, if we’re counting the values like arrays count them, not like humans count them.

Let’s get out all the members of the two-dimensional array:

tdm[0][0]; // 100
tdm[0][1]; // 200
tdm[1][0]; // 30
tdm[1][1]; // 25

We could run a for loop to get out these values, or a forEach as well.

This goes back to our exercise on building a multiplication table. Here’s a reimplementation using document.write. We begin by adding a table element to the DOM:

document.write("<table>");

We haven’t closed the table element yet; that comes at the end of this code snippet.

Now we’ll add two loops:

1
2
3
4
5
6
7
8
9
document.write("<table style='border: 1px solid'>");
for (let row = 1; row < 11; row++) {
  document.write("<tr>");
  for (let cell = 1; cell < 11; cell++) {
    document.write("<td style='border:1px solid'>" + row * cell + "</td>");
  }
  document.write("</tr>");
}
document.write("</table>");

Unfortunately, the document.write() method is quirky, or at least, acts somewhat unexpectedly. That’s why, although it looks like a nice trick, we’re much better off relying on the document.createElement() and document.body.appendChild() APIs.

Here’s our two-dimensional JavaScript array again, this time using the above mentioned methods:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
let table = document.createElement("table");

for (r = 0; r < 10; r++) {

    let row = document.createElement("tr");
    
    for (c = 0; c < 10; c++) {
        let col = document.createElement('td');
        col.textContent =  (r + 1) * (c + 1);
        row.appendChild(col);
    }

    table.appendChild(row);
}

document.body.textContent = "";
document.body.appendChild(table);

Now let’s improve our table with some additional styles:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
document.body.textContent = "";
let table = document.createElement("table");
table.setAttribute("style", "font-size: 24px; border: 1px solid");

for (r = 0; r < 10; r++) {

    let row = document.createElement("tr");
    
    for (c = 0; c < 10; c++) {
        let col = document.createElement('td');
        col.setAttribute("style", `
            padding: 5px;
            border: 1px solid;
            text-align: center;
            font-family: Arial, sans-serif;
        `);
        col.textContent =  (r + 1) * (c + 1);
        row.appendChild(col);
    }
    
    table.appendChild(row);
}
document.body.appendChild(table);



Note:
This exercise comes from Book 3 of my book series on JS, available on Leanpub.com.