3e:null 3f:["$","title",null,{"children":"Functional programming | Peter Varholak | Observable"}] 45:T455,md` # Functional programming > *“The ratio of time spent reading (code) versus writing is well over 10 to 1 ... (therefore) making it easy to read makes it easier to write.”* - Robert Martin --- As developers we spend huge amounts of time reasoning about code we read, visualising what is happening and trying to hold all the application state in our head so we can parse what our app is doing at any given time. This is especially prevalent in object-oriented and imperative style of programming, yet these are not the only paradigms available to us. Functional programming (FP for short) is becoming ever so popular these days, especially for web development, thanks to the fact that JavaScript itself offers features for FP and although being a multi-paradigm language, recent updates seem to lead it more towards the functional spectrum. This is made even more prominent thanks to popular web frameworks such as React which embrace the declarative nature of FP. Given all this, let's have a look what functional programming offers and how we can write better code and make our app more readable. `46:T4da,md` ## Summary We have gone over a tiny fraction of what is functional programming and how it differs from OOP or imperative programming. Key takeaways are: - Keep your functions pure, they will be easier to test and reason about, they also provide a lot less cognitive overhead. - Use immutability when possible, it will help you identify the source of bugs and allows compiler to make performance optimisations during asynchronous code execution. - When you cannot use immutable variables, keep the mutable variables well contained so that mutable state of the variable doesn't leak into other parts of the code. - It's better to write smaller functions which you can compose together instead of monolithic ones. This helps a lot with reusability especially when you create project specific selectors/mappers. - Use currying when possible to allow for partial application of arguments, preffered way would be R.curry - Keep in mind that programming is just changing data from one form into another, the easiest way to achieve this is realizing what kind of relationships happen between input and output and composing modifications until you achieve your result. - It's better to think about what your code does instead of how it does it. `47:[] 43:{"id":"32412ee9288d2a15","slug":"react-nights-playground","title":"Functional programming","thumbnail":"cde4deb01d7d9aa00aa650b0285b4e6cfa0178305095d5d86fe468701ab9f2c9","access_level":"public","create_time":"$D2019-02-12T14:18:44.775Z","update_time":"$D2019-04-16T09:40:09.603Z","view_time":null,"first_public_time":"$D2019-02-12T16:15:18.105Z","has_unpublished_edits":null,"fork":false,"stars":3,"starred":false,"owner":{"type":"team","id":"5dcb3bb7054187b5","login":"varholak-peter","name":"Peter Varholak","avatar_url":"https://avatars-next.observableusercontent.com/772bcdd820800f5b68a0b965fc268ca80cc3e5cec34e34c14078e6db0b97ea75","tier":"starter_2024","bio":""},"version":528,"publish_version":528,"role":null,"authored":false,"authors":[{"type":"individual","id":"30a69b13a2c79642","login":"varholak-peter","name":"Peter Varholak","avatar_url":"https://avatars-next.observableusercontent.com/772bcdd820800f5b68a0b965fc268ca80cc3e5cec34e34c14078e6db0b97ea75","tier":null,"bio":""}],"members":[{"type":"individual","id":"30a69b13a2c79642","login":"varholak-peter","name":"Peter Varholak","avatar_url":"https://avatars-next.observableusercontent.com/772bcdd820800f5b68a0b965fc268ca80cc3e5cec34e34c14078e6db0b97ea75","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":4,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Functional programming","cells":[{"id":79,"value":"$45","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":99,"value":"md`\n## Purity\n> *“Pure functions are useful not because of what they can do, but because of what they cannot do.”*\n\n---\nPure functions cannot talk to outside world, they cannot accept any hidden input nor can they modify state in any way. All they can do is accept some input and infer a return value from it. It doesn't matter whether we call the function once or 1001 times, it will always return the same value, given the same input.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":102,"value":"sum = (a, b) => a + b","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":108,"value":"sum(10, 2)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":111,"value":"md`\nWriting pure function creates less bugs as they are easier to reason about. Since there are no side effects we can dedicate less brain power into understanding the context they appear in, which at the same time improves readability of our code.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":311,"value":"md`\n## Immutability\nUsing immutable variables simplifies debugging. To understand why this is true, we must ask ourselves what an error is and how an error makes itself known.\n\nOne rather common way that we discover that a program is incorrect is when we find that a variable has an unexpected value. Once we know which variable is incorrect, we just have to inspect the program to find the place where the variable was bound. When the variables are immutable, the code that produced the variable must be incorrect.\n\nIn an imperative language, variables can be changed many times, so every place where the variable was changed might be the place where the error occured, so we have to check all of them. This is especially eroneous once we start using the variable in *async* code with race conditions. With immutable variables there is only one place to look.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":316,"value":"md`\n### Immutability Examples\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":330,"value":"oldArr = [1, 2, 3, 4]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":337,"value":"oldObj = ({ id: 1, label: 'Kobzol', x: 'foo', y: 'bar', z: 'baz' })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":372,"value":"md`\n#### Changing primitive variable\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":374,"value":"{\n // Not `x += 1` (you would need to use \"let\" keyword anyway)\n const x = 1\n const x1 = x + 1\n return x1\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":327,"value":"md`\n#### Adding to an array\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":333,"value":"// Not `oldArr.push(5)`\n[...oldArr, 5]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":349,"value":"md`\n#### Prepending to an array\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":350,"value":"// Not `oldArr.unshift(0)`\n[0, ...oldArr]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":353,"value":"md`\n#### Adding property into an object\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":354,"value":"// Not `oldObj.new = 'quox'`\n({ ...oldObj, new: 'quox' })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":366,"value":"md`\n#### Overwriting property in an object\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":368,"value":"// Not `oldObj.label = 'Potato'`\n({ ...oldObj, label: 'Potato' })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":357,"value":"md`\n#### Removing property from an object\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":363,"value":"{\n // Not `delete oldObj.z`\n const { z, ...newObj } = oldObj\n return newObj\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":113,"value":"md`\n## Composability & Currying\nOne of the most important aspects of FP is the ability to store functions in variables. This allows us to pass functions into other functions as arguments, return functions from functions or even both at the same time!\n\nWe call such functions *\"Higher-order functions\"* (HOF for short) and together with pure functions they are the building blocks of FP.\n\nPreviously we stored an anonymous function \"(a, b) => a + b\" into a variable called \\`sum\\` let's create a bunch of other functions that behave in a similar manner.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":125,"value":"subtract = (a, b) => a - b","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":128,"value":"multiply = (a, b) => a * b","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":131,"value":"divide = (a, b) => a / b","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":135,"value":"md`\nSanity check:\n- \\`10 - 2: ${subtract(10, 2)}\\`\n- \\`10 * 2: ${multiply(10, 2)}\\`\n- \\`10 / 2: ${divide(10, 2)}\\`\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":140,"value":"md`\nWhat we can do now is define a HOF that allows us to **compose** functionality together using our simpler pure functions and building it into more complex functionality, while still preserving readability.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":142,"value":"pass10 = (fn, b) => fn(10, b)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":145,"value":"md`\nWe just created a function which accepts another function as the first parameter, and then calls it with \\`10\\` as the first argument and \\`b\\` as the second argument.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":147,"value":"pass10(sum, 5)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":150,"value":"pass10(multiply, 5)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":156,"value":"md`\nWe don't even have to store the passed function in a variable first, which gives us the ability to do this:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":158,"value":"pass10((a, b) => (20 + a) / b, 5)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":161,"value":"md`\nHowever HOFs can not only accept other functions as arguments, but can return functions as well. These functions then have their scope \"enhanced\" by the function that returned it. (More about context here: [How to understand the keyword this and context in JavaScript](https://medium.freecodecamp.org/how-to-understand-the-keyword-this-and-context-in-javascript-cd624c6b74b8) and here: [MDN - this](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this))\n\nSuch enhanced scopes allow us to create what we call curried function, which are basically functions which take their input arguments one at a time and return functions with these variables \"baked in\".\n\nSo let's now have a look at how we could rewrite our existing functions into their curried versions.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":168,"value":"cSum = a => b => a + b","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":173,"value":"cSubtract = a => b => a - b","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":177,"value":"cMultiply = a => b => a * b","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":180,"value":"cDivide = a => b => a / b","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":183,"value":"md`\nWe can now call our curried functions with the same arguments and get the same result as in the original version.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":185,"value":"cSum(10)(2)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":191,"value":"md`\nThe \\`cSum\\` function takes \\`10\\` as the first argument and then returns a **new function** which then accepts the \\`2\\` as the second argument and then returns their sum.\n\nAt first glance it seems like we made things more complicated, after all, it's easier to call \\`foo(1, 2, 3)\\` than to call \\`foo(1)(2)(3)\\` but writing curried function gives us amazing power in terms of reusability. Consider the example:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":194,"value":"{\n const add5 = cSum(5)\n return [add5(5), add5(2), add5(100)]\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":199,"value":"md`\nWe now created a whole new function which accepts an argument and adds \\`5\\` to it. Without the curried form we would have to write another
\\`pass5 = (fn, b) => fn(5, b)\\`
function, which is basically duplication of logic from our previous example, something we definitelly want to avoid as duplication can lead to a more buggy code.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":217,"value":"md`\n## Data transformation\n> *\"Bad programmers worry about the code. Good programmers worry about data structures and their relationships.\"* - Linus Torvalds\n\n---\nAs developers everything we do is data manipulation, whether it is accepting user input, requesting data from the server, sending data to the server or even transformation of data, it all comes back to us being in charge of what happens to the data and in web development case, how we display the data to our end users.\n\nWe do have a list of products available to us, which is an array of the following shape:\n\ntype Product {
\n  id: number;
\n  name: string;
\n  sex: \"F\" | \"M\";
\n  size: \"L\" | \"M\" | \"S\";
\n  type: \"pants\" | \"shirt\"
\n}\n\nLet's say we would like to get an array of products where the size of the product is medium ('M') using a more \"traditional\" imperative style:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":224,"value":"{\n let mediumProducts = []\n for (let i = 0; i < products.length; i++) {\n let currentProduct = products[i]\n if (currentProduct.size === \"M\") {\n mediumProducts.push(currentProduct)\n }\n }\n return mediumProducts\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":228,"value":"md`\nAnd now let's try writing it in a more functional way:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":232,"value":"products.filter(product => product.size === \"M\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":239,"value":"md`\nWhat happens here is that the [filter](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter) function calls the provided function called the *predicate* with every element of the array as its input and creates a new array composed only of elements which the predicate returned \\`true\\` for.\n\nThis creates quite a difference in both the amount of code as well as its readability. We can even go further and separate the predicate from the filter.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":243,"value":"isMedium = product => product.size === \"M\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":246,"value":"products.filter(isMedium)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":249,"value":"md`\nWe managed to reduce code that does the actual logic of filtering to mere 25 characters and created a pure function \\`isMedium\\` which we then can reuse in other parts of our code.\n\nNot only that but now the code does exactly what it says. We wanted to **filter** out **products** where the product **is Medium**, hence: \\`products.filter(isMedium)\\`\n\nBut let's say we now want to **get Name** of every **product**:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":259,"value":"getProductName = product => product.name","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":262,"value":"md`\nWhat we created here is called a selector. Which is basically a pure function which accepts an object and returns a single value derived from that object.\n\nThis however won't get us the name of every product in our array, but can serve as a predicate for our aptly named function, which we can use to **map** over our **products**:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":264,"value":"products.map(getProductName)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":279,"value":"md`\nHere is the point where reusability comes into play. Notice that our **getProductName** function isn't products specific, instead we can rewrite it into its more generic form:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":283,"value":"getName = ({ name }) => name","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":289,"value":"md`\nThe syntax \\`({ name })\\` is a [destructuring assignment](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment) which allows us to assign the value of property **name** of the passed in object into a variable of same name.\n\nWe can now verify that everything works the same as before with this new generic form.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":295,"value":"products.map(getName)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":303,"value":"md`\nWe also have a list of customers available to us, it's an array of the following shape:\n\ntype Customer {
\n  id: number;
\n  name: string;
\n  sex: \"F\" | \"M\";
\n  size: \"L\" | \"M\" | \"S\";
\n}\n\nNow that we have a more generic form of the **getName** function we can reuse it with arrays containing objects with the name property.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":307,"value":"customers.map(getName)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":497,"value":"md`\nSometimes we run into a situation when neither **map** nor **filter** can help us at a given task, in such scenario we can always depend on the most universal function called **reduce**.\n\nThe \\`reduce\\` function takes two arguments, first being a function which takes an **accumulator** value and then the actual value passed by the array it is called on. The second argument is the initial value that gets passed into the accumulator on first itteration.\n\nLet's say that our task for now is creating an object which has product ids as keys and the value for each key will be the name of the product, but this time composed of \\`sex\\`, \\`size\\` & \\`type\\` properties:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":502,"value":"products.reduce((acc, { id, sex, size, type }) => ({\n ...acc,\n [id]: `${type} - ${sex} (${size})`\n}), {})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":507,"value":"md`\nThe **acc** value starts as an empty object \"\\`{}\\`\" and on every iteration the \\`reduce\\` passes another product as the second argument to our function which we destructure and use those properties in the object that gets returned by the function and passed into **acc** for next itteration. The cycle repeats until we reach the end of the array when the **acc** gets returned as our final value.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":401,"value":"md`\n## Ramda\n\nRamda is a utility functions library similar to **Lodash** but emphasizing a more functional approach.\nA lot can be writtent about Ramda but its value is summarised pretty well on the [official page](https://ramdajs.com/).\n\nRamda greatly simplifies composing reusable functions, let's see how we can rewrite the functions we used so far with the help of Ramda.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":407,"value":"rGetName = R.prop('name')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":413,"value":"R.map(rGetName, customers)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":416,"value":"md`\nIt seems like nothing changed much, and it is true that functionality-wise nothing really changed, but we started moving into a more declarative way of programming, we stopped specifying how the code should be implemented and instead we focus on input/output shape of the data and compose functional pipelines that get us there.\n\nAs a final example let's say that our desired output is an object with first names of all customers in capital letters as the key and the values for that key will be an array of product names for their sex and size.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":421,"value":"md`\n### Imperative example\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":424,"value":"{\n let output = {}\n \n for (let i = 0; i < customers.length; i++) {\n const { name: cName, sex: cSex, size: cSize } = customers[i]\n \n let productNames = []\n \n for (let j = 0; j < products.length; j++) {\n const { name: pName, sex: pSex, size: pSize } = products[j]\n \n if (cSex === pSex && cSize === pSize) {\n productNames.push(pName)\n }\n }\n \n output[cName.toUpperCase()] = productNames\n }\n \n return output\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":436,"value":"md`\n### Functional example\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":437,"value":"customers.reduce((acc, { name: cName, sex: cSex, size: cSize }) => {\n const productNames = products\n .filter(\n ({ sex: pSex, size: pSize }) => cSex === pSex && cSize === pSize\n )\n .map(R.prop('name'))\n\n return {\n ...acc,\n [R.toUpper(cName)]: productNames\n }\n }, {})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":465,"value":"md`\n### Ramda example\nThis could have gotten a lot more convoluted with introduction of multiple other more advanced functions like zips or transducers, but for the sake of learning I used only some of the more basic utility functions and extracted them for clarity. Real world examples would inline the code a lot more, creating an even more concise version.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":450,"value":"{\n const extractSexSize = R.pick(['sex', 'size'])\n const isSameSexSize = obj1 => obj2 => R.equals(extractSexSize(obj1), extractSexSize(obj2))\n const filterProducts = nProducts => nCustomer => R.filter(isSameSexSize(nCustomer), nProducts)\n const getName = R.prop('name')\n const getUpperName = R.pipe(getName, R.toUpper)\n \n const magicFn = products => customers => {\n const getCustomerProducts = filterProducts(products)\n \n return R.reduce((acc, customer) => ({\n ...acc,\n [getUpperName(customer)]: R.map(getName, getCustomerProducts(customer))\n }), {}, customers)\n }\n \n return magicFn(products)(customers)\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":468,"value":"$46","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":470,"value":"md`\n## Resources\n- On functional programming:\n\n https://www.youtube.com/playlist?list=PL0zVEGEvSaeEd9hlmCXrk5yUyqUag-n84\n- Really great book covering the weirder parts of JS:\n\n https://www.amazon.com/Secrets-JavaScript-Ninja-John-Resig/dp/1617292850/\n- Ramda docs:\n\n https://ramdajs.com/\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":484,"value":"md`\n## Data & Libraries\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":215,"value":"products = [{\n id: 1,\n name: 'Shirt - M (S)',\n sex: 'M',\n size: 'S',\n type: 'shirt'\n}, {\n id: 2,\n name: 'Shirt - M (M)',\n sex: 'M',\n size: 'M',\n type: 'shirt'\n}, {\n id: 3,\n name: 'Shirt - M (L)',\n sex: 'M',\n size: 'L',\n type: 'shirt'\n}, {\n id: 4,\n name: 'Shirt - F (S)',\n sex: 'F',\n size: 'S',\n type: 'shirt'\n}, {\n id: 5,\n name: 'Shirt - F (M)',\n sex: 'F',\n size: 'M',\n type: 'shirt'\n}, {\n id: 6,\n name: 'Shirt - F (L)',\n sex: 'F',\n size: 'L',\n type: 'shirt'\n}, {\n id: 7,\n name: 'Pants - M (S)',\n sex: 'M',\n size: 'S',\n type: 'pants'\n}, {\n id: 8,\n name: 'Pants - M (M)',\n sex: 'M',\n size: 'M',\n type: 'pants'\n}, {\n id: 9,\n name: 'Pants - M (L)',\n sex: 'M',\n size: 'L',\n type: 'pants'\n}, {\n id: 10,\n name: 'Pants - F (S)',\n sex: 'F',\n size: 'S',\n type: 'pants'\n}, {\n id: 11,\n name: 'Pants - F (M)',\n sex: 'F',\n size: 'M',\n type: 'pants'\n}, {\n id: 12,\n name: 'Pants - F (L)',\n sex: 'F',\n size: 'L',\n type: 'pants'\n}]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":304,"value":"customers = [{\n id: 1,\n name: 'John Doe',\n sex: 'M',\n size: 'M'\n}, {\n id: 2,\n name: 'Samantha Smith',\n sex: 'F',\n size: 'S'\n}, {\n id: 3,\n name: 'Foolbert Bartinsky',\n sex: 'M',\n size: 'M'\n}, {\n id: 4,\n name: 'Bazilura Quxtor',\n sex: 'F',\n size: 'M'\n}, {\n id: 5,\n name: 'Loremius Ipsor',\n sex: 'M',\n size: 'L'\n}]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":488,"value":"R = import('https://unpkg.com/ramda@0.25.0/es/index.js?module')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":491,"value":"Reselect = import('reselect')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W47","stdlib":"1"}} 44:"$43:body"