2c:null 2d:["$","title",null,{"children":"Lesson 9: Filter, Map, & Reduce | samchencode | Observable"}] 32: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} ` ); }33:[] 30:{"id":"69d9b055008ae31a","slug":"lesson-9-filter-map-reduce","title":"Lesson 9: Filter, Map, & Reduce","thumbnail":"08f85daafbbf129f541ff864e868f6e22bd3d964f4e19e0bddb9f6dc7ccd1e66","access_level":"public","create_time":"$D2018-10-26T14:45:49.769Z","update_time":"$D2018-10-26T15:26:38.671Z","view_time":null,"first_public_time":"$D2018-10-26T14:46:26.718Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"d0ed83f45d7d5784","login":"samchencode","name":"","avatar_url":"https://avatars-next.observableusercontent.com/0a95370882d989eea68dc6ace06cf7eb9c5419bb2fc2c29ad5a1c533a100d5e3","tier":"starter_2024"},"version":74,"publish_version":74,"role":null,"authored":false,"authors":[{"type":"individual","id":"97d550ce3a040d07","login":"samchencode","name":"","avatar_url":"https://avatars-next.observableusercontent.com/0a95370882d989eea68dc6ace06cf7eb9c5419bb2fc2c29ad5a1c533a100d5e3","tier":null}],"members":[{"type":"individual","id":"97d550ce3a040d07","login":"samchencode","name":"","avatar_url":"https://avatars-next.observableusercontent.com/0a95370882d989eea68dc6ace06cf7eb9c5419bb2fc2c29ad5a1c533a100d5e3","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":{"id":"c81079ca9aa3666b","slug":"fall-2018-app-club-lessons","title":"Fall 2018 App Club Lessons ","owner":{"id":"d0ed83f45d7d5784","login":"samchencode","name":""}},"type":"notebook","body":{"titling":"auto","title":"Lesson 9: Filter, Map, & Reduce","cells":[{"id":0,"value":"md`# Lesson 9: Filter, Map, & Reduce\n\nThese are very powerful pure higher order functions on JS Arrays\n\nTo keep things simple, we'll work with the following array`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"array = [ 14, 18, 23, 34, 45, 56 ]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"md`\n---\n\n### Filter\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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"md`\n*With filter*\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"lessThanThirty = x => x < 30","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"array.filter( lessThanThirty )","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":49,"value":"array.map(digitToLetters)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":65,"value":"reducer = (agg, curVal ) => agg + curVal","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":68,"value":"initialValue = 0","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":70,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1"}} 31:"$30:body"