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
Single dimensional array vs multidimensional array in JavaScript.
JavaScript supports both single-dimensional and multidimensional arrays. A single-dimensional array stores elements in a linear sequence, while a multidimensional array contains arrays as elements, creating a matrix-like structure.
Single-Dimensional Arrays
A single-dimensional array is a simple list of elements accessed by a single index.
<!DOCTYPE html>
<html>
<head>
<title>Single Dimensional Array</title>
</head>
<body>
<script>
let singleArray = [10, 20, 30, 40, 50];
console.log("Single-dimensional array:", singleArray);
console.log("First element:", singleArray[0]);
console.log("Array length:", singleArray.length);
// Display all elements
document.write("<h3>Single-dimensional array:</h3>");
for(let i = 0; i < singleArray.length; i++) {
document.write("Index " + i + ": " + singleArray[i] + "<br>");
}
</script>
</body>
</html>
Single-dimensional array: Index 0: 10 Index 1: 20 Index 2: 30 Index 3: 40 Index 4: 50
Multidimensional Arrays
A multidimensional array contains other arrays as elements, accessed using multiple indices.
<!DOCTYPE html>
<html>
<head>
<title>Multidimensional Array</title>
</head>
<body>
<script>
let multiArray = [
[1, 2, 3],
["A", "B", "C"],
[10, 20, 30]
];
console.log("Multidimensional array:", multiArray);
console.log("Element at [0][1]:", multiArray[0][1]);
// Display all elements
document.write("<h3>Multidimensional array:</h3>");
for(let i = 0; i < multiArray.length; i++) {
document.write("Row " + i + ": [" + multiArray[i].join(", ") + "]<br>");
for(let j = 0; j < multiArray[i].length; j++) {
document.write(" [" + i + "][" + j + "] = " + multiArray[i][j] + "<br>");
}
}
</script>
</body>
</html>
Multidimensional array: Row 0: [1, 2, 3] [0][0] = 1 [0][1] = 2 [0][2] = 3 Row 1: [A, B, C] [1][0] = A [1][1] = B [1][2] = C Row 2: [10, 20, 30] [2][0] = 10 [2][1] = 20 [2][2] = 30
Interactive Example
<!DOCTYPE html>
<html>
<head>
<title>Array Comparison</title>
<style>
body { font-family: Arial, sans-serif; margin: 20px; }
.result { color: #d63384; margin: 10px 0; }
.sample { color: #6f42c1; margin: 10px 0; }
button { padding: 10px 20px; font-size: 16px; }
</style>
</head>
<body>
<h2>Single vs Multidimensional Arrays</h2>
<div class="sample">Single-dimensional Array: <span id="single"></span></div>
<div class="result">Multidimensional Array:<br><span id="multi"></span></div>
<button onclick="displayArrays()">Show Arrays</button>
<script>
function displayArrays() {
// Single-dimensional array
let singleArr = [1, 2, 3, 4, 5];
// Multidimensional array
let multiArr = [
[1, 2, 3],
["A", "B", "C"],
[5, "D", 6]
];
// Display single array
document.getElementById("single").innerHTML = "[" + singleArr.join(", ") + "]";
// Display multidimensional array
let multiDisplay = "";
multiArr.forEach((subArray, index) => {
multiDisplay += "Row " + index + ": [" + subArray.join(", ") + "]<br>";
});
document.getElementById("multi").innerHTML = multiDisplay;
}
</script>
</body>
</html>
Key Differences
| Aspect | Single-Dimensional | Multidimensional |
|---|---|---|
| Structure | Linear list | Array of arrays |
| Access | array[index] | array[row][column] |
| Use Case | Simple lists | Matrices, tables |
| Memory | Less complex | More complex |
Common Use Cases
Single-dimensional arrays: Store lists like student names, shopping cart items, or menu options.
Multidimensional arrays: Represent data tables, game boards, mathematical matrices, or coordinate systems.
Conclusion
Single-dimensional arrays work best for simple lists, while multidimensional arrays excel at representing structured data like tables and matrices. Choose based on your data organization needs.
818 Views
