Using The .reduce() Method To Find Min and Max Values Of An Array In JavaScript

A few days ago I was learning a bit more about the Array Data Type and trying my hands on a few problems to have a better understanding of how things work. And there was a particular problem I was presented with.

For the purpose of this tutorial, I'll rephrase the question to fit into this context.

I was given an array that looked like this:

array = [4, 5, 8, 11, 95, 20]

and was told to console.log the highest(Max) number in the array. Now, as you know, there are a ton of ways to do this in JavaScript, or pretty much any programming language out there, but today we're looking at how to solve this problem with the JavaScript ''array.prototype.reduce()" function.

It was quite funny because no one was talking about this.

What exactly is the .reduce() function and what does it do? According to the Mozilla MDN Web

The reduce() method executes a reducer function (that you provide) on each element of the array, resulting in a single output value.

Ugh! So many big words! Tsk! 😐

The .reduce() method can be used for a whole lot more. Like finding the summation of numbers in an array of numbers. You can (& should) read more about the .reduce() method on MDN WEB Docs

I'm not gonna lie, it took longer than I thought to fully understand how this works with the .reduce() method. Even worse was the fact that the code I saw it being used in was written with a *ternary operator. pulls hair!*.

Enough talk. Let's dive into some code!

Let's find the highest number in this array:

numbers = [3, 5, 1, 77, 2, 3];

highestNumber = numbers.reduce((accumulator, currentValue) => {
    if (accumulator > currentValue) {
            return accumulator; 
    } else return currentValue;
});

console.log("Max Number = " + highestNumber)
//expected output = "Max Number = 77"

And to find the Lowest(Min), you simply need to first return the should look like this:

numbers = [3, 5, 1, 77, 2, 3];

lowestNumber = numbers.reduce((accumulator, currentValue) => {
    if (accumulator > currentValue) {
            return currentValue; 
    } else return accumulator;
});

console.log("Min Number = " + lowestNumber)
//expected output = "Min Number = 1"

All together should look like this:

//Find Max Number 👇🏾
numbers = [3, 5, 1, 77, 2, 3];

highestNumber = numbers.reduce((accumulator, currentValue) => {
    if (accumulator > currentValue) {
            return accumulator; 
    } else return currentValue;
});

console.log("Max Number = " + highestNumber)
//expected output = "Max Number =  77"

//Find Min Number 👇🏾
numbers = [3, 5, 1, 77, 2, 3];

lowestNumber = numbers.reduce((accumulator, currentValue) => {
    if (accumulator > currentValue) {
            return currentValue; 
    } else return accumulator;
});

console.log("Min Number = " + lowestNumber)
//expected output = "Min Number = 1"

Another fancy way to write this with a lot less code using ES6 arrow function, shortening the variable names and the mildly annoying but cute ternary operator:

//MAX Number 👇🏾
numbers = [3, 5, 1, 77, 2, 3];

highestNumber = numbers.reduce((acc, curr) => acc > curr ? acc: curr);

console.log("Max Number = " + highestNumber)
//expected output = "Max Number =  77"

//MIN Number 👇🏾
numbers = [3, 5, 1, 77, 2, 3];

lowestNumber = numbers.reduce((acc, curr) => acc > curr ? curr : acc);

console.log("Min Number = " + lowestNumber)
//expected output = "Min Number =  1"

Ugh! So orgasmic! 😍

So, there you have it! A quick way to find the highest(Maximum) and/or Lowest(Minimum) number in an array of numbers.

happy coding!

Using The .reduce() Method To Find Min and Max Values Of An Array In JavaScript

JS Fiddle Link Here