{"@attributes":{"version":"2.0"},"channel":{"title":"DEV Community: ysael pepin","description":"The latest articles on DEV Community by ysael pepin (@ysael).","link":"https:\/\/dev.to\/ysael","image":{"url":"https:\/\/media2.dev.to\/dynamic\/image\/width=90,height=90,fit=cover,gravity=auto,format=auto\/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F56686%2Fb62fbb5a-1643-4fa2-ae7e-a24c49222404.jpeg","title":"DEV Community: ysael pepin","link":"https:\/\/dev.to\/ysael"},"language":"en","item":[{"title":"Functional programming basics part 3: Currying","pubDate":"Sat, 02 Mar 2019 13:47:45 +0000","link":"https:\/\/dev.to\/ysael\/functional-programming-basics-part-3-currying-3bpn","guid":"https:\/\/dev.to\/ysael\/functional-programming-basics-part-3-currying-3bpn","description":"

\n \n \n So what is this thing people are calling currying?\n<\/h3>\n\n

Currying is simply<\/code> the action of converting a function that take multiple arguments into one that can support the ability to return a new function if the argument it got is not the last one. <\/p>\n\n

If it is the last argument, it will execute.<\/p>\n\n

Let's say I have a simple function:
\n<\/p>\n\n

\n
const<\/span> add<\/span> =<\/span> (<\/span>x<\/span>,<\/span> y<\/span>)<\/span> =><\/span> x<\/span> +<\/span> y<\/span>;<\/span>\n\n<\/code><\/pre>\n\n<\/div>\n\n\n\n
If I try to call it with only one argument, it fails...
\n<\/p>\n\n
\n
const<\/span> add<\/span> =<\/span> (<\/span>x<\/span>,<\/span> y<\/span>)<\/span> =><\/span> x<\/span> +<\/span> y<\/span>;<\/span>\n\nadd<\/span>(<\/span>1<\/span>)<\/span> \/\/ undefined <\/span>\n\/\/ (x is now 1 but y is undefined, so 1 + undefined = undefined)<\/span>\n\n<\/code><\/pre>\n\n<\/div>\n\n\n\n
Fortunately, modern JavaScript give us the ability to curry very easily via arrow functions.<\/p>\n\n
Here is the same function curried:
\n<\/p>\n\n
\n
const<\/span> add<\/span> =<\/span> x<\/span> =><\/span> y<\/span> =><\/span> x<\/span> +<\/span> y<\/span>;<\/span>\n\nadd<\/span>(<\/span>1<\/span>)<\/span> \/\/ function add() <\/span>\n\/* (this newly returned function as encapsulated \nthe value of 1 and will look like this --> y => 1 + y ) *\/<\/span>\n\n<\/code><\/pre>\n\n<\/div>\n\n\n\n
The nice thing about this is that now, we can call it with only one argument witch will return a new function that will expect one last argument y<\/code>.<\/p>\n\n
We could alternatively put that new returned function in a variable and start using it:
\n<\/p>\n\n
\n
const<\/span> add<\/span> =<\/span> x<\/span> =><\/span> y<\/span> =><\/span> x<\/span> +<\/span> y<\/span>;<\/span>\n\nconst<\/span> add1<\/span> =<\/span> add<\/span>(<\/span>1<\/span>);<\/span>\n\n\nconsole<\/span>.<\/span>log<\/span>(<\/span>add1<\/span>(<\/span>1<\/span>))<\/span> \/\/ 2<\/span>\n<\/code><\/pre>\n\n<\/div>\n\n\n\n
Hope that helps you understand what currying is :) <\/p>\n\n","category":["javascript","functional","programming"]},{"title":"Functional programming basics part 2: Higher order function","pubDate":"Mon, 17 Sep 2018 14:17:02 +0000","link":"https:\/\/dev.to\/ysael\/functional-programming-basics-part-2-higher-order-function-2ckl","guid":"https:\/\/dev.to\/ysael\/functional-programming-basics-part-2-higher-order-function-2ckl","description":"
\n  \n  \n  So what make a function of the highest order?\n<\/h3>\n\n
In order to be called a Higher order function<\/code>, one must either take an other function as a parameter or return a function.<\/p>\n\n
Take function as a parameter??? what? no way!! <\/p>\n\n
Let's start by writing a simple function that is not from the highest order:
\n<\/p>\n\n
\n
const<\/span> addYtoX<\/span> =<\/span> (<\/span>x<\/span>,<\/span> y<\/span>)<\/span> =><\/span> x<\/span> +<\/span> y<\/span>\n<\/code><\/pre>\n\n<\/div>\n\n\n\n
Now lets try to pass this function to an other function:
\n<\/p>\n\n
\n
const<\/span> ofTheHighestOrder<\/span> =<\/span> (<\/span>f<\/span>,<\/span> x<\/span>,<\/span> y<\/span>)<\/span> =><\/span>  f<\/span>(<\/span>x<\/span>,<\/span> y<\/span>)<\/span>\n\nconsole<\/span>.<\/span>log<\/span> (<\/span>ofTheHighestOrder<\/span>(<\/span>addYtoX<\/span>,<\/span> 1<\/span>,<\/span> 2<\/span>))<\/span> \/\/ 3<\/span>\n<\/code><\/pre>\n\n<\/div>\n\n\n\n
Woah that worked!! As you can see we can pass functions to other functions and use them like any other property! <\/p>\n\n
Let's rename our highness to make it more declarative:
\n<\/p>\n\n
\n
    const<\/span> performOperation<\/span> =<\/span> (<\/span>operation<\/span>,<\/span> x<\/span>,<\/span> y<\/span>)<\/span> =><\/span>  operation<\/span>(<\/span>x<\/span>,<\/span> y<\/span>)<\/span>\n\n    console<\/span>.<\/span>log<\/span> (<\/span>performOperation<\/span>(<\/span>addYtoX<\/span>,<\/span> 1<\/span>,<\/span> 2<\/span>))<\/span> \/\/ 3<\/span>\n<\/code><\/pre>\n\n<\/div>\n\n\n\n
That make senses right? I hope you can see at this point the value and the potential of a higher order function? <\/p>\n\n
Let's see an other example:
\n<\/p>\n\n
\n
    const<\/span> addYtoX<\/span> =<\/span> (<\/span>x<\/span>,<\/span> y<\/span>)<\/span> =><\/span> x<\/span> +<\/span> y<\/span>\n    const<\/span> multiplyYbyX<\/span> =<\/span> (<\/span>x<\/span>,<\/span> y<\/span>)<\/span> =><\/span> x<\/span> *<\/span> y<\/span>\n    const<\/span> performOperation<\/span> =<\/span> (<\/span>operation<\/span>,<\/span> x<\/span>,<\/span> y<\/span>)<\/span> =><\/span>  operation<\/span>(<\/span>x<\/span>,<\/span> y<\/span>)<\/span>\n\n    console<\/span>.<\/span>log<\/span> (<\/span>performOperation<\/span>(<\/span>addYtoX<\/span>,<\/span> 1<\/span>,<\/span> 2<\/span>))<\/span> \/\/ 3<\/span>\n    console<\/span>.<\/span>log<\/span> (<\/span>performOperation<\/span>(<\/span>multiplyYbyX<\/span>,<\/span> 1<\/span>,<\/span> 2<\/span>))<\/span> \/\/ 2<\/span>\n<\/code><\/pre>\n\n<\/div>\n\n\n\n
Voil\u00e0!! There is so much more we can do with this but we will stop here for now and look at the second variation of a higher order function; a function that returns a function... humm that sound weird lets just write one and see if this works!
\n<\/p>\n\n
\n
    const<\/span> ofTheHighestOrder<\/span> =<\/span> ()<\/span> =><\/span> {<\/span>\n        return<\/span> poke<\/span> =<\/span> ()<\/span> =><\/span> '<\/span>... your highness?? <\/span>'<\/span>\n    }<\/span>\n\n    console<\/span>.<\/span>log<\/span>(<\/span>ofTheHighestOrder<\/span>())<\/span> \/\/ function poke()<\/span>\n<\/code><\/pre>\n\n<\/div>\n\n\n\n
Cool! As you can see we are able to return a function from a function!!! Let's fiddle a bit more with this guy:
\n<\/p>\n\n
\n
    const<\/span> ofTheHighestOrder<\/span> =<\/span> ()<\/span> =><\/span> {<\/span>\n        return<\/span> poke<\/span> =<\/span> ()<\/span> =><\/span> '<\/span>... your highness?? <\/span>'<\/span>\n    }<\/span>\n\n    const<\/span> willPoke<\/span> =<\/span> ofTheHighestOrder<\/span>()<\/span>\n\n    console<\/span>.<\/span>log<\/span>(<\/span>willPoke<\/span>())<\/span> \/\/ ... your highness?? <\/span>\n<\/code><\/pre>\n\n<\/div>\n\n\n\n
Awesome! we can create other functions using a function that returns a function which make them of the highest order as well. <\/p>\n\n
For now that might seem quite useless but that opens the door to a lot more possibilities that we will explore in further episodes. <\/p>\n\n
Until then, stay high!<\/p>\n\n","category":["javascript","functional","programming"]},{"title":"Functional programming basics part 1: Pure function","pubDate":"Thu, 13 Sep 2018 01:23:49 +0000","link":"https:\/\/dev.to\/ysael\/functional-programming-basics-part-1-pure-function-e55","guid":"https:\/\/dev.to\/ysael\/functional-programming-basics-part-1-pure-function-e55","description":"
\n  \n  \n  What is purity?\n<\/h3>\n\n
Purity for a function is defined as one that will always return the same output for the same input and perform no side effects. <\/p>\n\n
So what do we mean by same output for the same input? <\/p>\n\n
well... lets see some examples...<\/p>\n\n
lets say we have this code:
\n<\/p>\n\n
\n
let<\/span> y<\/span> =<\/span> 2<\/span>\nconst<\/span> addYtoX<\/span> =<\/span> (<\/span>x<\/span>)<\/span> =><\/span> x<\/span> +<\/span> y<\/span>\n<\/code><\/pre>\n\n<\/div>\n\n\n\n
This function is not considered pure as the output could be modified by the value of y<\/code> witch mean we cannot guaranty it will return the same output for the same input.
\n<\/p>\n\n
\n
let<\/span> y<\/span> =<\/span> 2<\/span>;<\/span>\nconst<\/span> addYtoX<\/span> =<\/span> (<\/span>x<\/span>)<\/span> =><\/span> x<\/span> +<\/span> y<\/span>\n\nconsole<\/span>.<\/span>log<\/span>(<\/span>addYtoX<\/span>(<\/span>3<\/span>))<\/span> \/\/ 5<\/span>\n\ny<\/span> =<\/span> 1<\/span> \nconsole<\/span>.<\/span>log<\/span>(<\/span>addYtoX<\/span>(<\/span>3<\/span>))<\/span> \/\/ 4<\/span>\n\n<\/code><\/pre>\n\n<\/div>\n\n\n\n
As you can see the value of y<\/code> will affect the output of the function even if we call it using the same input... this is definitely impure.<\/p>\n\n
Lets look at the pure version of the same function:
\n<\/p>\n\n
\n
\nconst<\/span> addYtoX<\/span> =<\/span> (<\/span>x<\/span>,<\/span> y<\/span>)<\/span> =><\/span> x<\/span> +<\/span> y<\/span>\n<\/code><\/pre>\n\n<\/div>\n\n\n\n
There you go!!! <\/p>\n\n
I can call this guy as many times as I want and I can be sure to get the same output for the same input. <\/p>\n\n
That's cool man, but what about that side effect thing? <\/p>\n\n
well... lets see the same function but with added side effects!
\n<\/p>\n\n
\n
\nconst<\/span> addYtoX<\/span> =<\/span> (<\/span>x<\/span>,<\/span> y<\/span>)<\/span> =><\/span> {<\/span>\n    makeSomeNoodles<\/span>()<\/span>\n    return<\/span> x<\/span> +<\/span> y<\/span>\n};<\/span>\n<\/code><\/pre>\n\n<\/div>\n\n\n\n
I hope you can guess the side effect is caused by the makeSomeNoodles<\/code> function call right? <\/p>\n\n
Why is that bad? Well... the function is suppose to add x to y and now it is making noodles before computing my values? And I have no idea what is happening during that function.... maybe it is actually crashing my simple function before it can execute or worst!!! <\/p>\n\n
Anyway, I hope you get the basic idea. :) <\/p>\n\n
Until next time... stay pure! <\/p>\n\n","category":["javascript","functional","programming","purity"]}]}}