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
Picking the largest elements from multidimensional array in JavaScript
Given a multidimensional array, we need to pick the largest elements from each subarray in JavaScript.
The multidimensional arrays are arrays inside an array. Whenever there are arrays inside the array, it works as a multidimensional array.
Following is a one-dimensional array:
const arr = ["Welcome", "to", "tutorials", "point"]; const numbers = [1, 5, 12, 67, 99];
This is how a multidimensional array looks like:
const array = [["Mike tyson", "Vijay"], ["ananya", "charmee"], ["Lion", "Tiger"]];
This is how we can access elements from a multidimensional array:
<!DOCTYPE html> <html> <body> <script> const array = [["Mike tyson", "Vijay"], ["ananya", "charmee"], ["Lion", "Tiger"]]; // Access the first subarray console.log(array[0]); // ["Mike tyson", "Vijay"] // Access the first item in second subarray console.log(array[1][0]); // "ananya" // Access the second element in the third subarray console.log(array[2][1]); // "Tiger" </script> </body> </html>
["Mike tyson", "Vijay"] ananya Tiger
Using Math.max() Method with For Loop
We can pick the largest elements from a multidimensional array by using Math.max() method and for loop.
The Math.max() method returns the highest value number given in input parameters, and NaN if the parameters passed are not numbers.
console.log(Math.max(65, 45, 21)); // 65
console.log(Math.max("hello", "varma")); // NaN
65 NaN
Example
In the example below, we have created a multidimensional array and an empty array that will hold all the largest numbers from every subarray. The Math.max() method picks the largest number in each subarray using the spread operator.
<!DOCTYPE html>
<html>
<head>
<title>Picking the largest elements from multidimensional array</title>
</head>
<body>
<button onClick="func()">Click!</button>
<p id="para"></p>
<script>
const array = [[23, 45, 22], [45, 55, 11], [66, 99, 200], [43, 76, 2022]];
function func(){
function findLargest(array) {
var largestElements = []
var x = 0;
var len = array.length;
for (x; x < len; x++) {
largestElements.push(Math.max(...array[x]))
}
return largestElements;
}
document.getElementById("para").innerHTML = findLargest(array);
}
</script>
</body>
</html>
45,55,200,2022
Using forEach() Method
The forEach() method calls a specified function for every element in the array. This method will not execute for empty elements.
Syntax
array.forEach(function(currentValue, index, arr));
The following are the parameters:
- function - A function that will execute on every element
- currentValue - The current element being processed
- index - The index of the current element
- arr - The array of the current element
Example
In the following example, we use forEach() to iterate through each subarray and find the maximum value.
<!DOCTYPE html>
<html>
<head>
<title>Using forEach to find largest elements</title>
</head>
<body>
<button onClick="func()">Click!</button>
<p id="para"></p>
<script>
const array = [[87, 54, 76], [76, 98, 90], [12, 45, 82], [65, 98, 78]];
function func(){
function findLargest(array) {
var largestElements = []
array.forEach(function(subArray){
largestElements.push(Math.max(...subArray))
})
return largestElements;
}
document.getElementById("para").innerHTML = findLargest(array);
}
</script>
</body>
</html>
87,98,82,98
Using apply() Method
The apply() method calls a function with a given value and arguments provided as an array.
When you pass an array directly to Math.max(), it returns NaN:
const array = [32, 65, 12, 64]; console.log(Math.max(array)); // NaN console.log(Math.max.apply(null, array)); // 65
NaN 65
Using map() Method
The map() method creates a new array by calling a specified function for each array element.
Syntax
array.map(function(currentValue, index, arr))
Example
Following is the program where we use map() method to loop through each subarray and apply Math.max() to pick the largest number.
<!DOCTYPE html>
<html>
<head>
<title>Using map to find largest elements</title>
</head>
<body>
<button onClick="func()">Click me!</button>
<p id="para"></p>
<script>
const array = [[87, 54, 76], [76, 98, 90], [12, 45, 82], [65, 98, 78]];
function func(){
function findLargestElements(array) {
return array.map(function(subArray) {
return Math.max.apply(null, subArray);
});
}
document.getElementById("para").innerHTML = findLargestElements(array);
}
</script>
</body>
</html>
87,98,82,98
Comparison of Methods
| Method | Creates New Array | Readability | Performance |
|---|---|---|---|
| For Loop | No | Good | Fastest |
| forEach() | No | Good | Medium |
| map() | Yes | Best | Medium |
Conclusion
All methods effectively find the largest elements from multidimensional arrays. Use map() for functional programming style, forEach() for imperative approach, or for loops for maximum performance.
3K+ Views
