JavaScript 2D Arrays
A 2D array is an array of arrays — a grid of rows and columns. It's perfect for matrices, tables, game boards, and any data that has rows and columns.
What is a 2D Array?
A 2D (two-dimensional) array is simply an array of arrays. Think of it as a table with rows and columns. You access an element using two indexes: matrix[row][col].
Why Use 2D Arrays?
Matrix Math
Store and process matrices for math and graphics.
Game Board
Tic-tac-toe, chess, Sudoku, minesweeper.
Tables
Marks of students × subjects, sales × months.
Maps
Tile-based game maps and grids.
Jagged Arrays
Different number of columns per row.
Easy Iteration
Nested loops handle every cell cleanly.
Basic Features
- Declared as an array containing arrays:
[[1,2],[3,4]]. - Access with two indexes:
arr[i][j]. - Use
arr.lengthfor rows,arr[i].lengthfor columns. - Rows can have different lengths (jagged arrays).
Exploring 2D Arrays in JavaScript
A 2D array in JavaScript is an array of arrays arranged in rows and columns like a matrix or grid. It is widely used in games, spreadsheets, image processing, and data management systems.
What is a 2D Array ?
In JavaScript, a 2D array stores data in tabular form where each row itself is another array. It helps organize complex data structures efficiently.
2D Array Syntax
// Literal let matrix = [ [1,2,3], [4,5,6], [7,8,9] ]; matrix[0][0]; // 1 matrix[2][1]; // 8
Creating a 2D Array
<script>
var a =
new Array(2);
for(i=0;i<a.length;i++){
a[i] =
new Array(2);
}
</script>
This creates a 2 × 2 matrix dynamically in JavaScript.
Your First 2D Array Program
<script>
let m = [
[1,2,3],
[4,5,6],
[7,8,9]
];
for(
let i=0;
i<m.length;
i++
){
for(
let j=0;
j<m[i].length;
j++
){
document.write(
m[i][j]
+ " "
);
}
document.write(
"<br>"
);
}
</script>
4 5 6
7 8 9
Example 1 : Input Matrix
<script>
var a =
new Array(2);
for(i=0;i<a.length;i++){
a[i] =
new Array(2);
}
for(i=0;i<2;i++){
for(j=0;j<2;j++){
a[i][j] =
parseInt(
prompt(
"Enter No"
)
);
}
}
for(i=0;i<2;i++){
for(j=0;j<2;j++){
document.write(
a[i][j]
+" "
);
}
document.write(
"<br>"
);
}
</script>
3 4
Example 2 : Sum of Elements
<script>
let m = [
[1,2],
[3,4],
[5,6]
];
let sum = 0;
for(let row of m)
for(let v of row)
sum += v;
document.write(
"Sum = "
+ sum
);
</script>
Example 3 : Matrix Addition & Subtraction
<script>
let A = [
[1,2],
[3,4]
];
let B = [
[5,6],
[7,8]
];
let C = [];
for(i=0;i<2;i++){
C.push([]);
for(j=0;j<2;j++){
C[i][j] =
A[i][j] +
B[i][j];
}
}
document.write(
JSON.stringify(C)
);
</script>
Example 4 : Largest Element
<script>
let m = [
[12,5,9],
[3,21,7],
[8,14,2]
];
let max =
m[0][0];
for(let row of m)
for(let v of row)
if(v>max)
max=v;
document.write(
"Largest = "
+ max
);
</script>
Example 5 : Matrix Transpose
<script>
let m = [
[1,2,3],
[4,5,6]
];
let t = [];
for(
let j=0;
j<m[0].length;
j++
){
t.push([]);
for(
let i=0;
i<m.length;
i++
){
t[j][i] =
m[i][j];
}
}
document.write(
JSON.stringify(t)
);
</script>
Important Notes
- JavaScript supports arrays of arrays.
- Rows may contain different lengths.
- Use nested loops for traversal.
- JSON.stringify() prints matrices neatly.
Real-Life Use Cases
Chess Board
Store game pieces in rows and columns.
Spreadsheets
Store table data efficiently.
Image Pixels
Images are grids of pixels.
Frequently Asked Questions
| Question | Answer |
|---|---|
| Is JavaScript truly multi-dimensional? | No, it uses arrays of arrays. |
| Can rows have different lengths? | Yes, jagged arrays are allowed. |
| Can objects be stored in 2D arrays? | Yes, any data type can be stored. |
Conclusion
2D arrays are powerful data structures that help developers work with matrices, tables, grids, and structured datasets efficiently in JavaScript.
JavaScript All Chapters
Continue Learning
Previous
Go to Inheritance Chapter