How to check Min and Max values simultaneously in JavaScript?

Question

I'm not sure if I understand correctly: retrieving data is much slower than running a logical operation on that data. So, instead of:

var maxX = Math.max.apply(Math, data.map(function(o) { return o[xAxis]; }));
var minY = Math.min.apply(Math, data.map(function(o) { return o[xAxis]; }));
var maxY = Math.max.apply(Math, data.map(function(o) { return o[yAxis]; }));
var minY = Math.min.apply(Math, data.map(function(o) { return o[yAxis]; }));

can I check for both min/max by traversing the data set only once, and perhaps check for X and Y also at the same time (since data is an array of JSON objects in this case)? And would this have any performance benefit in client(browser) or server(ex. Node.js)?

Thanks for any explanation.

Sample data:

[
 { date: '10.10.2000', xAxis: 20.9, yAxis: 120 },
 { date: '11.10.2000', xAxis: 35.1, yAxis: 121 },
 { date: '12.10.2000', xAxis: 21.2, yAxis: 109 },
 { date: '13.10.2000', xAxis: 28.4, yAxis: 119 },
 { date: '14.10.2000', xAxis: 24.4, yAxis: 121 }
]

Is that size a representative size or is it going to blow up? — Carlos Bribiescas, May 21 '15 at 13:01

Salman A · Accepted Answer · 2015-05-21T13:21:43.217

You can use Array.reduce to calculate all four values in one go:

var data = [
    { date: '10.10.2000', xAxis: 20.9, yAxis: 120 }, 
    { date: '11.10.2000', xAxis: 35.1, yAxis: 121 }, 
    { date: '12.10.2000', xAxis: 21.2, yAxis: 109 },
    { date: '13.10.2000', xAxis: 28.4, yAxis: 119 }, 
    { date: '14.10.2000', xAxis: 24.4, yAxis: 121 }
];

var init = {
    xMin: data[0].xAxis,
    xMax: data[0].xAxis,
    yMin: data[0].yAxis,
    yMax: data[0].yAxis
};

var result = data.reduce(function(previtem, curritem) {
    if (previtem.xMin > curritem.xAxis) previtem.xMin = curritem.xAxis;
    if (previtem.xMax < curritem.xAxis) previtem.xMax = curritem.xAxis;
    if (previtem.yMin > curritem.yAxis) previtem.yMin = curritem.yAxis;
    if (previtem.yMax < curritem.yAxis) previtem.yMax = curritem.yAxis;
    return previtem;
}, init);

console.log(result);
// { xMin: 20.9, xMax: 35.1, yMin: 109, yMax: 121 }

great, I wasn't aware of .reduce() thanks, I'll try it out and see at what point there are performance gains, if any. — Rafael Emshoff, May 21 '15 at 14:01

Carlos Bribiescas · Answer 2 · 2015-05-21T12:56:59.620

0

You would have to write a function that does this traversal yourself and returns an array or object with min/max instead of just a single value. To my knowledge, that function isn't stock implemented.

A function like this wouldn't be terrible to write. Look at the how it does it in the Min or max example, then copy it w/reuse of the existing min/max functions and save two values instead of one.

edited May 21 '15 at 12:56

answered May 21 '15 at 12:48

Carlos Bribiescas

4,197
9
35
66

score -2 · Answer 3 · answered May 21 '15 at 13:22

You can just use Array's sort:

var data = [
 { date: '10.10.2000', xAxis: 20.9, yAxis: 120 },
 { date: '11.10.2000', xAxis: 35.1, yAxis: 121 },
 { date: '12.10.2000', xAxis: 21.2, yAxis: 109 },
 { date: '13.10.2000', xAxis: 28.4, yAxis: 119 },
 { date: '14.10.2000', xAxis: 24.4, yAxis: 121 }
];

var maxY = data.sort(function(a,b){ return b.yAxis - a.yAxis; })[0].yAxis;
var maxX = data.sort(function(a,b){ return b.xAxis - a.xAxis; })[0].xAxis;

var minY = data.sort(function(a,b){ return a.yAxis - b.yAxis; })[0].yAxis;
var minX = data.sort(function(a,b){ return a.xAxis - b.xAxis; })[0].xAxis;

console.log("maxY:",maxY,"maxX:",maxX,"minY:",minY,"minX",minX);

Yes, but I end up traversing the entire array 4 times as well. Which I want to avoid the larger the data set gets. — Rafael Emshoff, May 21 '15 at 14:02
Ok, gotcha. Then I would go with Salman's solution using reduce. — Hoyen, May 21 '15 at 14:37

How to check Min and Max values simultaneously in JavaScript?

3 Answers3

Linked