Multidimensional arrays are not directly provided in JavaScript. If we want to use anything which acts as a multidimensional array then we need to create a multidimensional array by using another one-dimensional array. So multidimensional arrays in JavaScript is known as arrays inside another array. We need to put some arrays inside an array, then the total thing is working like a multidimensional array. The array, in which the other arrays are going to insert, that array is use as the multidimensional array in our code. To define a multidimensional array its exactly the same as defining a normal one-dimensional array.
One-Dimensional array:
var arr = []; // Empty 1D array var arr1 = ["A", "B", "C", "D"] // 1D array contains some alphabets var arr1 = [1, 2, 3, 4, 5] // 1D array contains some digits
Multidimensional-Dimensional array:
- Method 1:
1st, need to define some 1D array var arr1 = ["ABC", 24, 18000]; var arr2 = ["EFG", 30, 30000]; var arr3 = ["IJK", 28, 41000]; var arr4 = ["EFG", 31, 28000]; var arr5 = ["EFG", 29, 35000]; // "salary" defines like a 1D array but it already contains some 1D array var salary = [arr1, arr2, arr3, arr4, arr5];
Here arr1, arr2, …arr5 are some 1D arrays which are inside salary array.
- Method 2:
var salary = [ ["ABC", 24, 18000], ["EFG", 30, 30000], ["IJK", 28, 41000], ["EFG", 31, 28000], ];
Here, salary array works like a multidimensional array. This notations are known as array literals.
Accessing the element of salary array:
- To access the array element we need a simple index based notation
// This notation access the salary of "ABC" person which is 18000, // [0] selects 1st row, and [2] selects the 3rd element // of that 1st row which is 18000 salary[0][2]; // Similarly, salary[3][2]; // Selects 28000 **This notation is used for both Method 1 and Method 2.
- For many iteration, we need to use loop to access the elements,
// This loop is for outer array for (var i = 0, l1 = salary.length; i < l1; i++) { // This loop is for inner-arrays for (var j = 0, l2 = salary[i].length; j < l2; j++) { // Accessing each elements of inner-array documents.write( salary[i][j] ); } }
Adding elements in Multidimensional Array: Adding elements in multi-dimensional arrays can be achieved in two ways in inner array or outer array. The inner array can be done in two different ways.
- Adding elements to inner array:
- We can use simple square bracket notation to add elements in multidimensional array.
salary[3][3] = "India"; // It adds "India" at the 4th index of 4th sub-array, // If we print the entire 4th sub-array, document.write(salary[3]); // the output will be : ["EFG", 31, 28000, "India"] // indexing starts from 0
- We can use push() method to add elements in the array.
salary[3].push("India", "Mumbai"); // It add "India" at the 4th index and "Mumbai" at // 5th index of 4th sub-array // If we print the entire 4th sub-array, // document.write(salary[3]); // The output will be : ["EFG", 31, 28000, "India", "Mumbai"] // Indexing starts from 0
- We can use simple square bracket notation to add elements in multidimensional array.
- Adding elements to outer array: It is much similar to previous methods.
salary.push(["MNO", 29, 33300]); // This row added after the last row in the "salary" array
Removing elements in Multidimensional Array: We can use pop() methods to remove elements from inner-arrays, and also use pop() method for removing a entire inner array.
// Remove last element from 4th sub-array // That is 28000 indexing starts from 0 salary[3].pop(); // Removes last sub-array // That is "["EFG", 31, 28000]" salary.pop();
- Example 1:
// Prints a simple multidimensional array in JavaScript
<script>
var
arr1 = [
"ABC"
, 24, 18000];
var
arr2 = [
"EFG"
, 30, 30000];
var
arr3 = [
"IJK"
, 28, 41000];
var
arr4 = [
"EFG"
, 31, 28000];
var
arr5 = [
"EFG"
, 29, 35000];
var
salary = [arr1, arr2, arr3, arr4, arr5];
for
(
var
i = 0; i < salary.length; i++) {
document.write(salary[i] +
"<br>"
);
}
</script>
Output:
ABC, 24, 18000 EFG, 30, 30000 IJK, 28, 41000 EFG, 31, 28000 EFG, 29, 35000
- Example 2:
// Prints a simple multidimensional array in
// JavaScript with different declaration
<script>
var
salary = [
[
"ABC"
, 24, 18000],
[
"EFG"
, 30, 30000],
[
"IJK"
, 28, 41000],
[
"EFG"
, 31, 28000],
];
for
(
var
i = 0; i < salary.length; i++) {
document.write(salary[i] +
"<br>"
);
}
</script>
Output:
ABC, 24, 18000 EFG, 30, 30000 IJK, 28, 41000 EFG, 31, 28000 EFG, 29, 35000
- Example 3:
// Prints a simple multidimensional array in JavaScript
// where we just print the salary of a specific person
<script>
var
salary = [
[
"ABC"
, 24, 18000],
[
"EFG"
, 30, 30000],
[
"IJK"
, 28, 41000],
[
"EFG"
, 31, 28000],
];
document.write(
"salary of 2nd person : "
+ salary[1][2] +
"<br>"
);
document.write(
"salary of 4th person : "
+ salary[3][2] +
"<br>"
);
</script>
Output:
salary of 2nd person : 30000 salary of 4th person : 28000
- Example 4:
// Prints a simple multidimensional array in
// JavaScript where we add elements in the array
// using simple square bracket and push() method
<script>
var
salary = [
[
"ABC"
, 24, 18000],
[
"EFG"
, 30, 30000],
[
"IJK"
, 28, 41000],
[
"EFG"
, 31, 28000],
];
// Prints first array
document.write(
"Original array :<br>"
);
for
(
var
i = 0; i < salary.length; i++) {
document.write(salary[i] +
"<br>"
);
}
// Adding "India" at the 4th index of 4th sub array
salary[3][3] =
"India"
;
document.write(
"<br>after adding \"India\" at the 4th array :<br>"
);
for
(
var
i = 0; i < salary.length; i++) {
document.write(salary[i] +
"<br>"
);
}
document.write(
"<br>after adding \"USA\" and \"Canada\" "
+
"at the 3rd array using \"push()\" method :<br>"
);
salary[2].push(
"USA"
,
"Canada"
);
// Adding "USA" and "Canada" in the 2nd sub-array
for
(
var
i = 0; i < salary.length; i++) {
document.write(salary[i] +
"<br>"
);
}
</script>
Output:
Original array : ABC, 24, 18000 EFG, 30, 30000 IJK, 28, 41000 EFG, 31, 28000 after adding "India" at the 4th array : ABC, 24, 18000 EFG, 30, 30000 IJK, 28, 41000 EFG, 31, 28000, India after adding "USA" and "Canada" at the 3rd array using "push()" method : ABC, 24, 18000 EFG, 30, 30000 IJK, 28, 41000, USA, Canada EFG, 31, 28000, India
- Example 5:
// Prints a simple multidimensional array in
// JavaScript where we add a new inner array
<script>
var
salary = [
[
"ABC"
, 24, 18000],
[
"EFG"
, 30, 30000],
[
"IJK"
, 28, 41000],
[
"EFG"
, 31, 28000],
];
// Prints first array
document.write(
"Original array :<br>"
);
for
(
var
i = 0; i < salary.length; i++) {
document.write(salary[i] +
"<br>"
);
}
document.write(
"<br>After adding a new inner array :<br>"
);
// Pushing a new sub-array
salary.push([
"MNO"
, 29, 33300]);
for
(
var
i = 0; i < salary.length; i++) {
document.write(salary[i] +
"<br>"
);
}
</script>
Output:
Original array : ABC, 24, 18000 EFG, 30, 30000 IJK, 28, 41000 EFG, 31, 28000 After adding a new inner array : ABC, 24, 18000 EFG, 30, 30000 IJK, 28, 41000 EFG, 31, 28000 MNO, 29, 33300
- Example 6:
// Prints a simple multidimensional array in
// JavaScript where we remove a single element
//and a entire sub-array
<script>
var
salary = [
[
"ABC"
, 24, 18000],
[
"EFG"
, 30, 30000],
[
"IJK"
, 28, 41000],
[
"EFG"
, 31, 28000],
];
// Prints first array
document.write(
"Original array :<br>"
);
for
(
var
i = 0; i < salary.length; i++) {
document.write(salary[i] +
"<br>"
);
}
document.write(
"<br>After removing last element "
+
"of last inner array :<br>"
);
// Removes the last element of 3rd sub-array
salary[3].pop();
for
(
var
i = 0; i < salary.length; i++) {
document.write(salary[i] +
"<br>"
);
}
document.write(
"<br>After removing last inner array :<br>"
);
// Removes last sub-array
salary.pop();
for
(
var
i = 0; i < salary.length; i++) {
document.write(salary[i] +
"<br>"
);
}
</script>
Output:
Original array : ABC, 24, 18000 EFG, 30, 30000 IJK, 28, 41000 EFG, 31, 28000 After removing last element of last inner array : ABC, 24, 18000 EFG, 30, 30000 IJK, 28, 41000 EFG, 31 After removing last inner array : ABC, 24, 18000 EFG, 30, 30000 IJK, 28, 41000