{"componentChunkName":"component---node-modules-rocketseat-gatsby-theme-docs-core-src-templates-docs-query-js","path":"/advanced-js/arrays","result":{"data":{"mdx":{"id":"d1611f2f-fa36-5bc0-9922-7084ea70bc51","excerpt":"Arrays in depth So far we've covered how to  loop  over iterable elements in javascript, such as arrays ( Disclaimer : objects are also iterable but let's leave…","fields":{"slug":"/advanced-js/arrays/"},"frontmatter":{"title":"","description":null,"image":null,"disableTableOfContents":null},"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/* @jsxRuntime classic */\n\n/* @jsx mdx */\nvar _frontmatter = {};\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(\"h1\", {\n    \"id\": \"arrays-in-depth\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h1\",\n    \"href\": \"#arrays-in-depth\",\n    \"aria-label\": \"arrays in depth permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"Arrays in depth\"), mdx(\"p\", null, \"So far we've covered how to\\xA0\", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"loop\"), \"\\xA0over iterable elements in javascript, such as arrays (\", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"Disclaimer\"), \": objects are\\xA0also iterable but let's leave that for another time).\"), mdx(\"p\", null, \"We should know by now how to use a\\xA0\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"for\"), \"\\xA0loop and call the\\xA0\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \".forEach\"), \"\\xA0function within an array without much struggle.\"), mdx(\"p\", null, \"These forms of iterating over arrays and manipulating them are ok in most cases, and you could easily do pretty much everything you need with those two types of loops, but there's another way with which you can save a lot of code while keeping your codebase clean and\\xA0avoid mutating your arrays (more on this later).\"), mdx(\"p\", null, \"Javascript lets us do three basic operations with three different methods that we're going to teach you right now. These three functions have all one thing in common, and that is that they are\\xA0Higher order functions. Don't worry if you don't understand that concept now, just remember that all three work exactly the same: They are\\xA0\", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"functions\"), \"\\xA0that accept another function as their parameter (or\\xA0callback function). Let's see them in action!\"), mdx(\"p\", null, \"\\uD83D\\uDCD6 \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://developer.mozilla.org/en-US/docs/Glossary/Callback_function\"\n  }, \"Callback functions\")), mdx(\"h3\", {\n    \"id\": \"map\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h3\",\n    \"href\": \"#map\",\n    \"aria-label\": \"map permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"Map\"), mdx(\"p\", null, \"According to the\\xA0\", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map\"\n  }, \"MDN\"), \"\\xA0documentation, the map function\"), mdx(\"blockquote\", null, mdx(\"p\", {\n    parentName: \"blockquote\"\n  }, \"\\\"creates a new array\\xA0with the results of calling a provided function on every element in the calling array\\\".\")), mdx(\"p\", null, \"This is pretty much what we were doing with our arrays, right? The main difference is that\\xA0\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"map\"), \"\\xA0already returns a new array (which you normally\\xA0\", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"store\"), \"\\xA0somewhere, of course) with the result of\\xA0\", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"executing our callback function\"), \"\\xA0once for each one of the elements of our array. So let's see it in action:\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\"\n  }, \"const arr = [1, 2, 3, 4, 5, 6, 7];\\nfunction multiplyBy2 (n) {\\n    return n * 2;\\n}\\n\\nconst arrTimes2 = arr.map(multiplyBy2);\\n\\nconsole.log(arrTimes2); // [2, 4, 6, 8, 10, 12, 14]\\n\")), mdx(\"p\", null, \"Ok, so let's dive first into that code from above:\"), mdx(\"ol\", null, mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"First, we've\\xA0\", mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"declared\"), \"\\xA0an array with some numbers, from 1 to 7.\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"Then, we've\\xA0\", mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"declared a new function\"), \"\\xA0that\\xA0\", mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"receives\"), \"\\xA0a number and multiplies it by 2,\\xA0\", mdx(\"strong\", {\n    parentName: \"li\"\n  }, mdx(\"a\", {\n    parentName: \"strong\",\n    \"href\": \"https://jaketrent.com/post/javascript-arrow-function-return-rules/\"\n  }, \"returning\")), \"\\xA0the result.\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"We call the\\xA0\", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"map\"), \"\\xA0function from our array, executing our previously declared function with the element provided by\\xA0\", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"map\"), \", as many times as elements has the array.\")), mdx(\"p\", null, \"Note that the following code would do exactly the same:\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\"\n  }, \"const arr = [1, 2, 3, 4, 5, 6, 7];\\nconst arrTimes2 = arr.map(function (n) {\\n    return n * 2\\n});\\nconsole.log(arrTimes2); // [2, 4, 6, 8, 10, 12, 14]\\n\")), mdx(\"p\", null, \"Easy, right? Certainly it saves us a lot of code considering how we would have done it before:\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\"\n  }, \"const arr = [1, 2, 3, 4, 5, 6, 7];\\nconst arrTimes2 = [];\\nfunction multiplyBy2 (n) {\\n    return n * 2\\n};\\n\\nfor (let i = 0; i < arr.length; i++) {\\n    const result = multiplyBy2(arr[i]);\\n    arrTimes2.push(result);\\n}\\n\\nconsole.log(arrTimes2); // [2, 4, 6, 8, 10, 12, 14]\\n\")), mdx(\"p\", null, \"\\uD83D\\uDCD6 \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://www.freecodecamp.org/news/javascript-map-how-to-use-the-js-map-function-array-method/\"\n  }, \"Javascript Map\")), mdx(\"p\", null, \"\\uD83D\\uDCD6 \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://careerkarma.com/blog/javascript-map/\"\n  }, \"A guide to the \", mdx(\"inlineCode\", {\n    parentName: \"a\"\n  }, \".map()\"), \" method\")), mdx(\"h3\", {\n    \"id\": \"filter\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h3\",\n    \"href\": \"#filter\",\n    \"aria-label\": \"filter permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"Filter\"), mdx(\"p\", null, \"As its own name tells us, filter is used to select certain elements of an array and choose them to be part of a new array, based on a certain condition. The filter function allows us to discard elements that we don't need in our newly created array. According to MDN:\"), mdx(\"blockquote\", null, mdx(\"p\", {\n    parentName: \"blockquote\"\n  }, \"The filter() method creates a new array with all elements that pass the test implemented by the provided function.\")), mdx(\"p\", null, \"As \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"map\"), \" does, \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"filter\"), \" also returns a different array than the one we are working with, with the exception that it will contain only the elements that the returning expression of our callback function returns \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"true\"), \" for.\"), mdx(\"p\", null, \"Let's see it better with an example:\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\"\n  }, \"// Let's return those words longer than 6 characters\\nconst words = ['Hello', 'Javascript', 'Web development', 'CSS', 'HTML'];\\n\\nconst longWords = words.filter(word => {\\n    return word.length > 6;\\n});\\n\\nconsole.log(longWords); // ['Javascript', 'Web development']\\n\")), mdx(\"p\", null, \"As you can see, filter is pretty straighforward. You just need to return an expression that evaluates to\\xA0\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"true\"), \"\\xA0or\\xA0\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"false\"), \", and all the elements of the array that pass that test, will be in the new array. All those that don't pass it, will be automatically discarded.\"), mdx(\"p\", null, \"Again, this saves us from doing a lot of unnecessary extra steps as we needed to do before:\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\"\n  }, \"// Let's return those words longer than 6 characters\\nconst words = ['Hello', 'Javascript', 'Web development', 'CSS', 'HTML'];\\nconst longWords = [];\\n\\nfor (let i = 0; i < words.length; i++) {\\n    if (words[i].length > 6) {\\n        longWords.push(words[i]);\\n    }\\n}\\n\\nconsole.log(longWords); // ['Javascript', 'Web development']\\n\")), mdx(\"p\", null, \"\\uD83D\\uDCD6 \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://careerkarma.com/blog/javascript-filter-reduce/\"\n  }, \"Javascript filter: A step-by-step guide\")), mdx(\"p\", null, \"\\uD83D\\uDCD6 \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://flaviocopes.com/how-to-filter-array-javascript/\"\n  }, \"Javascript: How to filter an array\")), mdx(\"h3\", {\n    \"id\": \"reduce\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h3\",\n    \"href\": \"#reduce\",\n    \"aria-label\": \"reduce permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"Reduce\"), mdx(\"p\", null, \"The \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"reduce\"), \" function works pretty much the same as the other two. It accepts a function as a parameter exactly the same way as \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"map\"), \" and \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"filter\"), \" do, with the exception that this callback function (called reducer), instead of receiving the current element of the array as first argument, takes the accumulated result (accumulator) of the previously executed iterations. Let's see how MDN defines this method and then we'll see it with some code:\"), mdx(\"blockquote\", null, mdx(\"p\", {\n    parentName: \"blockquote\"\n  }, \"The reduce() method executes a reducer function (that you provide) on each element of the array, resulting in a single output value.\")), mdx(\"p\", null, \"Another thing to notice is that instead of returning a new array, \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"reduce\"), \" always outputs a single value, the result of accumulating the returning value of each iteration. Let's see how it works:\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\"\n  }, \"// Let's get the sum of all the values in the array\\nconst nums = [124, 22, 874, 173, 5739];\\n\\nconst sumOfNums = nums.reduce((accum, num) => {\\n    return accum + num;\\n}, 0);\\n\\nconsole.log(sumOfNums); // 6932\\n\")), mdx(\"p\", null, \"As we said before, you can notice how on each iteration, we receive the previous result of adding the accumulator to the element of the array, resulting in the end with the output of the sum of all the elements in the array.\"), mdx(\"p\", null, \"There's a second thing to take into account with the reduce function, and that is that apart from the accumulated value and the reducer function, we can pass a third parameter, consisting of the initial value that our reducer function will accept as accumulator on the first iteration. Let's see it better with an example:\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\"\n  }, \"// Let's get the multiplication of all the values in the array\\nconst nums = [124, 22, 874, 173, 5739];\\nconst multiplicationOfNums = nums.reduce((accum, num) => {\\n    // On the first iteration, when num's value is 124\\n    // accum's value will be 1\\n    return accum * num;\\n}, 1 /* what if this were a zero? */);\\nconsole.log(multiplicationOfNums); // 2367217302384\\n\")), mdx(\"p\", null, \"This might seem confusing at first, but everything will be crystal clear once you start practicing with a few exercises! \\uD83D\\uDCBB\"), mdx(\"p\", null, \"\\uD83D\\uDCD6 \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://www.digitalocean.com/community/tutorials/js-finally-understand-reduce\"\n  }, \"The JavaScript Reduce Method Explained\")), mdx(\"p\", null, \"\\uD83D\\uDCD6 \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://thecodebarbarian.com/javascript-reduce-in-5-examples.html\"\n  }, \"Javascript reduce method in 5 examples\")), mdx(\"p\", null, \"\\uD83D\\uDCFD \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://www.youtube.com/watch?v=g1C40tDP0Bk&ab_channel=ProgrammingwithMosh\"\n  }, \"JavaScript array reduce\")), mdx(\"p\", null, \"\\uD83D\\uDCD6 \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://zellwk.com/blog/reduce/\"\n  }, \"How to use reduce in Javascript\")), mdx(\"p\", null, \"\\uD83D\\uDCD6 \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://www.freecodecamp.org/news/reduce-f47a7da511a9/\"\n  }, \"A guide to the reduce method in Javascript\")), mdx(\"h2\", {\n    \"id\": \"exercises\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h2\",\n    \"href\": \"#exercises\",\n    \"aria-label\": \"exercises permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"Exercises\"), mdx(\"h3\", {\n    \"id\": \"map-exercises\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h3\",\n    \"href\": \"#map-exercises\",\n    \"aria-label\": \"map exercises permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"Map Exercises\"), mdx(\"ol\", null, mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"Given the following array, create a second array with the result of getting the power of each number by itself.\")), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\"\n  }, \"const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];\\n\\n// Write your code here!\\n\\n// Expected result\\n// [1, 4, 27, 256, 3125, 46656, 823543, 16777216, 387420489, 10000000000]\\n\")), mdx(\"ol\", {\n    \"start\": 2\n  }, mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"Given the following array, create a second array that uses each one of the words to form the sentences seen below.\")), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\"\n  }, \"const foodList = ['Pizza', 'Ramen', 'Paella', 'Chulet\\xF3n'];\\n\\n// Write your code here!\\n\\n//Expected result:\\n/* [\\n    'Since I'm Italian, I love eating Pizza',\\n    'Since I'm Japanese, I love eating Ramen',\\n    'Since I'm from Valencia, I love eating Paella',\\n    'Although I don't eat meat, Chulet\\xF3n is certainly tasty'\\n   ]\\n*/\\n\")), mdx(\"ol\", {\n    \"start\": 3\n  }, mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"Given the following array, create a second array that forms sentences using the objects' properties:\")), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\"\n  }, \"const mfrStaff = [\\n  {\\n    name: 'Andrea',\\n    role: 'coordinator',\\n    hobbies: ['sing', 'watch movies']\\n  },\\n  {\\n    name: 'Xavi',\\n    role: 'teacher',\\n    hobbies: ['read', 'code']\\n  },\\n  {\\n    name: 'Ricardo',\\n    role: 'teacher',\\n    hobbies: ['read', 'garden']\\n  },\\n  {\\n    name: 'Teresa',\\n    role: 'teacher',\\n    hobbies: ['travel', 'watch series']\\n  },\\n  {\\n    name: ' Miguel',\\n    role: 'coordinator',\\n    hobbies: ['travel', 'build robots']\\n  }\\n];\\n\\n// Write your code here!\\n\\n// Expected result\\n/*\\n  [\\n    'Andrea is a coordinator and they like to sing and watch movies',\\n    'Xavi is a teacher and they like to read and code',\\n    'Ricardo is a teacher and they like to read and garden',\\n    'Rafa is a teacher and they like to travel and watch series',\\n    'Jordi is a teacher and they like to travel and build robots'\\n  ]\\n*/\\n\")), mdx(\"h3\", {\n    \"id\": \"filter-exercises\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h3\",\n    \"href\": \"#filter-exercises\",\n    \"aria-label\": \"filter exercises permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"Filter exercises\"), mdx(\"ol\", null, mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"Given the following array, create a second array only with the even numbers\")), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\"\n  }, \"const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];\\n\\n// Write your code here!\\n\\n// Expected result\\n// [2, 4, 6, 8, 10]\\n\")), mdx(\"ol\", {\n    \"start\": 2\n  }, mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"Given the following array, create a second array that filters out all the food that has meat and outputs the sentence seen below\")), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\"\n  }, \"// Tip: You can chain map and filter to first remove the elements you don't want in your new array and then giving them the desired shape\\n\\nconst foodList = [\\n  {\\n    name: 'Tempeh',\\n    isVeggie: true\\n  },\\n  {\\n    name: 'Cheesbacon burguer',\\n    isVeggie: false\\n  },\\n  {\\n    name: 'Beyond meat burguer',\\n    isVeggie: true\\n  },\\n  {\\n    name: 'Chulet\\xF3n',\\n    isVeggie: false\\n  }\\n];\\n\\n// Write your code here!\\n\\n//Expected result:\\n/* [\\n    'Nothing like a good Tempeh for dinner!',\\n    'Nothing like a good Beyond meat burguer for dinner!'\\n   ]\\n*/\\n\")), mdx(\"ol\", {\n    \"start\": 3\n  }, mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"Given the following array, create a second array that outputs only the name of the products that cost less than 300\\u20AC.\")), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\"\n  }, \"const inventory = [\\n  {\\n    name: 'Book',\\n    price: 10\\n  },\\n  {\\n    name: 'Burguer Menu',\\n    price: 5\\n  },\\n  {\\n    name: 'Bike',\\n    price: 300\\n  },\\n  {\\n    name: 'Programming course license',\\n    price: 155\\n  }\\n];\\n\\n// Write your code here!\\n\\n// Expected result\\n/*\\n  [\\n    'Book',\\n        'Burguer Menu',\\n    'Programming course license',\\n  ]\\n*/\\n\")), mdx(\"h3\", {\n    \"id\": \"reduce-exercises\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h3\",\n    \"href\": \"#reduce-exercises\",\n    \"aria-label\": \"reduce exercises permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"Reduce exercises\"), mdx(\"ol\", null, mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"Given the following array, get the multiplication of all the elements of it.\")), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\"\n  }, \"const numbersList = [45, 5, 1, 23, 32];\\n\\n// Write your code here!\\n\\n// Expected output --> 165600\\n\")), mdx(\"ol\", {\n    \"start\": 2\n  }, mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"Given the following array, concatenate all the elements in the array using \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \".reduce()\"), \".\")), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\"\n  }, \"const sentenceElements = [\\n  'My',\\n  'name',\\n  'is',\\n  /* Place your name here */,\\n  'and',\\n  'I',\\n  'love',\\n  'javascript'\\n];\\n\\n// Write your code here!\\n\\n// Expected result --> 'My name is John Doe and I love javascript'\\n\")), mdx(\"ol\", {\n    \"start\": 3\n  }, mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"Given the following array, get the total amount of those products that belong to the category of \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"code\"))), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\"\n  }, \"const booksList = [\\n  {\\n    name: 'You don\\\\'t know JS',\\n    author: 'Kyle Sympson',\\n    price: 15,\\n    category: 'code'\\n  },\\n  {\\n    name: 'The handmaids tale',\\n    author: 'Margaret Atwood',\\n    price: 18,\\n    category: 'novel'\\n  },\\n  {\\n    name: 'Game of Thrones',\\n    author: 'George R. Martin',\\n    price: 32,\\n    category: 'Fantasy'\\n  },\\n  {\\n    name: 'Eloquent Javascript',\\n    author: 'Marijn Haverbeke',\\n    price: 40,\\n    category: 'code'\\n  }\\n];\\n\\n// Write your code here!\\n\\n// Expected result --> 55\\n\")), mdx(\"h3\", {\n    \"id\": \"exercises-on-freecodecamp\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h3\",\n    \"href\": \"#exercises-on-freecodecamp\",\n    \"aria-label\": \"exercises on freecodecamp permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"Exercises on FreeCodeCamp\"), mdx(\"ol\", null, mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/functional-programming/use-the-map-method-to-extract-data-from-an-array\"\n  }, \"Use the map Method to Extract Data from an Array\")), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/seek-and-destroy\"\n  }, \"Seek and Destroy\")), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/sum-all-numbers-in-a-range\"\n  }, \"Sum All Numbers in a Range\")), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/functional-programming/use-higher-order-functions-map-filter-or-reduce-to-solve-a-complex-problem\"\n  }, \"Use Higher-Order Functions map, filter, or reduce to Solve a Complex Problem\"))));\n}\n;\nMDXContent.isMDXComponent = true;","headings":[{"depth":1,"value":"Arrays in depth"},{"depth":3,"value":"Map"},{"depth":3,"value":"Filter"},{"depth":3,"value":"Reduce"},{"depth":2,"value":"Exercises"},{"depth":3,"value":"Map Exercises"},{"depth":3,"value":"Filter exercises"},{"depth":3,"value":"Reduce exercises"},{"depth":3,"value":"Exercises on FreeCodeCamp"}]}},"pageContext":{"slug":"/advanced-js/arrays/","prev":{"label":"Further reading","link":"/advanced-js/functions-further-reading"},"next":{"label":"Further reading","link":"/advanced-js/arrays-further-reading"},"repositoryEditUrl":"https://github.com/rocketseat/gatsby-themes/tree/main/examples/gatsby-theme-docs/src/docs/advanced-js/arrays.mdx","repositoryProvider":"GitHub"}},"staticQueryHashes":["1954253342","2328931024","2501019404","973074209"]}