programming:
multi-dimensional arrays in JavaScript

Does JavaScript support multi-dimensional arrays?

Yes, but it's not easy.

Although the current JavaScript specification (3.0) does not make mention of multi-dimensional arrays, they are in fact possible. Multi-dimensional arrays can be represented by arrays of arrays.

Warning! If you do not know how to manipulate single-dimensional arrays in JavaScript, you might find this article difficult to understand.

For example, suppose that you want to create a 3 x 3 matrix, called Brady, and fill it with the strings shown in the following table:

To create the array, you should first allocate storage for each element:

Brady = new Array (3);
for (i = 0; i < Brady . length; ++ i)
	Brady [i] = new Array (3);

Although Brady is just a 1-dimensional array, the fact that each of Brady's elements is initialized with yet another 1-dimensional array means that Brady is an array of arrays -- in other words, a 2-dimensional array. Each element in the Brady array is a row in the matrix, and each row is an array of 3 elements.

Obviously, the expression Brady represents an array. In this case, however, so too do the expressions Brady [0], Brady [1], and Brady [2]! This means that we can populate the Brady array with the following code:

Brady [0] [0] = "Marsha";
Brady [0] [1] = "Carol";
Brady [0] [2] = "Greg";
Brady [1] [0] = "Jan";
Brady [1] [1] = "Alice";
Brady [1] [2] = "Peter";
Brady [2] [0] = "Cindy";
Brady [2] [1] = "Mike";
Brady [2] [2] = "Bobby";

Arrays would not be useful if their members could not be indexed with variables and expressions. To show that this is possible even with 2-dimensional arrays, I now offer the following general procedure for displaying arbitrary 2-dimensional arrays of strings (such as the Brady array) in HTML tables. Please carefully observe the manner in which the row and col indices are used to iterate through each element of array. (If you are rusty on HTML table syntax, you may wish to review first.)

function print_2d_string_array (array) { document . writeln ("<table border>"); var row; for (row = 0; row < array . length; ++ row) { document . writeln (" <tr>"); var col; for (col = 0; col < array [row] . length; ++ col) document . writeln (" <td>" + array [row] [col] + "</td>"); document . writeln (" </tr>"); } document . writeln ("</table>"); }

Combining all of this code together, along with the function call

print_2d_string_array (Brady);

If you really want a challenge, try making 3-dimensional arrays using this same technique! Remember, however, that instead of making an array of arrays, as we did in this example, you must instead make an array of arrays of arrays! If you are willing to put up with the mental trauma, I'm sure you could even make 5-dimensional arrays, or "arrays of arrays of arrays of arrays of arrays." (Don't ask me for help with it, though! :-)

Charlton Rose
Jan. 11, 1997