{"componentChunkName":"component---node-modules-gatsby-theme-blog-core-src-templates-post-query-js","path":"/blog/reducejs/","result":{"data":{"site":{"siteMetadata":{"title":"Geekynut","social":[{"name":"twitter","url":"https://twitter.com/geekynut"},{"name":"github","url":"https://github.com/geekynut"}]}},"blogPost":{"__typename":"MdxBlogPost","id":"0be18779-bf5d-53ef-82d1-d3d2424c6ca0","excerpt":"Javascript Reduce array methods Map, filter and reduce are among the first methods that wow you when learning arrays methods. Reduce has a…","body":"function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\n/* @jsx mdx */\nvar _frontmatter = {\n  \"title\": \"Reduce JS\",\n  \"path\": \"/blog/reducejs\",\n  \"tags\": [\"reduce\", \"functional programming\", \"javascript\"],\n  \"date\": \"2020-05-07T00:00:00.000Z\",\n  \"topic\": \"Javascript\",\n  \"level\": \"intermediate\",\n  \"description\": \"A 2 minutes lecture to understand better reduce in Javascript language. Take in account that every time you use the array (fourth parameter) in your reduce function it will be evaluated every time it is called and that means that could be evaluate up to n times with n being the array lenght.\"\n};\n\nvar makeShortcode = function makeShortcode(name) {\n  return function MDXDefaultShortcode(props) {\n    console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\");\n    return mdx(\"div\", props);\n  };\n};\n\nvar layoutProps = {\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n      props = _objectWithoutProperties(_ref, [\"components\"]);\n\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"h2\", {\n    \"id\": \"javascript-reduce-array-methods\"\n  }, \"Javascript Reduce array methods\"), mdx(\"p\", null, \"Map, filter and reduce are among the first methods that wow you when learning arrays methods. Reduce has a higher learning curve compared to the other two. I could understand it better as soon as I separated the invoking function in an external function. \"), mdx(\"p\", null, \"This post is intended to help beginner to grasp how reduce works, if you know already how to use it and wish to correct or add something to the post please contact me or add a comment.\"), mdx(\"hr\", null), mdx(\"h2\", {\n    \"id\": \"reduce-and-the-mdn-example\"\n  }, \"reduce and the \", mdx(\"a\", _extends({\n    parentName: \"h2\"\n  }, {\n    \"href\": \"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce\"\n  }), \"MDN example\")), mdx(\"p\", null, \"The example is used from MDN to explain how to sum of the elements of an array containing numbers using reduce. \"), mdx(\"p\", null, \"A reduce function needs to have at least one parameter.\"), mdx(\"p\", null, \"The first parameter contains the function that will be applied to each member of the array, while the second parameter is optional and contains the value we wish to give to the accumulator.\"), mdx(\"p\", null, \"e.g.\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-javascript\"\n  }), \"   [1,2,3,4].reduce((accumulator, currentValue) => accumulator + currentValue);\\n\")), mdx(\"p\", null, \"Above is shown a basic reduce function, when only one parameter is passed to the reduce function the accumulator takes as default value the first value of the array, in the case exposed above the accumulator is 1. \"), mdx(\"p\", null, \"Below we console.log the values of the accumulator (acc), and the current value(next) and show each interaction \"), mdx(\"p\", null, mdx(\"span\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"388px\"\n    }\n  }), \"\\n      \", mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"98.55072463768117%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAIAAAAC64paAAAACXBIWXMAAA7DAAAOwwHHb6hkAAACBUlEQVQ4y5VTiXKbMBTkOwxC94XQE+K0SRon6fT/f6kP3GkSh/G0OxIIRqvdd6gIgfXz1E9LN87aeao05YIrKZVU+1MoVde0prT+hoJRyhqgyskmc+NF7LjSNsam9QECDpc6UpWEVISQuiZfyMg1jlKhmPLaR8YYNY4rFYJtnPLWcWmUb40NAvcIVpUlqW4HbWQeOmYbEzN0cw/L2v74Befl5+v0MsQxpTis/fN7DO2SwFvrYWiHqZWKM74ph8yMpRBZCGTO5yWtaTxD7iL0aVm5wMi1YLXmKMyEttJYxTh6LBjjNrC5Z63bwqoxuLIiNd3Hhmo3uYVLbqP6sI0xUu2HXvdjkja2wWXwjZJGclRsoDNG4j56hALlZQtMhzAsLuZxhGWEZLUW6Fd1y8U7jTLHZJwMS4hWyhPOsqxO5VYZslssT6ebw0MUn9a03lvhSzsc9cYh+b9R7O7+WLu9yAfqv5/HZKyi1lpKiR2t1ZYm/LNh62ysK9dG44odJsw6HyMYrRnnDd4SRpumgQhtxLIFPOj17f3tepVCfNcvqK4g57aNEFOCFGNEkeqTb76DHt4qyLDMS99PL9e3eZxQ9m7Ho5j7PCY0CbCuz6jLucDm+9ds59yPwzCM0+XyNA0jBv+gK+7JKXUppmmalvOK/q2zdzf+ERlJ1+sram9pEYI+bKk7/AYDaaS5Ap7mbwAAAABJRU5ErkJggg==')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  })), \"\\n  \", mdx(\"img\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"reduce javascript example\",\n    \"title\": \"reduce javascript example\",\n    \"src\": \"/static/c2ccfbfb2951ede14f01e56e859e0efc/96c67/image1.png\",\n    \"srcSet\": [\"/static/c2ccfbfb2951ede14f01e56e859e0efc/e4d6b/image1.png 345w\", \"/static/c2ccfbfb2951ede14f01e56e859e0efc/96c67/image1.png 388w\"],\n    \"sizes\": \"(max-width: 388px) 100vw, 388px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\"\n  })), \"\\n    \")), mdx(\"p\", null, \"as you can see each iteration returns the sum of the array\\u2019s elements.\"), mdx(\"h2\", {\n    \"id\": \"divide-and-conquer\"\n  }, \"Divide and conquer\"), mdx(\"p\", null, \"In the following example I extract the function I wish to pass to reduce as an external element.\"), mdx(\"p\", null, mdx(\"span\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"466px\"\n    }\n  }), \"\\n      \", mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"90.72463768115942%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAASCAIAAADUsmlHAAAACXBIWXMAAA7DAAAOwwHHb6hkAAAB/UlEQVQ4y31TiXKjMAzlOwK+L8kXNoRtaaf//1srJ81sZyfps0fYYFni6WmqxTRC74hRKSWklGKM+xy7sXqOSWtltTa42th1KjoXAwg55RJTxtSq8sDZwp9hkkpL69gys3GCMcbneVkWzvi4mwJzLvgLTNJYkZs0oEORlnIPfcs1+xgkv1/2GpOy5LxiwrQVX+tbf/s6jvPspdWw7qkkQSe0euXsROkRKbwO1TffUntve//8PLaPr+38WHMQv6edoqrd2eiSSxogYL7ihiHhuoEzdE4Ifmf4/7TliMxLVmxZ2Hxh88xupA0W58vlstBuXtjlQht6MiKfxnC2AcjZRQpZJUSzbqbvujYTQGOmyrWWtj33FY6j0kxSK48eA5E5uYDkzKVVJkiixgflvSRLGVmnnLPOOG+90yE4QO8kldYb50ZkF4JKxROt1zOt/dpjTN7Uze2HXncsqLQRNkoLVEhhQUHRISsXpTakME2q5DdBENTN3pX5PW9i+V78s2MxPS/Cg9SHil+UihgexN5ATz7swh6WMBP5ywttA0CK0RhjrUMApRW9gRAgorXGe9+3hhF+ZPGjq+hzSsno4RxCEFKRDT4AIt0IgOf5ttbyVOQTVHNc9/1ox59t21stKMQ4d0/71lMvf3qK0eWsymhktTbdmoiohVCC/9aMd/wFAdiT/12R1ZcAAAAASUVORK5CYII=')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  })), \"\\n  \", mdx(\"img\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"reduce javascript example2\",\n    \"title\": \"reduce javascript example2\",\n    \"src\": \"/static/eaedcf896806f1ccb97990b93400ab29/fc1a1/image2.png\",\n    \"srcSet\": [\"/static/eaedcf896806f1ccb97990b93400ab29/e4d6b/image2.png 345w\", \"/static/eaedcf896806f1ccb97990b93400ab29/fc1a1/image2.png 466w\"],\n    \"sizes\": \"(max-width: 466px) 100vw, 466px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\"\n  })), \"\\n    \")), mdx(\"hr\", null), mdx(\"blockquote\", null, mdx(\"p\", {\n    parentName: \"blockquote\"\n  }, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"note: \"), \" the function above is the equivalent of \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"array.map( x=> x*2)\"))), mdx(\"hr\", null), mdx(\"p\", null, \"Let\\u2019s analyse the fToApply function\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-javascript\"\n  }), \"\\n   function fToApply(){\\n        return (acc, next) => {\\n            acc.push(next*2);\\n                return acc;}\\n    }\\n\\n\")), mdx(\"p\", null, \"fToApply returns another function with two parameters \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"return (acc, next) =>\"), \"\\nacc is what we will use as accumulator, it is initialized while declaring reduce (the second parameter) as an empty array \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"reduce(fToApply(), []);\"), \".\"), mdx(\"p\", null, \"This initialization is the equivalent of writing \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"var acc =[];\"), mdx(\"br\", {\n    parentName: \"p\"\n  }), \"\\n\", \"The function multiplies each element passed by 2 and pushes it in the accumulator.\"), mdx(\"p\", null, \"Now we only need to save the new generated array \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"const arrayDoubled = array.reduce(fToApply(), []);\"), \". \"), mdx(\"hr\", null), mdx(\"h2\", {\n    \"id\": \"use-the-accumulator-as-an-object\"\n  }, \"Use the accumulator as an object\"), mdx(\"p\", null, \"As above we declare the function we wish to use with reduce in a separate statement:\"), mdx(\"p\", null, mdx(\"span\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"650px\"\n    }\n  }), \"\\n      \", mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"55.072463768115945%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAIAAADwazoUAAAACXBIWXMAAA7DAAAOwwHHb6hkAAABJ0lEQVQoz41SWY7CMAzNPZrVWRzHXaAFpkjc/1zjFPGBZiR4shwn8foSRWPjZW3TNq2XZT1hRaTqAlhj7CcoH6LxXRx4iB6Cdc5p84LW1vQ8x+ZI2MU8D5XPWLjVZblvl33fTpcViQrWAOBDCDF5QZBWun4XrzwkZuA5NZx4Ot+uj9v+gzylUiEVMSD2DKlCLiFmgNx1FF1ABUjUcsJoQpRSzkrzMYJLKUDwz+IA0dm35p+2itQAx8RLmSeQOszUcGScF1kTEktx5BbB/yVQxVygCMOtFvCVgMg7O2gzDFofhBktlv6Xe/Ui9XDQw8vVOGc/P5UMGDpAkJKMB4hYSpE79wmqUiVqonLOEiO5xnHk1sw3n2Q+L9frdt9vjbLMKTHDAfsFfgH8I1eHEozHcQAAAABJRU5ErkJggg==')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  })), \"\\n  \", mdx(\"img\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"reduce javascript example3\",\n    \"title\": \"reduce javascript example3\",\n    \"src\": \"/static/b94d029cf32a9a3663db02904390ecb1/a6d36/image3.png\",\n    \"srcSet\": [\"/static/b94d029cf32a9a3663db02904390ecb1/e4d6b/image3.png 345w\", \"/static/b94d029cf32a9a3663db02904390ecb1/a6d36/image3.png 650w\"],\n    \"sizes\": \"(max-width: 650px) 100vw, 650px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\"\n  })), \"\\n    \")), mdx(\"p\", null, \"When we declare reduce \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"array.reduce(oddAndEven(),{odd:0,even:0});\"), \" we initialize the accumulator with the object \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"{odd:0,even:0}\"), \". Now we can use \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"acc\"), \" as an object and the oddAndEven function will rise the count of \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"acc.even\"), \" and \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"acc.odd\"), \" based on the ternary expression \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \" (next%2==0)?acc.even++ : acc.odd++\"), \". \"), mdx(\"hr\", null), mdx(\"h2\", {\n    \"id\": \"add-index-and-array-as-parameters\"\n  }, \"Add index and array as parameters\"), mdx(\"p\", null, \"Reduce requires two parameters as seen above the first is the accumulator and second represents each value of the array. There may be cases where we need to use the index or access other variable in the array, reduce gives us two optional parameters, index and array, to cope with those situations.\\nIn this example \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"[0,1].reduce((acc, next, index, array))\"), \" is shown how you can use the optional parameters.\"), mdx(\"p\", null, \"In the code below we use reduce to return a new array that includes a number only if the number and its array index are both even: \"), mdx(\"p\", null, mdx(\"span\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"641px\"\n    }\n  }), \"\\n      \", mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"60.86956521739131%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAMCAIAAADtbgqsAAAACXBIWXMAAA7DAAAOwwHHb6hkAAABTElEQVQoz42S626DMAyF8x6DECexcyNcAr1QrZ32/i81h0pVp2paP50fiODjYwfhAuayhvkc59XF6KP3wYW+BwD1QvcboRS0YKUyygB5RFtrQGv5RHfXCwKMMf2AqS/jfDrMQ5mIW/eDtsjHbMMJZFfVMk2z64Mf2VR02tKY0qiTH1w/r8fz53Xbrl+n7TCWsl5u8zKXtcRycnnGkCiN1I/kSLatANA+6JQNarTkegpIvg4nW258j62BI9RhqrSpUvVIGGsxBut956NCJ0FbRzlhziEnh+g4eNvUkLJ9YjcVFlFzklxijjhkM0zoSQO77+MqqCH+QCjYM/F3dT+dVMBvG97Ko0cr/yyGeqFc1fEY3EpXn3oD3RsI8uScJ/LWGNyJIS5LkW8gXHTH43kp42E9hECc4rGP/4utteftMk3+dvu+bCUG2n+nt/gBnSNiY0um+EMAAAAASUVORK5CYII=')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  })), \"\\n  \", mdx(\"img\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"reduce javascript example3\",\n    \"title\": \"reduce javascript example3\",\n    \"src\": \"/static/a6d9fbccaf886bdd41c70edb703b0e91/c7dcc/image4.png\",\n    \"srcSet\": [\"/static/a6d9fbccaf886bdd41c70edb703b0e91/e4d6b/image4.png 345w\", \"/static/a6d9fbccaf886bdd41c70edb703b0e91/c7dcc/image4.png 641w\"],\n    \"sizes\": \"(max-width: 641px) 100vw, 641px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\"\n  })), \"\\n    \")), mdx(\"p\", null, \"The accumulator is initialized as empty array \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"reduce(doubleEven(), [])\"), \" and when both position and the number are both even we add to the accumulator both value with an object \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"acc.push({value:next, position:index})\")), mdx(\"p\", null, \"As for the last parameter (the array in the fourth position) here is an example of its use:\"), mdx(\"p\", null, mdx(\"span\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"401px\"\n    }\n  }), \"\\n      \", mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"86.66666666666667%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAARCAIAAABSJhvpAAAACXBIWXMAAA7DAAAOwwHHb6hkAAACG0lEQVQ4y3VT25KcIBD1M3YURu4KzUXwMrqbZLOVhzzk//8njZOkksrMqRYaRbrP6aYBL/Ky5HkNKQttmJBcCKGk0vjI0wSOjPH+PzRcCuGTHKMOMzoCgrTgc8xrilMIOYQEMEVhRkrJ9V80fc8E56S9kPaFtpeu7dq2u1zay0vbdYQSWo3S6yM0HPOEwIegwqqg5Am2W9qPfBwxe9H3dRMlNSa69A7yK4WGScXyap0KyYRob2lZQrodW75t8+ePMUxuOXzZQlktgANntBTK3A9tqkIQB8dC6tMkhzTIoErKb/uX/Ppt2j+FdS9vXyH4EXVYfVliWDYle6TSMNRR8FfZv4NUA+eaM821NsAHrUYzOkYJykA7QjqccehwfVehwbpwrX5c2Xch255d0RinjJ0sa3KM4/GM/zbBWa0SY/VnPQzCR62dHiIPSS6vYppFylhBfC+sX5c4zzAXV+a4H9O+JcftiAwFb5QxwgI3o/HJYIWdMW4UYZLOS/CDHTAQBmSsrwTP4CfqVCMrB8p6mDfrU4nj4EGVTaUifRzdyPqnaPrKDCvX1T5BSVAYQrBbKKrS1cX1OZp72c8WeAT6tL3ODjtx8vnl/PGrpieepm0dpBilkBIVtw73xxi9h2malFK5lI+Pd2ftw/wbDfK27znn27osywwAfZWhAj/jxXTOSSkeJt8AqP1QKelt1WXWgx3JX1fvvAXkGe2fmO+P/sD/VyoAAAAASUVORK5CYII=')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  })), \"\\n  \", mdx(\"img\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"reduce javascript example3\",\n    \"title\": \"reduce javascript example3\",\n    \"src\": \"/static/bf07659acdc340036ed9a495811e04fa/9144d/image5.png\",\n    \"srcSet\": [\"/static/bf07659acdc340036ed9a495811e04fa/e4d6b/image5.png 345w\", \"/static/bf07659acdc340036ed9a495811e04fa/9144d/image5.png 401w\"],\n    \"sizes\": \"(max-width: 401px) 100vw, 401px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\"\n  })), \"\\n    \")), mdx(\"p\", null, \"the function pushes all the numbers higher than the array length \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"if( next>arr.length ) => acc.push(next)\"), \" in a new empty array that we initialize in with \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"[]\"), \" as second parameter of our reduce function. \"), mdx(\"hr\", null), mdx(\"blockquote\", null, mdx(\"p\", {\n    parentName: \"blockquote\"\n  }, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"note: \"), \" take in account that every time you use the array (fourth parameter) in your reduce function it will be evaluated every time it is called and that means that could be evaluate up to  n times with n being the array lenght. The example above was only used to show how you could use the parameter but you shouldn\\u2019t use in practice \")), mdx(\"hr\", null));\n}\n;\nMDXContent.isMDXComponent = true;","slug":"/blog/reducejs/","title":"Reduce JS","tags":["reduce","functional programming","javascript"],"keywords":[],"date":"May 07, 2020"},"previous":{"__typename":"MdxBlogPost","id":"26d15029-ea9f-5b5b-b27b-2b259a1e31e5","excerpt":"Bash small pills Here is a list of bash commands that may help you to familiarize with the bash command line. I kept the list minimalistic…","slug":"/blog/essential-bash/","title":"Bash Startpack","date":"April 15, 2020"},"next":{"__typename":"MdxBlogPost","id":"ba3e513b-af97-5b72-94d6-589cea1df8a3","excerpt":"How to import custom fonts in Gatsby You can find information on how to set up gatsby  typography  on  gatsbyjs.org . This forum is built by…","slug":"/blog/typography/","title":"Gatsby Typography","date":"June 22, 2020"}},"pageContext":{"id":"0be18779-bf5d-53ef-82d1-d3d2424c6ca0","previousId":"26d15029-ea9f-5b5b-b27b-2b259a1e31e5","nextId":"ba3e513b-af97-5b72-94d6-589cea1df8a3"}}}