30:T424,{ let reducedArray = array.slice(); const rmQuote = str => str.replace(/"/g, ""); const randomColors = Array(reducedArray.length - 1).fill() .map( () => Array(3).fill() .map( () => Math.ceil((Math.random() * 150) + 100).toString(16) ) .reduce( (a,v) => a + (v.length === 1 ? "0"+v : v) , "#") ); const tableData = reducedArray.reduce( (a,v,k) => [ ...a, { agg: reducedArray.slice(0, k).reduce( reducer, initialValue ), cur: v, ret: reducedArray.slice(0, k+1).reduce( reducer, initialValue ), }], [] ) .map( (v,k,a) => `${k+1} | ` + `

${rmQuote(JSON.stringify(v.agg))}

| ` + `${v.cur} | ${reducer.toString()} | ` + `

${rmQuote(JSON.stringify(v.ret))}

` ) .reduce( (a,v,i) => a + (i!==0?"\n":"") + v, "" ) return ( md ` Loop Number | Aggregator | Current Value | Function | Return Value --- | --- | --- | --- ${tableData} ` ); }31:[] 2e:{"title":"Higher Order Functions (Filter, Map, Reduce): March 11th","cells":[{"id":0,"value":"md`# Higher Order Functions (Filter, Map, Reduce): March 11th\n\nThese are very powerful pure higher order functions (HOFs) on JS Arrays\n\nTo keep things simple, we'll work with the following array`","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"array = [ 14, 18, 23, 34, 45, 56 ]","pinned":false,"hidden":false,"mode":"ojs"},{"id":77,"value":"md` ## Review\n\nLet's remind ourselves about arrays... How would I..`","pinned":false,"hidden":false,"mode":"ojs"},{"id":80,"value":"md` 1) find element \"18\" \\n\n2) what's the size of the array? \\n\n3) how do I add \"5\" to the array? \\n\n4) take off the last element? \\n\n5) concatenate two arrays?`","pinned":false,"hidden":false,"mode":"ojs"},{"id":85,"value":"{\n return array.element18\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":89,"value":"{\n return array.size\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":94,"value":"{\n return array.added5\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":99,"value":"{\n return array.withoutLastElement\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":105,"value":"{\n var arr = [1,2,3,4,5,6]\n return arr.addArray\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":120,"value":"md` ---\n\n## Function Shorthand in JS\n\nWhy does the following not work?`","pinned":false,"hidden":false,"mode":"ojs"},{"id":122,"value":"{\n return 1=>0\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":130,"value":"md` Javascript sometimes comes out with big updates to the language that let us do cool things, and the last really big one came out as ES 2015. All of the stuff you see here today was introduced in this version, and made our lives a lot easier... \\n\nOne of the constructs introduced was the arrow function. Basically, it introduces shorthand for functions with the syntax\n\\`\\`\\` javascript\n(parameters) => {execution}\\`\\`\\`\nFor example\n\\`\\`\\` javascript\nfunction bob(a, b, c)\n{\n if(a+b {\n if(a+bexecutable\\`\nFor example,\n\\`\\`\\` javascript\nfunction bob(a,b,c)\n{\n return a+b+c\n} \\`\\`\\`\ncan become\n\\`\\`\\` javascript\nvar bob = (a,b,c) => a+b+c \\`\\`\\` `","pinned":false,"hidden":false,"mode":"ojs"},{"id":147,"value":"md` ---\n2) when we have only one parameter:\n\\`\\`\\` javascript\nfunction bob(a)\n{\n return a*2\n} \\`\\`\\`\ncan become\n\\`\\`\\` javascript\nvar bob = a => a*2 \\`\\`\\` `","pinned":false,"hidden":false,"mode":"ojs"},{"id":154,"value":"md` ---\n3) when we have no parameters:\n\\`\\`\\` javascript\nfunction bob()\n{\n return 3000\n} \\`\\`\\`\ncan become\n\\`\\`\\` javascript\nvar bob = () => 3000 \\`\\`\\` `","pinned":false,"hidden":false,"mode":"ojs"},{"id":162,"value":"md` ### Exercise: How do I arrowfy this function?`","pinned":false,"hidden":false,"mode":"ojs"},{"id":164,"value":"bob = (a,b,c,d) => {\n if(ad) {\n return (a,b,c,d) => a+b+c+(d||1)\n } else if (b<1 && c>0)\n return (a,r,t,s) => a-t+(s*t)-r*r\n else if (b==a && c==d && a==c)\n return (a) => a*2\n else\n return a+b+c+d;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":292,"value":"bob(1,2,3,4)(1,1,1,1)","pinned":false,"hidden":false,"mode":"ojs"},{"id":112,"value":"md` ---\n## What are HOFs?\n\nHOFs are functions that take functions as parameters and return them as outputs. For example, I could make a HOF that took operators (+-/*) as inputs and returned the function they symbolized.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":300,"value":"{\n var rand = function( doSomething, doSomethingElse, operand1, operand2 ) {\n var result1 = doSomething(operand1, operand2)\n var result2 = result1;\n for( let i = 0; i < 4; i++) {\n result2 = doSomethingElse(result2, operand2) \n }\n return result2\n }\n var sum = (a,b) => a+b\n var product = (a,b) => a*b\n return rand(product, sum, 1, 2)\n \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"md`\n---\n\n### Filter\n\n Filter takes a function as input, and uses that function to determine what elements to keep in an array.\n\n\\`\\`\\`javascript\narr.filter(\n callback(element[, index[, array]]) // first argument is a function that returns true (include it) or false (don't include it)\n [, thisArg] // second argument is \"this\" (don't worry about it for now)\n)\n\\`\\`\\`\n\nGiven the array, return an array of all values less than 30. \n\n*With a for loop...*\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":306,"value":"array","pinned":false,"hidden":false,"mode":"ojs"},{"id":14,"value":"{\n let resultArray = []\n for( let i = 0; i< array.length; i++) {\n if( array[i] < 30 ) resultArray.push(array[i])\n }\n \n return resultArray\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":19,"value":"md`\n*With filter*\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":33,"value":"lessThanThirty = x => x < 30","pinned":true,"hidden":false,"mode":"ojs"},{"id":310,"value":"array","pinned":false,"hidden":false,"mode":"ojs"},{"id":28,"value":"array.filter( lessThanThirty )","pinned":true,"hidden":false,"mode":"ojs"},{"id":31,"value":"{\n let reducedArray = array.slice();\n const rmQuote = str => str.replace(/\"/g, \"\");\n const randomColors = Array(reducedArray.length - 1).fill()\n .map( () => Array(3).fill()\n .map( () => Math.ceil((Math.random() * 150) + 100).toString(16) )\n .reduce( (a,v) => a + (v.length === 1 ? \"0\"+v : v) , \"#\")\n );\n \n const tableData = reducedArray.reduce( (a,v,k) => [ ...a, {\n cur: v, \n ret: reducedArray.slice(0, k+1).filter( lessThanThirty ),\n }], [] )\n .map( (v,k,a) => `${k+1} | ` + \n `${v.cur} | ${lessThanThirty.toString()} | ` + \n `
${rmQuote(JSON.stringify(v.ret))}
` )\n .reduce( (a,v,i) => a + (i!==0?\"\\n\":\"\") + v, \"\" )\n \n return (\n md `\nLoop Number | Current Value | Function | Return Value\n--- | --- | ---\n${tableData}\n \n `);\n \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":39,"value":"md`\n---\n\n### Map\n\nFor transforming data in an array\n\n\\`\\`\\`javascript\narr.map(\n callback(currentValue[, index[, array]]), // first param: function that returns what we should swap it with\n [, thisArg] // second param: \"this\" (don't worry about it)\n)\n\\`\\`\\`\n\nBreak each number into its digits. Switch it with that letter of the alphabet. \n\n(ie. 13 -> \"1,3\" -> \"a,c\" -> \"ac\")\n\n\n*With map*\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":46,"value":"digitToLetters = x => (\"\"+x).split(\"\").map( d => [\"a\",\"b\",\"c\",\"d\",'e','f','g','h','i','j'][d-1] ).join(\"\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":49,"value":"array.map(digitToLetters)","pinned":true,"hidden":false,"mode":"ojs"},{"id":312,"value":"array","pinned":false,"hidden":false,"mode":"ojs"},{"id":54,"value":"{\n let reducedArray = array.slice();\n const rmQuote = str => str.replace(/\"/g, \"\");\n const randomColors = Array(reducedArray.length - 1).fill()\n .map( () => Array(3).fill()\n .map( () => Math.ceil((Math.random() * 150) + 100).toString(16) )\n .reduce( (a,v) => a + (v.length === 1 ? \"0\"+v : v) , \"#\")\n );\n \n const tableData = reducedArray.reduce( (a,v,k) => [ ...a, {\n cur: v, \n ret: reducedArray.slice(0, k+1).map( digitToLetters ),\n }], [] )\n .map( (v,k,a) => `${k+1} | ` +\n `${v.cur} | ${digitToLetters.toString()} | ` + \n `
${rmQuote(JSON.stringify(v.ret))}
` )\n .reduce( (a,v,i) => a + (i!==0?\"\\n\":\"\") + v, \"\" )\n \n return (\n md `\nLoop Number | Current Value | Function | Return Value\n--- | --- | ---\n${tableData}`\n );\n \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":62,"value":"md`\n---\n\n### Reduce\n\nFor generating a single value out of all the info from an array. That value can be more or less complicated than the array you're starting with.\n\n\\`\\`\\`javascript\narr.reduce(\n callback( aggregator, currentValue, index ) \\\\ reducer function, returns next aggregator\n [, initialValue] \\\\ first value of the aggregator\n)\n\\`\\`\\`\n\nI want the sum of all the values in the array\n\n*With reduce*\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":65,"value":"reducer = (agg, curVal ) => agg + curVal","pinned":true,"hidden":false,"mode":"ojs"},{"id":68,"value":"initialValue = 5","pinned":true,"hidden":false,"mode":"ojs"},{"id":316,"value":"{\nvar total = 0\n\nfor(let i =0; i< array.length; i++) { total += array[i] }\nreturn total\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":250,"value":"array.reduce(reducer, initialValue)","pinned":true,"hidden":false,"mode":"ojs"},{"id":70,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":319,"value":"arr2 = [ 'a', 'b', 'c', 'd', 'e' ]","pinned":false,"hidden":false,"mode":"ojs"},{"id":327,"value":"arr2.reduce((a,b) => a)","pinned":false,"hidden":false,"mode":"ojs"},{"id":185,"value":"md` ---\n## Exercises:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":188,"value":"md`1) Arrowfy the function below:\n\\`\\`\\` javascript\nfunction bob(a,n,s,w,e,r){\nif(a==w*e)\n return function awe(x,y){return x*y}\nelse if (a==r)\n return function arrr(){return \"Pirate\"}\nelse if (e*r==e+e+w+e+e)\n return function siren(emt){return \"hi, my name is \" + emt + \" and I'm an EMT. What seems to be the problem today?\"}\nelse if (n+s==a+s)\n return n+s*(a+n+s+w+e+r)\nelse\n return function oops() {return null}\n} \\`\\`\\` `","pinned":false,"hidden":false,"mode":"ojs"},{"id":190,"value":"arrowfy = function bob(a,n,s,w,e,r){\nif(a==w*e)\n return function awe(x,y){return x*y}\nelse if (a==r)\n return function arrr(){return \"Pirate\"}\nelse if (e*r==e+e+w+e+e)\n return function siren(emt){return \"hi, my name is \" + emt + \" and I'm an EMT. What seems to be the problem today?\"}\nelse if (n+s==a+s)\n return 65\nelse\n return function oops() {return null}\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":196,"value":"md` Your answer will be checked here:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":198,"value":"{\n expect(arrowfy(5,0,0,1,5,1)(4,5)).to.equal(20)\n expect(arrowfy(0,1,4,-15,5,1)(\"bob\")).to.equal(\"hi, my name is bob and I'm an EMT. What seems to be the problem today?\")\n expect(arrowfy(1,1,4,-15,5,1)()).to.equal(\"Pirate\")\n expect(arrowfy(1,2,3,4,5)()).to.equal(null)\n expect(arrowfy(4,4,5,1,1)).to.equal(65)\n return success()\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":224,"value":"md` 2) Use filter() to make sure that the array doesn't contain any dog infiltrators. Dogs can hide really cleverly, but always have to either be strings that include \"dog\" or Objects that must return a .secretSpecies() method that returns \"dog\"`","pinned":false,"hidden":false,"mode":"ojs"},{"id":227,"value":"findDog = (arr) => arr //edit here to make the method","pinned":true,"hidden":false,"mode":"ojs"},{"id":231,"value":"{\n var cat = {secretSpecies: \"catty\"};\n var imACatToo = {secretSpecies: \"dog\"}\n var bob = {name: \"bob\"}\n \n expect(findDog([\"dog\",\"doggo\",\"cat\",\"adsfnwaa adskndogsdsfnq\", \"mouse\", \"god\",\"d og\"])).to.equal([\"cat\",\"mouse\", \"god\", \"d og\"])\n expect(findDog([\"dog\"])).to.equal([])\n expect(findDog([cat,imACatToo,bob,62, .01, \"cat\", null])).to.equal([cat,bob,62, .01, \"cat\", null])\n return success()\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":247,"value":"md`3) Use map() to replace all the dogs in an array with \"cat\". Same rules for finding stealthy dogs apply as above.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":260,"value":"catArr = (arr) => arr","pinned":true,"hidden":false,"mode":"ojs"},{"id":264,"value":"{\n var cat = {secretSpecies: \"catty\"};\n var imACatToo = {secretSpecies: \"dog\"}\n var bob = {name: \"bob\"}\n \n expect(catArr([\"dog\",\"doggo\",\"cat\",\"adsfnwaa adskndogsdsfnq\", \"mouse\", \"god\",\"d og\"])).to.equal([\"cat\",\"cat\",\"cat\",\"cat\",\"mouse\", \"god\", \"d og\"])\n expect(catArr([\"dog\"])).to.equal([\"cat\"])\n expect(catArr([cat,imACatToo,bob,62, .01, \"cat\", null])).to.equal([cat,\"cat\",bob,62, .01, \"cat\", null])\n return success()\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":266,"value":"md` 4) Use reduce() to count the number of dogs in our array. Same techniques for finding dogs apply as above.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":276,"value":"numOfDogs = (arr) => 0","pinned":true,"hidden":false,"mode":"ojs"},{"id":280,"value":"{\n var cat = {secretSpecies: \"catty\"};\n var imACatToo = {secretSpecies: \"dog\"}\n var bob = {name: \"bob\"}\n \n expect(numOfDogs([\"dog\",\"doggo\",\"cat\",\"adsfnwaa adskndogsdsfnq\", \"mouse\", \"god\",\"d og\"])).to.equal(3)\n expect(numOfDogs([\"dog\"])).to.equal(1)\n expect(numOfDogs([cat,imACatToo,bob,62, .01, \"cat\", null])).to.equal(1)\n expect(numOfDogs([])).to.equal(0)\n expect(numOfDogs([\"cat\"])).to.equal(0)\n return success()\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":192,"value":"md` # Imports`","pinned":false,"hidden":false,"mode":"ojs"},{"id":194,"value":"expect = {\n const chai = await require('https://bundle.run/chai@4.2.0')\n return chai.expect\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":201,"value":"md` ## Helpers`","pinned":false,"hidden":false,"mode":"ojs"},{"id":204,"value":"success = () => {\n return html `✓ : All good`\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":340,"value":"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}