Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
How to create a two dimensional array in JavaScript?
A two-dimensional array has more than one dimension, such as myarray[0][0] for element one, myarray[0][1] for element two, etc. JavaScript doesn't have true 2D arrays, but you can create arrays of arrays to achieve the same functionality.
Method 1: Using Array Constructor with Loop
This method creates an empty 2D array and fills it row by row:
<html>
<body>
<script>
var myarray = new Array(3);
for (i = 0; i < 3; i++) {
myarray[i] = new Array(3);
}
myarray[0][0] = "One";
myarray[0][1] = "Two";
myarray[0][2] = "Three";
myarray[1][0] = "Four";
myarray[1][1] = "Five";
myarray[1][2] = "Six";
myarray[2][0] = "Seven";
myarray[2][1] = "Eight";
myarray[2][2] = "Nine";
document.write("Element at [2][0]: " + myarray[2][0]);
document.write("<br>Element at [1][1]: " + myarray[1][1]);
</script>
</body>
</html>
Element at [2][0]: Seven Element at [1][1]: Five
Method 2: Using Array Literal (Recommended)
The modern approach using array literals is cleaner and more readable:
<html>
<body>
<script>
var matrix = [
["One", "Two", "Three"],
["Four", "Five", "Six"],
["Seven", "Eight", "Nine"]
];
document.write("2D Array structure:<br>");
for (let i = 0; i < matrix.length; i++) {
for (let j = 0; j < matrix[i].length; j++) {
document.write(matrix[i][j] + " ");
}
document.write("<br>");
}
</script>
</body>
</html>
2D Array structure: One Two Three Four Five Six Seven Eight Nine
Method 3: Creating Empty 2D Array with Fill
For creating a 2D array filled with default values:
<html>
<body>
<script>
// Create 3x3 array filled with zeros
var grid = Array(3).fill(null).map(() => Array(3).fill(0));
// Add some values
grid[0][0] = 10;
grid[1][1] = 20;
grid[2][2] = 30;
document.write("Grid with diagonal values:<br>");
for (let i = 0; i < grid.length; i++) {
document.write(grid[i].join(" ") + "<br>");
}
</script>
</body>
</html>
Grid with diagonal values: 10 0 0 0 20 0 0 0 30
Comparison
| Method | Readability | Performance | Use Case |
|---|---|---|---|
| Array Constructor + Loop | Medium | Good | Dynamic size creation |
| Array Literal | High | Best | Known data at creation |
| Array.fill() + map() | High | Good | Empty grid with default values |
Accessing and Modifying Elements
<html>
<body>
<script>
var numbers = [[1, 2], [3, 4], [5, 6]];
document.write("Original: " + numbers[1][0] + "<br>");
// Modify element
numbers[1][0] = 99;
document.write("Modified: " + numbers[1][0] + "<br>");
document.write("Array length: " + numbers.length + "<br>");
document.write("Row 0 length: " + numbers[0].length);
</script>
</body>
</html>
Original: 3 Modified: 99 Array length: 3 Row 0 length: 2
Conclusion
JavaScript 2D arrays are arrays of arrays. Use array literals for known data, Array constructor with loops for dynamic creation, and Array.fill() for initialized grids. Access elements using myarray[row][column] syntax.
Updated on: 2026-03-15T23:18:59+05:30
803 Views
Advertisements