JavaScript two-dimensional array is an array of arrays. Two-dimensional arrays are a collection of homogeneous elements that span over multiple rows and columns, assuming the form of a matrix.
var arr = [
["aaa", "bbb"],
["ddd", "eee"]
];Technically, there is no two-dimensional array in JavaScript. JavaScript supports 2D arrays through jagged arrays – an array of arrays. Jagged arrays are essentially multiple arrays jagged together to form a multidimensional array.
JavaScript two-dimensional array
Simple example program to Create Two Dimensional Arrays.
Just declare a regular array like so:
var arry = [];Then when you have a pair of values to add to the array, all you need to do is:
arry.push([value_1, value2]);And yes, the first time you call array push(), the pair of values will be placed at index 0.
<!DOCTYPE html>
<html>
<body>
<script>
var arry = [];
arry.push([1,2]);
arry.push([3,4]);
console.log(arry)
</script>
</body>
</html> Output:
Of course, since javascript is dynamically typed, there will be no type checker enforcing that the array remains 2-dimensional. You will have to make sure to only add pairs of coordinates and not do the following:
arry.push(100);Source: stackoverflow.com
Two-Dimensional Array Using for Loop
function twoDimensionArray(a, b) {
let arr = [];
// creating two dimensional array
for (let i = 0; i< a; i++) {
for(let j = 0; j< b; j++) {
arr[i] = [];
}
}
// inserting elements to array
for (let i = 0; i< a; i++) {
for(let j = 0; j< b; j++) {
arr[i][j] = j;
}
}
return arr;
}
const x = 2;
const y = 3;
const result = twoDimensionArray(x, y);
console.log(result);Output: [[0, 1, 2], [0, 1, 2]]
Here’s how you can create and work with a two-dimensional array in JavaScript:
// Creating a 2D array (3x3)
const twoDArray = [
[1, 2, 3],
[4, 5, 6],
[7, 8, 9]
];
// Accessing elements
console.log(twoDArray[0][0]); // Output: 1 (row 0, column 0)
console.log(twoDArray[1][2]); // Output: 6 (row 1, column 2)
// Modifying elements
twoDArray[1][1] = 55; // Changing the value at row 1, column 1
// Iterating through the array
for (let row = 0; row < twoDArray.length; row++) {
for (let col = 0; col < twoDArray[row].length; col++) {
console.log(`Row ${row}, Column ${col}: ${twoDArray[row][col]}`);
}
}
// Adding a new row
const newRow = [10, 11, 12];
twoDArray.push(newRow);
// Adding a new column (for each row)
for (let row = 0; row < twoDArray.length; row++) {
twoDArray[row].push(row * 3);
}
Note: JavaScript arrays are not necessarily fixed in size, so you can dynamically add or remove rows and columns. However, this flexibility can also lead to complexities if you’re not careful about managing your array dimensions.
Do comment if you have any doubts or suggestions on this Js Arra topic.
Note: The All JS Examples codes are tested on the Firefox browser and the Chrome browser.
OS: Windows 10
Code: HTML 5 Version