How to use the JavaScript multidimensional array

The JavaScript programming language does not directly support multidimensional arrays. A multidimensional array must be created by employing another one-dimensional array to use something that functions as a multidimensional array. Thus, multidimensional arrays are called arrays inside other arrays in JavaScript.

The primary array has the whole element as a multidimensional array; we need to nest some arrays inside other arrays. The javascript programming language uses that array as the multidimensional array into which the other arrays will be inserted. Just like a typical one-dimensional array, a multidimensional array can be defined in the same method.

Multidimensional arrays are helpful when we want to store data in a tabular form, such as a table with rows and columns. Add each array inside its own pair of curly braces to make a two-dimensional array.

Way to use JavaScript multidimensional array

The following ways use to create and operate multidimensional arrays.

First Way

The different array variables create and use multiple values in the bracket.

First, define some 1D arrays with the following 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];

Because "arr_var1" is already a 1D array, it has a definition similar to other arrays.

Second way

The single variable uses multiple values of the array in the other array.

var final_array = [["val1", 24, 20000], ["val2", 18, 30600], ["val3", 22, 42360], ["val4", 38, 59600]];

Examples

The example shows different ways of the multidimensional array and its functionality.

Example 1: the following example shows javascript iterable with the numbers of the array. We can use multiple variables in a single array variable with multiple pieces of information.

<!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 multidimensional array function shows the array data.

How to use the JavaScript multidimensional array

Example 2: the following example shows javascript iterable with the array numbers. We can use multiple brackets with the information in the array bracket.

<!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 multidimensional array function shows the array data.

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

The method eliminates the element in the array with the last index. Eventually, this will cause the array length to be reduced by 1.

Example: the following example shows a javascript multidimensional array with the numbers of the array. We can use a multidimensional array with the removed 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 multidimensional array function shows the array data with the pop() method.

Push() method

Using this technique, we can add a new element to the array at its end. This will eventually result in an increment of 1 in the array length.

Example: the following example shows a javascript multidimensional array with the numbers of the array. We can use a multidimensional array with the insert values.

<!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 multidimensional array function shows the array data with the push() method.

Sort() method

This method can sort the array elements numerically or alphabetically depending on the specified array type. Additionally, the array's order will be permanently changed using the Sort method.

Example: the following example shows a javascript multidimensional array with the numbers of the array. We can use a multidimensional array with a sorting method incrementally.

<!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 multidimensional array function shows the array data with the sort() method.

Reverse() method

The method is used for reversing the array elements. This procedure shows the result in the first index element becoming the last and the last index element becoming the first.

Example: the following example shows a javascript multidimensional array with the numbers of the array. We can use a multidimensional array with a sorting method incrementally.

<!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 multidimensional array function shows the array data with the reverse() method.

Indexof() method

The index of an initial instance of a specific element in the multidimensionalarray can be found using this technique. The function will return -1 if the element is not present.

Example: the following example shows JavaScript multidimensional array with the method operating to the elements. We can use a multidimensional array with the index () method to get the index and 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 multidimensional array function shows the array data with the Indexof() method.

Shift() method

The first value of the array is removed when using this approach, and the other components are shifted to the left in its place.

Example: the following example shows JavaScript multidimensional array with the shifting method operating to the elements. We can use a multidimensional array with the shift() method to change the position on the left side.

<!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 multidimensional array function shows the array data with the shift() method.

Unshift() method

To shift an array to the right using this approach, a new element is added to the 0 indexes, and all other items are moved to the array's right.

Example: the following example shows JavaScript multidimensional array with the unshifting method operating to the elements. We can use a multidimensional array with unshift() method to add new array elements.

<!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 multidimensional array function shows the array data with the unshift() method.

Splice() method

This technique can add or remove Any type of element from the array.

Example: the following example shows JavaScript multidimensional array with the splice method operating on the elements. We can use a multidimensional array with the splice() method to add and remove elements.

<!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 multidimensional array function shows the array data with the splice() method.