Find the min/max element of an array in JavaScript

Battle-tested approaches for min/max

1. The space-age ES6 magic

In a world full of unicorns and rainbows, where all JavaScript versions support ES6, spread operator is king:

let myArray = [23, 99, 68, -5, 0];
console.log(Math.min(...myArray)); // -5, colder than a polar bear's toenails
console.log(Math.max(...myArray)); // 99, hotter than a vindaloo


Insight: The spread syntax (...), in essence, turns your array into individual arguments for Math.min and Math.max functions

2. The classic for-loop strategy

When wrestling with browser compatibility or performance on large datasets, classic loop to the rescue:

let hugeArray = [...]; // Array with a whopping number of elements
let min = Infinity;
let max = -Infinity;

for (let i = 0; i < hugeArray.length; i++) { // Going old school
  min = hugeArray[i] < min ? hugeArray[i] : min;
  max = hugeArray[i] > max ? hugeArray[i] : max;
}


Remember: apply could give you a stack overflow headache, iteration saves you from RangeError hangovers.

3. The reduce to the rescue

Bypass potential call-stack anxiety on massive arrays with the power of reduce:

let immenseArray = [...]; // Imagine this array being larger than the great wall of China
let min = immenseArray.reduce((acc, val) => Math.min(acc, val), Infinity);
let max = immenseArray.reduce((acc, val) => Math.max(acc, val), -Infinity);


Bonus: This approach laughs at arrays of any size - RangeError, we do not fear you anymore!

Potential pitfalls and how to avoid them

Number disguised as String

Numeric strings can boobytrap your array. Always verify before you trust:

let mixedArray = ['10', '20', -5, '3']; // Wolf in sheep's clothing
let numericMin = Math.min(...mixedArray.map(Number)); // Revealed -5
let numericMax = Math.max(...mixedArray.map(Number)); // Revealed 20


Tip: Make sure to unmask those string impostors using .map(Number) before you proceed

Infinity, your friendly sentinel

When searching for min or max, let Infinity and -Infinity be your trusted lookouts:

let myArray = [45, 22, -10, 0]; // A wild array appears
let max = -Infinity, min = Infinity; // Infinity Pokeballs

myArray.forEach(value => { // Let's capture 'em all
  if (value > max) max = value;
  if (value < min) min = value;
});


Why: Because, even if your numbers are all negative, -Infinity convincingly defeats them to find the highest number, and vice versa for min.

When every millisecond counts

For an express ride to the top or bottom of big datasets, consider manual looping with bonus back-to-front action:

let bigArray = [...]; // Array big enough to contain dinosaur fossils
let min = bigArray[bigArray.length - 1]; 
let max = bigArray[bigArray.length - 1];

for (let i = bigArray.length - 2; i >= 0; i--) { // Go back in time
  if (bigArray[i] < min) min = bigArray[i];
  if (bigArray[i] > max) max = bigArray[i];
}


Pro tip: A merry backward dance can save you index arithmetic and occasionally perform a micro-magic in some JavaScript jigs.

Handling errors and performance tips

JavaScript development is a ring of fire, and one should not only deliver punches (code correctly) but also evade them (handle exceptions gracefully). While crafting min/max functions, it pays to have error handling for your stack size limitations. It helps you gauge the safe array sizes and not walk into any unexpected RangeError!

Curiosity around the performance? Use tools like JSPerf to run benchmarks for your unique scenario and suss out which method hustles the best for you. Remember, different JavaScript arenas can yield different champions!