Assume we have some array and I want to get the maximum of the elements.
array.sort((a, b) => b - a)[0]
and
array.reduce((a, b) => (a > b) ? a : b)
will both return the maximum.
The question is, which one is preferred?
For a specific case of my project, I could be iterating over 100+ elements, 100+ times which I thought would be big enough to matter for the small performance difference.
array.reduce seems faster..
var numbers = [];
function myFunction(item) {
for (var i = 0 ; i<100000 ; i++)
{
numbers.push(i);
}
var t0 = performance.now();
var x = numbers.reduce((a, b) => (a > b) ? a : b);
var t1 = performance.now()
document.getElementById("timex").innerHTML = (t1 - t0) + " milliseconds";
var t2 = performance.now();
var y = numbers.sort((a, b) => b - a)[0];
var t3 = performance.now();
document.getElementById("timey").innerHTML = (t3 - t2) + " milliseconds";
document.getElementById("reduce").innerHTML = x
document.getElementById("sort").innerHTML = y
}<html>
<body>
<p>Click the button to get the highest numbers in the array.</p>
<button onclick="myFunction()">Try it</button>
<p>Highest number (array.reduce): <span id="reduce"></span> time taken : <span id="timex"></span></p>
<p>Highest number(array.sort): <span id="sort"></span> time taken:<span id="timey"></p>
<script>
</script>
</body>
</html>
jsPerf for performance related stuff. They loop automatically based on few criteria to even test cached values. Second, instead of for(...) { numbers.push(i) }, you can try var numbers = Array.from({length: 100000}. (x,i) => i), if you wish to use ES6 methods
var numbers = [10000]; is not doing anything. Here 10000 will be replaced in loop. So you can ignore this part. Just set it to blank array.
Math.max(...arr)myself