{"id":189810,"date":"2021-02-26T19:42:51","date_gmt":"2021-02-26T16:42:51","guid":{"rendered":"https:\/\/en.buradabiliyorum.com\/the-ins-and-outs-of-javascript-reducer-a-simple-yet-powerful-array-method\/"},"modified":"2021-02-26T19:42:51","modified_gmt":"2021-02-26T16:42:51","slug":"the-ins-and-outs-of-javascript-reducer-a-simple-yet-powerful-array-method","status":"publish","type":"post","link":"https:\/\/buradabiliyorum.com\/en\/the-ins-and-outs-of-javascript-reducer-a-simple-yet-powerful-array-method\/","title":{"rendered":"#The ins and outs of JavaScript reducer \u2014 a simple, yet powerful array method"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_84 counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<label for=\"ez-toc-cssicon-toggle-item-6a2d5264665db\" class=\"ez-toc-cssicon-toggle-label\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #dd3333;color:#dd3333\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #dd3333;color:#dd3333\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/label><input type=\"checkbox\"  id=\"ez-toc-cssicon-toggle-item-6a2d5264665db\" checked aria-label=\"Toggle\" \/><nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/buradabiliyorum.com\/en\/the-ins-and-outs-of-javascript-reducer-a-simple-yet-powerful-array-method\/#Javascript_reduce_method_parameters\" >Javascript reduce method parameters<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/buradabiliyorum.com\/en\/the-ins-and-outs-of-javascript-reducer-a-simple-yet-powerful-array-method\/#When_to_use_JavaScripts_reducer\" >When to use JavaScript\u2019s reducer<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/buradabiliyorum.com\/en\/the-ins-and-outs-of-javascript-reducer-a-simple-yet-powerful-array-method\/#Calculate_the_sum_of_values_in_an_array\" >Calculate the sum of values in an array<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/buradabiliyorum.com\/en\/the-ins-and-outs-of-javascript-reducer-a-simple-yet-powerful-array-method\/#Flatten_an_array\" >Flatten an array<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/buradabiliyorum.com\/en\/the-ins-and-outs-of-javascript-reducer-a-simple-yet-powerful-array-method\/#Grouping_an_array_of_objects_by_a_property\" >Grouping an array of objects by a property<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/buradabiliyorum.com\/en\/the-ins-and-outs-of-javascript-reducer-a-simple-yet-powerful-array-method\/#Using_reduce_in_place_of_filtermap\" >Using reduce() in place of filter().map()<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/buradabiliyorum.com\/en\/the-ins-and-outs-of-javascript-reducer-a-simple-yet-powerful-array-method\/#Build_your_own_reducer\" >Build your own reducer<\/a><\/li><\/ul><\/nav><\/div>\n<p>&#8220;<strong>#The ins and outs of Java<a href=\"https:\/\/buradabiliyorum.com\/en\/category\/download-scripts-themes-apps\/\" data-internallinksmanager029f6b8e52c=\"9\" title=\"Download Scripts &amp; Themes &amp; Apps\" target=\"_blank\" rel=\"noopener\">Script<\/a> reducer \u2014 a simple, yet powerful array method<\/strong>&#8221;<\/p>\n<div>\n                            JavaScript\u2019s <code>reduce<\/code> is one of the most useful array methods that should be in a developer\u2019s arsenal. Introduced in ES5, it\u2019s somewhat similar to <code>for\u2026each<\/code> and <code>map<\/code> methods that are used with arrays, but improves on their performance and simplicity in specific situations.<\/p>\n<p>The <code>reduce<\/code> method executes a callback function that we provide on each element stored in an array and outputs the final value the operation generates. It\u2019s a cleaner way of iterating over and processing the data stored in an array.<\/p>\n<p>Currently, it\u2019s<span>\u00a0<\/span><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/caniuse.com\/mdn-javascript_builtins_array_reduce\">supported by all of the major browser versions<\/a>,\u00a0<span>and<\/span> is available in Node.js from version 10.0 upwards.<\/p>\n<p>Today, we are going to explore this\u00a0<code>reduce<\/code><span>\u00a0method<\/span>; more specifically, we\u2019ll go through how and when to use it in different scenarios.<\/p>\n<p>Let\u2019s get started then!<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Javascript_reduce_method_parameters\"><\/span>Javascript reduce method parameters<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>The <code>reduce<\/code> method accepts two arguments: a reducer function for the array that is used as a callback,\u00a0and an optional<span>\u00a0<\/span><code>initialValue<\/code><span>\u00a0<\/span>argument. The reducer function takes four arguments:<span>\u00a0<\/span><code>accumulator<\/code>,<span>\u00a0<\/span><code>currentValue<\/code>,<span>\u00a0<\/span><code>currentIndex<\/code>, and\u00a0<code>array<\/code>.<\/p>\n<p><span style=\"font-family: Consolas, Monaco, monospace;\"><\/p>\n<figure class=\"post-image post-mediaBleed alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-1340617 lazy\" alt=\"\" width=\"415\" height=\"61\" sizes=\"auto, (max-width: 415px) 100vw, 415px\" src=\"https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2021\/02\/Screenshot-2021-02-26-at-09.48.41.png\" data-lazy=\"true\" srcset=\"https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2021\/02\/Screenshot-2021-02-26-at-09.48.41.png 680w, https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2021\/02\/Screenshot-2021-02-26-at-09.48.41-280x41.png 280w, https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2021\/02\/Screenshot-2021-02-26-at-09.48.41-540x79.png 540w, https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2021\/02\/Screenshot-2021-02-26-at-09.48.41-270x40.png 270w\"\/><\/figure>\n<p><\/span><\/p>\n<p>An example of Javascript array<span>\u00a0<\/span><strong>reduce<\/strong><span>\u00a0method<\/span> in action:<\/p>\n<p><span style=\"font-family: Consolas, Monaco, monospace;\"><\/p>\n<figure class=\"post-image post-mediaBleed alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-1340618 lazy\" alt=\"\" width=\"620\" height=\"66\" sizes=\"auto, (max-width: 620px) 100vw, 620px\" src=\"https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2021\/02\/Screenshot-2021-02-26-at-09.49.45.png\" data-lazy=\"true\" srcset=\"https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2021\/02\/Screenshot-2021-02-26-at-09.49.45.png 1018w, https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2021\/02\/Screenshot-2021-02-26-at-09.49.45-280x30.png 280w, https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2021\/02\/Screenshot-2021-02-26-at-09.49.45-540x57.png 540w, https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2021\/02\/Screenshot-2021-02-26-at-09.49.45-270x29.png 270w, https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2021\/02\/Screenshot-2021-02-26-at-09.49.45-796x84.png 796w\"\/><\/figure>\n<p><\/span><\/p>\n<p>The This\u00a0<strong>reduce<\/strong><span>\u00a0method<\/span> does the same job as the following <code>for\u2026each<\/code> loop, but with fewer lines of code.<\/p>\n<p><span style=\"font-family: Consolas, Monaco, monospace;\"><\/p>\n<figure class=\"post-image post-mediaBleed alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-1340619 lazy\" alt=\"\" width=\"339\" height=\"209\" sizes=\"auto, (max-width: 339px) 100vw, 339px\" src=\"https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2021\/02\/Screenshot-2021-02-26-at-09.50.44.png\" data-lazy=\"true\" srcset=\"https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2021\/02\/Screenshot-2021-02-26-at-09.50.44.png 418w, https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2021\/02\/Screenshot-2021-02-26-at-09.50.44-280x173.png 280w, https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2021\/02\/Screenshot-2021-02-26-at-09.50.44-219x135.png 219w\"\/><\/figure>\n<p><\/span><\/p>\n<p>How does the<span>\u00a0<\/span><code>reduce<\/code><span>\u00a0<\/span>method achieve it using these parameters?<\/p>\n<p>The value returned by the reducer function is assigned to the<span>\u00a0<\/span><code>accumulator<\/code><span>\u00a0<\/span>variable. In each iteration through the array items, the accumulator\u2019s value is updated to the returned result. At the end of the iteration, the final value of the accumulator is returned as the output of the<span>\u00a0<\/span><code>reduce<\/code><span>\u00a0function<\/span>.<\/p>\n<p>If an<span>\u00a0<\/span><code>initialValue<\/code><span>\u00a0<\/span>argument is passed, the first time the reducer function is executed, the<span>\u00a0<\/span><code>accumulator<\/code>\u00a0will be equal to<span>\u00a0<\/span><code>initialValue<\/code><span>\u00a0and<\/span> the<span>\u00a0<\/span><code>currentValue<\/code><span>\u00a0will<\/span> be equal to the first element stored in the array. If an initialValue is not passed, the<span>\u00a0<\/span><code>accumulator<\/code>\u00a0will be equal to the first value of the array and\u00a0<code>currentValue<\/code><span>\u00a0will<\/span> be equal to the second.<\/p>\n<p>Let\u2019s see how the values of each of these parameters change every time the callback function is called in the following example. Here, we are not passing an<span>\u00a0<\/span><code>initialValue<\/code><span>\u00a0<\/span>argument.<\/p>\n<p><span style=\"font-family: Consolas, Monaco, monospace;\"><\/p>\n<figure class=\"post-image post-mediaBleed alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-1340620 lazy\" alt=\"\" width=\"799\" height=\"94\" sizes=\"auto, (max-width: 799px) 100vw, 799px\" src=\"https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2021\/02\/Screenshot-2021-02-26-at-09.51.20.png\" data-lazy=\"true\" srcset=\"https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2021\/02\/Screenshot-2021-02-26-at-09.51.20.png 1022w, https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2021\/02\/Screenshot-2021-02-26-at-09.51.20-280x33.png 280w, https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2021\/02\/Screenshot-2021-02-26-at-09.51.20-540x63.png 540w, https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2021\/02\/Screenshot-2021-02-26-at-09.51.20-270x32.png 270w, https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2021\/02\/Screenshot-2021-02-26-at-09.51.20-796x93.png 796w\"\/><\/figure>\n<p><\/span><\/p>\n<figure class=\"post-image post-mediaBleed alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-1340621 lazy\" alt=\"\" width=\"709\" height=\"406\" sizes=\"auto, (max-width: 709px) 100vw, 709px\" src=\"https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2021\/02\/Screenshot-2021-02-26-at-09.51.37.png\" data-lazy=\"true\" srcset=\"https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2021\/02\/Screenshot-2021-02-26-at-09.51.37.png 1052w, https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2021\/02\/Screenshot-2021-02-26-at-09.51.37-280x160.png 280w, https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2021\/02\/Screenshot-2021-02-26-at-09.51.37-472x270.png 472w, https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2021\/02\/Screenshot-2021-02-26-at-09.51.37-236x135.png 236w, https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2021\/02\/Screenshot-2021-02-26-at-09.51.37-796x456.png 796w\"\/><\/figure>\n<p>The final output of this function is<span>\u00a0<\/span><code>10<\/code>.<\/p>\n<p>Next, let\u2019s see how it works when an<span>\u00a0<\/span><code>initialValue<\/code><span>\u00a0<\/span>is passed.<\/p>\n<p><span style=\"font-family: Consolas, Monaco, monospace;\"><\/p>\n<figure class=\"post-image post-mediaBleed alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-1340622 lazy\" alt=\"\" width=\"757\" height=\"89\" sizes=\"auto, (max-width: 757px) 100vw, 757px\" src=\"https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2021\/02\/Screenshot-2021-02-26-at-09.52.31.png\" data-lazy=\"true\" srcset=\"https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2021\/02\/Screenshot-2021-02-26-at-09.52.31.png 1022w, https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2021\/02\/Screenshot-2021-02-26-at-09.52.31-280x33.png 280w, https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2021\/02\/Screenshot-2021-02-26-at-09.52.31-540x63.png 540w, https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2021\/02\/Screenshot-2021-02-26-at-09.52.31-270x32.png 270w, https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2021\/02\/Screenshot-2021-02-26-at-09.52.31-796x93.png 796w\"\/><\/figure>\n<p><\/span><\/p>\n<figure class=\"post-image post-mediaBleed alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-1340623 lazy\" alt=\"\" width=\"726\" height=\"509\" sizes=\"auto, (max-width: 726px) 100vw, 726px\" src=\"https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2021\/02\/Screenshot-2021-02-26-at-09.53.16.png\" data-lazy=\"true\" srcset=\"https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2021\/02\/Screenshot-2021-02-26-at-09.53.16.png 1050w, https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2021\/02\/Screenshot-2021-02-26-at-09.53.16-280x196.png 280w, https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2021\/02\/Screenshot-2021-02-26-at-09.53.16-385x270.png 385w, https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2021\/02\/Screenshot-2021-02-26-at-09.53.16-193x135.png 193w, https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2021\/02\/Screenshot-2021-02-26-at-09.53.16-796x558.png 796w\"\/><\/figure>\n<p>This function outputs the value\u00a0<code>22<\/code>.<\/p>\n<h2 id=\"when-to-use-javascript-reducer\"><span class=\"ez-toc-section\" id=\"When_to_use_JavaScripts_reducer\"><\/span>When to use JavaScript\u2019s reducer<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>The <code>reduce<\/code>\u00a0method provides a unique way to iterate through items in an array and process them. So what are the situations in which we can benefit from this uniqueness?<\/p>\n<h2 id=\"calculate-the-sum-of-values-in-an-array\"><span class=\"ez-toc-section\" id=\"Calculate_the_sum_of_values_in_an_array\"><\/span>Calculate the sum of values in an array<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>This is similar to what we did in previous examples. The only difference is we have to pass 0 for the<span>\u00a0<\/span><code>initialValue<\/code><span>\u00a0<\/span>parameter.<\/p>\n<p><span style=\"font-family: Consolas, Monaco, monospace;\"><\/p>\n<figure class=\"post-image post-mediaBleed alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-1340626 lazy\" alt=\"\" width=\"804\" height=\"99\" sizes=\"auto, (max-width: 804px) 100vw, 804px\" src=\"https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2021\/02\/Screenshot-2021-02-26-at-09.56.01.png\" data-lazy=\"true\" srcset=\"https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2021\/02\/Screenshot-2021-02-26-at-09.56.01.png 988w, https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2021\/02\/Screenshot-2021-02-26-at-09.56.01-280x35.png 280w, https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2021\/02\/Screenshot-2021-02-26-at-09.56.01-540x67.png 540w, https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2021\/02\/Screenshot-2021-02-26-at-09.56.01-270x33.png 270w, https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2021\/02\/Screenshot-2021-02-26-at-09.56.01-796x98.png 796w\"\/><\/figure>\n<p><\/span><\/p>\n<h2 id=\"flatten-an-array\"><span class=\"ez-toc-section\" id=\"Flatten_an_array\"><\/span>Flatten an array<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>If we have an array of arrays, we can use the reduce method to flatten it and create a single array without nested arrays.<\/p>\n<p><span style=\"font-family: Consolas, Monaco, monospace;\"><\/p>\n<figure class=\"post-image post-mediaBleed alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-1340627 lazy\" alt=\"\" width=\"809\" height=\"184\" sizes=\"auto, (max-width: 809px) 100vw, 809px\" src=\"https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2021\/02\/Screenshot-2021-02-26-at-09.56.36.png\" data-lazy=\"true\" srcset=\"https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2021\/02\/Screenshot-2021-02-26-at-09.56.36.png 922w, https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2021\/02\/Screenshot-2021-02-26-at-09.56.36-280x64.png 280w, https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2021\/02\/Screenshot-2021-02-26-at-09.56.36-540x123.png 540w, https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2021\/02\/Screenshot-2021-02-26-at-09.56.36-270x61.png 270w, https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2021\/02\/Screenshot-2021-02-26-at-09.56.36-796x181.png 796w\"\/><\/figure>\n<p><\/span><\/p>\n<p>We pass an empty array as the initial value so the items in the first array are concatenated with it to create a flattened array.<\/p>\n<p>If the first array has more than one level of nested arrays, we can recursively call the reduce function to flatten and then concatenate them with the final array.<\/p>\n<p><span style=\"font-family: Consolas, Monaco, monospace;\"><\/p>\n<figure class=\"post-image post-mediaBleed alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1340628 lazy\" alt=\"\" width=\"1078\" height=\"532\" sizes=\"auto, (max-width: 1078px) 100vw, 1078px\" src=\"https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2021\/02\/Screenshot-2021-02-26-at-09.57.14.png\" data-lazy=\"true\" srcset=\"https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2021\/02\/Screenshot-2021-02-26-at-09.57.14.png 1078w, https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2021\/02\/Screenshot-2021-02-26-at-09.57.14-280x138.png 280w, https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2021\/02\/Screenshot-2021-02-26-at-09.57.14-540x266.png 540w, https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2021\/02\/Screenshot-2021-02-26-at-09.57.14-270x133.png 270w, https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2021\/02\/Screenshot-2021-02-26-at-09.57.14-796x393.png 796w\"\/><\/figure>\n<p><\/span><\/p>\n<p>If the current value accepted by the callback is an array, as verified using the <code>isArray<\/code> method, we recursively call the <code>flattenArray<\/code> function on it. If the current value is not an array, we simply concatenate the value with the final flattened array.<\/p>\n<h2 id=\"grouping-an-array-of-objects-by-a-property\"><span class=\"ez-toc-section\" id=\"Grouping_an_array_of_objects_by_a_property\"><\/span>Grouping an array of objects by a property<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Assume that we have an array of\u00a0objects that are basically the names of countries \u2014 and\u00a0we want to group each country in the array according to their continents. We can use the <code>reduce<\/code> method for this task. Check out the code snippet below:<\/p>\n<p><span style=\"font-family: Consolas, Monaco, monospace;\"><\/p>\n<figure class=\"post-image post-mediaBleed alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-1340629 lazy\" alt=\"\" width=\"631\" height=\"507\" sizes=\"auto, (max-width: 631px) 100vw, 631px\" src=\"https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2021\/02\/Screenshot-2021-02-26-at-09.57.52.png\" data-lazy=\"true\" srcset=\"https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2021\/02\/Screenshot-2021-02-26-at-09.57.52.png 774w, https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2021\/02\/Screenshot-2021-02-26-at-09.57.52-261x210.png 261w, https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2021\/02\/Screenshot-2021-02-26-at-09.57.52-336x270.png 336w, https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2021\/02\/Screenshot-2021-02-26-at-09.57.52-168x135.png 168w\"\/><\/figure>\n<p><\/span><\/p>\n<p>Inside the callback function, we create a new key for each continent that is not in the groupedCountries map and assign an empty array as its value. Then we push each country object to the array stored by their respective continents.<\/p>\n<h2 id=\"using-reduce-in-place-of-filtermap\"><span class=\"ez-toc-section\" id=\"Using_reduce_in_place_of_filtermap\"><\/span>Using reduce() in place of filter().map()<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>In JavaScript, we use the <code>filter<\/code> method to filter items stored in an array using a callback. We use the map method to create a new array using the old array using the logic passed inside a callback. Sometimes we have to use these two methods, one after the other to create a new array with the results we filter using some conditions.<\/p>\n<p>Instead of using two array methods, you can use the JavaScript array\u00a0<code>reduce<\/code>\u00a0method to complete the same task. It will reduce the completion time because now you only iterate through the array only once, not twice.<\/p>\n<p>For example, let\u2019s take the following scenario where we want to create an array of square roots of numbers greater than 30.<\/p>\n<p><span style=\"font-family: Consolas, Monaco, monospace;\"><\/p>\n<figure class=\"post-image post-mediaBleed alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-1340630 lazy\" alt=\"\" width=\"804\" height=\"166\" sizes=\"auto, (max-width: 804px) 100vw, 804px\" src=\"https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2021\/02\/Screenshot-2021-02-26-at-09.58.26.png\" data-lazy=\"true\" srcset=\"https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2021\/02\/Screenshot-2021-02-26-at-09.58.26.png 1038w, https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2021\/02\/Screenshot-2021-02-26-at-09.58.26-280x58.png 280w, https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2021\/02\/Screenshot-2021-02-26-at-09.58.26-540x111.png 540w, https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2021\/02\/Screenshot-2021-02-26-at-09.58.26-270x56.png 270w, https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2021\/02\/Screenshot-2021-02-26-at-09.58.26-796x164.png 796w\"\/><\/figure>\n<p><\/span><\/p>\n<p>The same scenario implemented using reduce looks like this.<\/p>\n<p><span style=\"font-family: Consolas, Monaco, monospace;\"><\/p>\n<figure class=\"post-image post-mediaBleed alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-1340631 lazy\" alt=\"\" width=\"799\" height=\"305\" sizes=\"auto, (max-width: 799px) 100vw, 799px\" src=\"https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2021\/02\/Screenshot-2021-02-26-at-09.59.07.png\" data-lazy=\"true\" srcset=\"https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2021\/02\/Screenshot-2021-02-26-at-09.59.07.png 886w, https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2021\/02\/Screenshot-2021-02-26-at-09.59.07-280x107.png 280w, https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2021\/02\/Screenshot-2021-02-26-at-09.59.07-540x206.png 540w, https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2021\/02\/Screenshot-2021-02-26-at-09.59.07-270x103.png 270w, https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2021\/02\/Screenshot-2021-02-26-at-09.59.07-796x304.png 796w\"\/><\/figure>\n<p><\/span><\/p>\n<p>Inside the callback, we simply check if the number is greater than 30 and add its square root to the\u00a0<code>accumulator<\/code>\u00a0array. You have to pass an empty array as the initial value to get this result.<\/p>\n<h2 id=\"build-your-own-reducer\"><span class=\"ez-toc-section\" id=\"Build_your_own_reducer\"><\/span>Build your own reducer<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>In this section, we are going to implement the reducer function on our own to see how things work under the hood. This will give you a better idea of when to use the JavaScript reducer for optimal performance in your program.<\/p>\n<p><span style=\"font-family: Consolas, Monaco, monospace;\"><\/p>\n<figure class=\"post-image post-mediaBleed alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-1340632 lazy\" alt=\"\" width=\"806\" height=\"527\" sizes=\"auto, (max-width: 806px) 100vw, 806px\" src=\"https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2021\/02\/Screenshot-2021-02-26-at-10.00.49.png\" data-lazy=\"true\" srcset=\"https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2021\/02\/Screenshot-2021-02-26-at-10.00.49.png 1006w, https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2021\/02\/Screenshot-2021-02-26-at-10.00.49-280x183.png 280w, https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2021\/02\/Screenshot-2021-02-26-at-10.00.49-413x270.png 413w, https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2021\/02\/Screenshot-2021-02-26-at-10.00.49-206x135.png 206w, https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2021\/02\/Screenshot-2021-02-26-at-10.00.49-796x521.png 796w\"\/><\/figure>\n<p><\/span><\/p>\n<p>First, we check if the reduce method was called on a null or undefined object. Then we check if the passed callback is a function.<\/p>\n<p>After the initial type checks, we assign the passed <code>initialValue<\/code>to the accumulator. Then we loop through the array and call the callback for each item in the array. At the end of execution, we have to return the accumulator value.<\/p>\n<p>We are using this implementation only to help you understand how the reduce method actually works. For example, you can see that it uses a <code>for<\/code>\u00a0loop to iterate through the array under the hood.<\/p>\n<p>However, note that you shouldn\u2019t use this implementation in your production code. In fact, prototyping methods to JavaScript standard types is a bad coding practice you should never indulge in.<\/p>\n<p>I hope this knowledge will help you to identify problems that can be resolved with the reducer in the future. Some of these use cases overlap with<span>\u00a0the\u00a0<\/span><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/livecodestream.dev\/post\/javascript-foreach-powered-array-for-loop\/\">forEach<\/a><span>\u00a0<\/span>,<span>\u00a0<\/span><code>map<\/code>, and<span>\u00a0<\/span><code>filter<\/code>\u00a0array methods. So you should know to pick the situations that can be solved optimally using the <code>reduce<\/code>\u00a0method.<\/p>\n<p><i><span style=\"font-weight: 400;\">This <\/span><\/i><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/livecodestream.dev\/post\/javascript-reducer-a-simple-yet-powerful-array-method\/\"><i><span style=\"font-weight: 400;\">article<\/span><\/i><\/a><i><span style=\"font-weight: 400;\"> was originally published on <\/span><\/i><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/livecodestream.dev\/\"><i><span style=\"font-weight: 400;\">Live Code Stream<\/span><\/i><\/a><i><span style=\"font-weight: 400;\"> by <\/span><\/i><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.linkedin.com\/in\/bajcmartinez\/\"><i><span style=\"font-weight: 400;\">Juan Cruz Martinez<\/span><\/i><\/a><i><span style=\"font-weight: 400;\"> (<a href=\"https:\/\/buradabiliyorum.com\/en\/category\/social-mediaa\/\" data-internallinksmanager029f6b8e52c=\"1\" title=\"Social Media\" target=\"_blank\" rel=\"noopener\">twitter<\/a>: <\/span><\/i><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/twitter.com\/bajcmartinez\"><i><span style=\"font-weight: 400;\">@bajcmartinez<\/span><\/i><\/a><i><span style=\"font-weight: 400;\">), founder and publisher of Live Code Stream, entrepreneur, developer, author, speaker, and doer of things.<\/span><\/i><\/p>\n<p><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/livecodestream.dev\/subscribe\"><i><span style=\"font-weight: 400;\">Live Code Stream<\/span><\/i><\/a><i><span style=\"font-weight: 400;\"> is also available as a free weekly <a href=\"https:\/\/buradabiliyorum.com\/en\/category\/news\/\" data-internallinksmanager029f6b8e52c=\"2\" title=\"News\" target=\"_blank\" rel=\"noopener\">news<\/a>letter. Sign up for updates on everything related to programming, AI, and computer <a href=\"https:\/\/buradabiliyorum.com\/en\/category\/sciencee\/\" data-internallinksmanager029f6b8e52c=\"5\" title=\"Science\" target=\"_blank\" rel=\"noopener\">science<\/a> in <a href=\"https:\/\/buradabiliyorum.com\/en\/category\/general\/\" data-internallinksmanager029f6b8e52c=\"3\" title=\"General\" target=\"_blank\" rel=\"noopener\">general<\/a>.<\/span><\/i><\/p>\n<\/p><\/div>\n<p><script async src=\"\/\/platform.twitter.com\/widgets.js\" charset=\"utf-8\"><\/script><\/p>\n<blockquote><p><strong><span style=\"color: #ff6600;\">If you liked the article, do not forget to share it with your friends. Follow us on\u00a0<span style=\"color: #ff0000;\"><a style=\"color: #ff0000;\" href=\"https:\/\/news.google.com\/publications\/CAAqBwgKMLG0nwswvr63Aw\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Google News<\/a><\/span>\u00a0too, click on the star and choose us from your favorites.<\/span><\/strong><\/p><\/blockquote>\n<blockquote>\n<p style=\"text-align: center;\">For forums sites go to <span style=\"color: #ff9900;\"><a style=\"color: #ff9900;\" href=\"https:\/\/forum.buradabiliyorum.com\/\" target=\"_blank\" rel=\"noopener\">Forum.BuradaBiliyorum.Com<\/a><\/span><\/strong>\n<\/p><\/blockquote>\n<blockquote>\n<p style=\"text-align: center;\"><strong>If you want to read more like this article, you can visit our <span style=\"color: #ff9900;\"><a style=\"color: #ff9900;\" href=\"https:\/\/en.buradabiliyorum.com\/technology\/\" target=\"_blank\" rel=\"noopener\">Technology category.<\/a><\/span><\/strong><\/p>\n<\/blockquote>\n<p><span style=\"color: black;\"><a style=\"color: #ff9900;\" href=\"https:\/\/thenextweb.com\/dd\/2021\/02\/26\/javascript-reducer-simple-yet-powerful-array-method-syndication\/\" target=\"_blank\" rel=\"noopener\">Source<\/a><\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>&#8220;#The ins and outs of JavaScript reducer \u2014 a simple, yet powerful array method&#8221; JavaScript\u2019s reduce is one of the most useful array methods that should be in a developer\u2019s arsenal. Introduced in ES5, it\u2019s somewhat similar to for\u2026each and map methods that are used with arrays, but improves on their performance and simplicity in&#8230;<\/p>\n","protected":false},"author":1,"featured_media":189811,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"fifu_image_url":"https:\/\/img-cdn.tnwcdn.com\/image\/tnw?filter_last=1&fit=1280,640&url=https:\/\/cdn0.tnwcdn.com\/wp-content\/blogs.dir\/1\/files\/2021\/02\/1-copy-61.jpg&signature=cb8a615754b1e46a6df8642c38e9aa1c","fifu_image_alt":"","footnotes":""},"categories":[18],"tags":[76781,76768,76627,70759],"class_list":["post-189810","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-technology","tag-coding","tag-javascript","tag-programming-language","tag-tech"],"_links":{"self":[{"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/posts\/189810","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/comments?post=189810"}],"version-history":[{"count":0,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/posts\/189810\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/media\/189811"}],"wp:attachment":[{"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/media?parent=189810"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/categories?post=189810"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/tags?post=189810"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}