Get the Min/Max Values in an Object in JavaScript

avatar

Borislav Hadzhiev

Fri Oct 08 20212 min read

banner

Photo by Anthony Tori

Get the Min/Max Values in an Object #

To get the min and max values in an Object:

  1. Use the Object.values method to get an array of the object's values.
  2. Using spread syntax, pass the array as an argument to the Math.min and Math.max methods.
  3. The Math.min and Math.max methods return the lowest and highest of the passed in numbers.
index.js
const obj = {num1: 10, num2: 20, num3: 5, num4: 15}; const values = Object.values(obj); console.log(values); // ๐Ÿ‘‰๏ธ [10, 20, 5, 15] const max = Math.max(...values); console.log(max); // ๐Ÿ‘‰๏ธ 20 const min = Math.min(...values); console.log(min); // ๐Ÿ‘‰๏ธ 5

In the code snippet we use the Object.values method to get an array containing all of the object's values.

We can't pass the array directly to the Math.max and Math.min methods, because they expect multiple, comma separated numbers and not an array of numbers.

index.js
const min = Math.min(10, 20, 5, 15); console.log(min); // ๐Ÿ‘‰๏ธ 5 const max = Math.max(10, 20, 5, 15); console.log(max); // ๐Ÿ‘‰๏ธ 20

To get around this we use the spread operator to unpack the values of the array in the call to the min and max methods.

The Object.values and spread operator ... features are not supported in Internet Explorer.

If you have to support Internet Explorer, use the Object.keys and Function.apply methods instead.

To get the min and max values in an Object:

  1. Use the Object.keys method to get an array of the object's keys.
  2. Map over the keys to get an array of the object's values.
  3. Use the apply method on both Math.min and Math.max, passing it null and the array of values as arguments
index.js
// Supported in IE 9-11 const obj = {num1: 10, num2: 20, num3: 5, num4: 15}; const keys = Object.keys(obj); console.log(keys); // ๐Ÿ‘‰๏ธ ['num1', 'num2', 'num3', 'num4'] const values = keys.map(key => { return obj[key]; }); console.log(values); // ๐Ÿ‘‰๏ธ [10, 20, 5, 15] const max = Math.max.apply(null, values); console.log(max); // ๐Ÿ‘‰๏ธ 20 const min = Math.min.apply(null, values); console.log(min); // ๐Ÿ‘‰๏ธ 5

We used the Object.keys method to get an array of the object's keys.

The Object.keys method is supported in Internet Explorer versions 9-11, whereas the Object.values method is not.

We then used the Array.map method to iterate over the keys and get an array of all the values of the object.

We passed the following arguments to the Function.apply method:

  1. the this argument - it's irrelevant for our use case
  2. the array of numbers, which will get passed as arguments to the Math.max and Math.min methods
We use the apply method to unpack the array into comma separated arguments when calling the Math.min and Math.max methods.

This is definitely the longer, more indirect and less elegant solution, however if you have to support Internet Explorer, it gets the job done.

Join my newsletter

I'll send you 1 email a week with links to all of the articles I've written that week

Buy Me A Coffee