{"id":158,"date":"2021-06-16T11:41:31","date_gmt":"2021-06-16T16:41:31","guid":{"rendered":"https:\/\/www.flom.com\/?p=158"},"modified":"2025-11-04T14:53:42","modified_gmt":"2025-11-04T20:53:42","slug":"use-reduce-to-find-largest-smallest-value-at-index-in-array","status":"publish","type":"post","link":"https:\/\/www.flom.com\/?p=158","title":{"rendered":"Use reduce to find largest\/smallest value at index in array"},"content":{"rendered":"

I recently found a chunk of code to iterate through an array and find at what index the largest or smallest value exists using the reduce method. It’s very condensed and seems super efficient.<\/p>\r\n

console.log([...Array(8)]\r\n    .map(n => parseInt(giveMeANumber()))\r\n    .reduce((p, c, i, a) => c > a[p] ? i : p, 0));<\/pre>\r\n
So here is what’s happening in order. First an array is initialized. The spread operator (…) is used to create the new Array of length 8. The spread operator spreads out the elements of the array. Here’s what that looks like.<\/p>\r\n\r\n
[...Array(8)]; 
[undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined]<\/pre>\r\n\r\n\r\n\r\n
Second we are using the map method to place an integer value in each index of the Array calling the, as yet, undefined function giveMeANumber(). Which in practice would return an int or the string version of an int and not duplicate any values. Which would look like this.<\/p>\r\n\r\n\r\n\r\n
[...Array(8)].map(n => parseInt(giveMeANumber())); 
[3, 5, 4, 9, 6, 1, 2, 0]<\/pre>\r\n\r\n\r\n\r\n
We are using the arrow function (=>) inside the map function to further simplify the code. Essentially,<\/p>\r\n\r\n\r\n\r\n
n => parseInt(giveMeANumber());<\/pre>\r\n\r\n\r\n\r\n
Is the same as:<\/p>\r\n\r\n\r\n\r\n
function (n) { parseInt(giveMeANumber()); }<\/pre>\r\n\r\n\r\n\r\n
Now we get to the meat of what is really happening here, the reduce method. Here is the definition from Mozilla. The\u00a0<\/code><\/code>reduce()<\/strong>\u00a0method executes a\u00a0reducer<\/strong>\u00a0function (that you provide) on each element of the array, resulting in a single output value.<\/p>\r\n\r\n\r\n\r\n
The\u00a0reducer<\/strong>\u00a0function takes four arguments:<\/p>\r\n\r\n\r\n\r\n
    \r\n
  1. Accumulator<\/li>\r\n
  2. Current Value<\/li>\r\n
  3. Current Index<\/li>\r\n
  4. Source Array<\/li>\r\n<\/ol>\r\n\r\n\r\n\r\n
    Your\u00a0reducer<\/strong>\u00a0function’s returned value is assigned to the accumulator, whose value is remembered across each iteration throughout the array, and ultimately becomes the final, single resulting value.<\/p>\r\n\r\n\r\n\r\n
    So our reducer function in this case is:<\/p>\r\n\r\n\r\n\r\n
    (p, c, i, a) => c > a[p] ? i : p<\/pre>\r\n\r\n\r\n\r\n
    “p” stands for “previous” [previous array index] or Accumulator<\/p>\r\n\r\n\r\n\r\n
    “c” stands for “current” [array value] or Current Value<\/p>\r\n\r\n\r\n\r\n
    “I” stands for current “index” [of array] or Current Index<\/p>\r\n\r\n\r\n\r\n
    “a” stands for the full “array” [array] or Source Array<\/p>\r\n\r\n\r\n\r\n
    You can see we are using the the arrow function (=>) again here. And we are also using the Conditional (ternary) operator (?,:) to make the conditional more condensed. Which makes the below two functions identical.<\/p>\r\n\r\n\r\n\r\n
    (p, c, i, a) => c > a[p] ? i : p \r\n\r\nfunction (p, c, i, a) { \r\n    if (c > a[p]) { \r\n        return i;\r\n    } else { \r\n        return p; \r\n    } \r\n}<\/pre>\r\n\r\n\r\n\r\n
    All we are saying here is if the current value (c) is greater than the array (a) value at the previous index (p) then return the current index (i) or else return the previous index (p).<\/p>\r\n\r\n\r\n\r\n
    You could just switch the operator to find the smallest:<\/p>\r\n\r\n\r\n\r\n
    c < a[p]<\/pre>\r\n\r\n\r\n\r\n
    So, running the complete code would look like this given that we are getting the same array from the map method above<\/p>\r\n\r\n\r\n\r\n
    > console.log([...Array(8)] \r\n    .map(n => parseInt(giveMeANumber())) \r\n    .reduce((p, c, i, a) => c > a[p] ? i : p, 0)); \r\n> 3<\/pre>\r\n\r\n\r\n\r\n
    So, given our array above, it is correctly returning 3. Which is the index of the highest number in the array (9).<\/p>\r\n","protected":false},"excerpt":{"rendered":"
    I recently found a chunk of code to iterate through an array and find at what index the largest or […]<\/p>\n","protected":false},"author":1,"featured_media":490,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_uag_custom_page_level_css":"","site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"default","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[12,11],"tags":[],"class_list":["post-158","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-development","category-javascriptjquery"],"uagb_featured_image_src":{"full":["https:\/\/www.flom.com\/wp-content\/uploads\/2021\/06\/image-233c418d-595c-4393-98c7-0072054c4034.png",1024,1024,false],"thumbnail":["https:\/\/www.flom.com\/wp-content\/uploads\/2021\/06\/image-233c418d-595c-4393-98c7-0072054c4034-150x150.png",150,150,true],"medium":["https:\/\/www.flom.com\/wp-content\/uploads\/2021\/06\/image-233c418d-595c-4393-98c7-0072054c4034-300x300.png",300,300,true],"medium_large":["https:\/\/www.flom.com\/wp-content\/uploads\/2021\/06\/image-233c418d-595c-4393-98c7-0072054c4034-768x768.png",768,768,true],"large":["https:\/\/www.flom.com\/wp-content\/uploads\/2021\/06\/image-233c418d-595c-4393-98c7-0072054c4034.png",1024,1024,false],"1536x1536":["https:\/\/www.flom.com\/wp-content\/uploads\/2021\/06\/image-233c418d-595c-4393-98c7-0072054c4034.png",1024,1024,false],"2048x2048":["https:\/\/www.flom.com\/wp-content\/uploads\/2021\/06\/image-233c418d-595c-4393-98c7-0072054c4034.png",1024,1024,false]},"uagb_author_info":{"display_name":"Todd Flom","author_link":"https:\/\/www.flom.com\/?author=1"},"uagb_comment_info":5,"uagb_excerpt":"I recently found a chunk of code to iterate through an array and find at what index the largest or […]","_links":{"self":[{"href":"https:\/\/www.flom.com\/index.php?rest_route=\/wp\/v2\/posts\/158","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.flom.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.flom.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.flom.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.flom.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=158"}],"version-history":[{"count":10,"href":"https:\/\/www.flom.com\/index.php?rest_route=\/wp\/v2\/posts\/158\/revisions"}],"predecessor-version":[{"id":471,"href":"https:\/\/www.flom.com\/index.php?rest_route=\/wp\/v2\/posts\/158\/revisions\/471"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.flom.com\/index.php?rest_route=\/wp\/v2\/media\/490"}],"wp:attachment":[{"href":"https:\/\/www.flom.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=158"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.flom.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=158"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.flom.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=158"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}