The JavaScript language does not inherently accommodate multidimensional arrays. To create a multidimensional array, one needs to utilize an additional one-dimensional array to simulate the behavior of a multidimensional array. Consequently, in JavaScript, these multidimensional arrays are essentially arrays nested within other arrays.
The main array is composed of various elements arranged as a multidimensional array; it is necessary to embed certain arrays within other arrays. In the JavaScript programming language, this array functions as the multidimensional array that will accommodate the additional arrays. Similar to how one would define a standard one-dimensional array, a multidimensional array can be established using the same approach.
Multidimensional arrays are advantageous when it comes to representing data in a tabular format, like a matrix composed of rows and columns. To create a two-dimensional array, enclose each array within its own set of curly braces.
Way to use JavaScript multidimensional array
The subsequent methods can be employed to establish and manage multidimensional arrays.
First Way
The various array variables generate and utilize several values within the brackets.
To begin, create several one-dimensional arrays containing these specified values:
var arr_var1 = ["val1", 24, 20000];
var arr_var2 = ["val2", 18, 30600];
var arr_var3 = ["val3", 22, 42360];
var arr_var4 = ["val4", 38, 59600];
var arr_var5 = ["val5", 24, 38700];
Since "arr_var1" is already defined as a one-dimensional array, its structure is akin to that of other arrays.
var final_array = [arr_var1, arr_var2, arr_var3, arr_var4, arr_var5];
Second way
The individual variable utilizes various elements from one array within another array.
var final_array = [["val1", 24, 20000], ["val2", 18, 30600], ["val3", 22, 42360], ["val4", 38, 59600]];
Examples
The illustration demonstrates various methods of utilizing a multidimensional array along with its capabilities.
Example 1: The subsequent illustration demonstrates a JavaScript iterable that utilizes the integers contained within an array. It is possible to employ several variables within a single array variable, allowing for the inclusion of multiple data points.
<!DOCTYPE html>
<html>
<body>
<h2> JavaScript multidimensional array and its functionality </h2>
<p> The Javascript adds each array inside its own pair of curly braces to make a multidimensional array.
</p>
<p> Please see the console tab to get the output. </p>
<script>
var arr_var1 = ["val1", 24, 20000];
var arr_var2 = ["val2", 18, 30600];
var arr_var3 = ["val3", 22, 42360];
var arr_var4 = ["val4", 38, 59600];
var arr_var5 = ["val5", 24, 38700];
var final_array = [arr_var1, arr_var2, arr_var3, arr_var4, arr_var5];
console.log(final_array);
console.log(final_array[3][1]);
</script>
</body>
</html>
Output
The function for multidimensional arrays displays the information contained within the array.
Example 2: The subsequent illustration demonstrates a JavaScript iterable utilizing an array of numbers. We can apply multiple sets of brackets within the data contained in the array brackets.
<!DOCTYPE html>
<html>
<body>
<h2> JavaScript multidimensional array and its functionality </h2>
<p> The Javascript adds each array inside its pair of curly braces to make a multidimensional array.
</p>
<p> Please see the console tab to get the output. </p>
<script>
var final_array = [["val1", 24, 20000], ["val2", 18, 30600], ["val3", 22, 42360], ["val4", 38, 59600]];
console.log(final_array);
console.log(final_array[2][1]);
</script>
</body>
</html>
Output
The function for multidimensional arrays displays the data contained within the array.
Methods used in the JavaScript multidimensional array
The insert, save, add, remove, and other operations use with the javascript multidimensional array. We can use the following methods in the javascript multidimensional array.
- Pop method
- Push method
- Sort method
- Reverse method
- Indexof method
- Shift method
- Unshift method
- Splice method
Pop method
This method removes the element located at the final index of the array. Consequently, this action will lead to a decrease in the array's length by one.
For instance, the subsequent illustration demonstrates a JavaScript multidimensional array containing the array's numerical values. We can utilize a multidimensional array that excludes certain values.
<!DOCTYPE html>
<html>
<body>
<h3> JavaScript multidimensional Array and its Method </h3>
<p> The Javascript adds multiple curly braces to make a multidimensional array. The method eliminates the element in the array with the last index.
</p>
<p> Please see the console tab after clicking the button to get output. </p>
<button type = "button" onclick = "shows_array()"> Click Here. </button>
<script>
function shows_array(){
var final_array = [["val1", 24, 20000], ["val2", 18, 30600], ["val3", 22, 42360], ["val4", 38, 59600]];
console.log(final_array);
final_array.pop();
console.log(final_array);
final_array.pop();
console.log(final_array);
}
</script>
</body>
</html>
Output
The function for multidimensional arrays displays the array information utilizing the pop method.
Push method
By employing this method, we can append a new element to the conclusion of the array. This action will ultimately lead to an increase of 1 in the total length of the array.
For instance, the subsequent illustration demonstrates a JavaScript multidimensional array that contains numerical values. We can utilize a multidimensional array to insert values as needed.
<!DOCTYPE html>
<html>
<body>
<h3> JavaScript multidimensional Array with push Method </h3>
<p> The Javascript adds multiple curly braces to make a multidimensional array. The method inserts a new element in the array with the last index.
</p>
<p> Please see the console tab after clicking the button to get output. </p>
<button type = "button" onclick = "shows_array()"> Click Here. </button>
<script>
function shows_array(){
var final_array = [["val1", 24, 20000], ["val2", 18, 30600], ["val3", 22, 42360], ["val4", 38, 59600]];
console.log(final_array);
final_array.push(["val5", 28, 19600]);
console.log(final_array);
final_array[1].push(['19600']);
console.log(final_array);
}
</script>
</body>
</html>
Output
The function for handling multidimensional arrays displays the data contained within the array by utilizing the push method.
Sort method
This approach has the capability to arrange the elements of the array either in numerical order or alphabetically, based on the type of array indicated. Furthermore, the arrangement of the array will be altered permanently when utilizing the Sort method.
For instance, the subsequent illustration demonstrates a JavaScript multidimensional array containing numerical values. We can implement a sorting technique incrementally on a multidimensional array.
<!DOCTYPE html>
<html>
<body>
<h3> JavaScript multidimensional Array with sort Method </h3>
<p> The Javascript adds multiple curly braces to make a multidimensional array. The method sorts the element in the array with the incremental first index value.
</p>
<p> Please see the console tab after clicking the button to get output. </p>
<button type = "button" onclick = "shows_array()"> Click Here. </button>
<script>
function shows_array(){
var final_array = [[4,"val1", 24, 20000], [2, "val2", 18, 30600], [1, "val3", 22, 42360], [3, "val4", 38, 59600]];
final_array.sort();
console.log(final_array);
}
</script>
</body>
</html>
<!DOCTYPE html>
Output
The function for multidimensional arrays displays the data within the array utilizing the sort method.
Reverse method
This technique is employed to invert the elements of an array. The process demonstrates that the element located at the first index is shifted to the last position, while the element at the last index is moved to the first position.
For instance, the example below illustrates a JavaScript multidimensional array containing numerical values. We can employ a multidimensional array alongside a sorting algorithm to arrange its elements in an incremental manner.
<!DOCTYPE html>
<html>
<body>
<h3> JavaScript multidimensional Array with reverse Method </h3>
<p> The Javascript adds multiple curly braces to make a multidimensional array. The method displays the element in the array with the reverse multiple array's value.
</p>
<p> Please see the console tab after clicking the button to get output. </p>
<button type = "button" onclick = "shows_array()"> Click Here. </button>
<script>
function shows_array(){
var final_array = [[4,"val1", 24, 20000], [2, "val2", 18, 30600], [1, "val3", 22, 42360], [3, "val4", 38, 59600]];
final_array.reverse();
console.log(final_array);
}
</script>
</body>
</html>
Output
The function for multidimensional arrays displays the array data utilizing the reverse method.
Indexof method
You can locate the index of the first occurrence of a particular element within a multidimensional array by employing this method. If the element is absent, the function will yield -1.
Illustration: The subsequent illustration demonstrates a JavaScript multidimensional array along with a method that functions on its elements. By utilizing a multidimensional array in conjunction with the index method, we can retrieve both the index and the corresponding value.
<!DOCTYPE html>
<html>
<body>
<h3> JavaScript multidimensional Array with unshift Method </h3>
<p> The Javascript adds multiple curly braces to make a multidimensional array. The method adds the element in the multiple arrays with the array's value.
</p>
<p id = "id_data"> </p>
<button type = "button" onclick = "shows_array()"> Click Here. </button>
<script>
function shows_array(){
var final_array = [[1,"val1", 24, 20000], [2, "val2", 18, 30600], [3, "val3", 22, 42360], [4, "val4", 38, 59600]];
var id = 'val3';
function index(id, arrays) {
for (var i=0; i<arrays.length; i++) {
for (var j=0; j<arrays[i].length; j++) {
if (arrays[i][j] == id) { return i; }
}
}
return -1;
}
document.getElementById('id_data').innerHTML = "Index of the Id: " +index(id, final_array);
console.log(index(id, final_array));
}
</script>
</body>
</html>
Output
The function for multidimensional arrays displays the array data utilizing the IndexOf method.
Shift method
When employing this method, the initial element of the array gets deleted, and the remaining elements are subsequently moved to the left to fill the gap left by the removed value.
For instance, the subsequent illustration demonstrates the operation of the shifting method on a JavaScript multidimensional array. By employing a multidimensional array alongside the shift method, we can modify the arrangement of elements towards the left.
<!DOCTYPE html>
<html>
<body>
<h3> JavaScript multidimensional Array with shift Method </h3>
<p> The Javascript adds multiple curly braces to make a multidimensional array. The method removes the element in the multiple arrays with the array's value.</p>
<p> Please see the console tab after clicking the button to get output. </p>
<button type = "button" onclick = "shows_array()"> Click Here. </button>
<script>
function shows_array(){
var final_array = [[1,"val1", 24, 20000], [2, "val2", 18, 30600], [3, "val3", 22, 42360], [4, "val4", 38, 59600]];
console.log(final_array.shift());
console.log(final_array);
}
</script>
</body>
</html>
Output
The function for multidimensional arrays utilizes the shift method to display the data contained within the array.
Unshift method
In order to move an array to the right utilizing this method, a new element is inserted at the 0 index, and every other element is subsequently shifted one position to the right within the array.
For instance, the subsequent illustration demonstrates a JavaScript multidimensional array where the unshift method is applied to its elements. The unshift method allows us to incorporate new elements into a multidimensional array.
<!DOCTYPE html>
<html>
<body>
<h3> JavaScript multidimensional Array with unshift Method </h3>
<p> The Javascript adds multiple curly braces to make a multidimensional array. The method adds the element in the multiple arrays with the array's value.
</p>
<p> Please see the console tab after clicking the button to get output. </p>
<button type = "button" onclick = "shows_array()"> Click Here. </button>
<script>
function shows_array(){
var final_array = [[1,"val1", 24, 20000], [2, "val2", 18, 30600], [3, "val3", 22, 42360], [4, "val4", 38, 59600]];
console.log(final_array.unshift([5, "val5", 19, 20000]));
console.log(final_array);
}
</script>
</body>
</html>
Output
The function for multidimensional arrays demonstrates the utilization of the unshift method to display the array data.
Splice method
This method is capable of inserting or deleting any kind of element from the array.
For instance, the subsequent illustration demonstrates the use of the splice method on a JavaScript multidimensional array, interacting with its elements. By utilizing a multidimensional array in conjunction with the splice method, we can effectively insert and eliminate elements as needed.
<!DOCTYPE html>
<html>
<body>
<h3> JavaScript multidimensional Array with splice Method </h3>
<p> The Javascript adds multiple curly braces to make a multidimensional array. The method adds and removes the element in the multiple arrays with the array's value.
</p>
<p> Please see the console tab after clicking the button to get output. </p>
<button type = "button" onclick = "shows_array()"> Click Here. </button>
<script>
function shows_array(){
var final_array = [[1,"val1", 24, 20000], [2, "val2", 18, 30600], [3, "val3", 22, 42360], [4, "val4", 38, 59600]];
//remove one element from 1 index
final_array.splice(1,1)
console.log(final_array);
//remove three elements from 1 index
final_array.splice(1,3)
console.log(final_array);
final_array.splice(0,1,[5, "val5", 19, 20000])
console.log(final_array);
}
</script>
</body>
</html>
Output
The function for multidimensional arrays demonstrates the array data utilizing the splice method.
Conclusion
The multidimensional array in JavaScript serves the purpose of managing multiple sets of data. It interacts with various JavaScript functions to process user information effectively.