Pipe Functions and Compose Functions | Javascript Functional Programming Tutorial

Web Dev Roadmap for Beginners (Free!): bit.ly/DaveGrayWebDevRoadmap
Learn how to create pipe functions and compose functions in this Javascript functional programming tutorial. Functional programming needs small pure functions to work together through composition or pipelining. This advanced Javascript tutorial will help you learn through several examples.
🚩 Subscribe ➜ bit.ly/3nGHmNn
🚀 JavaScript for Beginners: Full Course (8 hours): • JavaScript Full Course...
Functional Programming with Javascript Tutorials:
🔗 Javascript Higher Order Functions Tutorial: • Higher Order Functions...
🔗 Pure Functions Tutorial: • What are Pure Function...
🔗 Currying Functions Tutorial: • How to Curry Functions...
🔗 Javascript Shallow Copy vs Deep Copy Tutorial: • Shallow Copy and Deep ...
Pipe Functions and Compose Functions | Javascript Functional Programming Tutorial
(00:00) Intro
(0:32) What are compose and pipe functions?
(3:03) Creating a compose function
(5:31) Creating a pipe function
(6:56) Adding a function with multiple parameters
(9:30) Example: a word count function
(11:14) Nested pipe function example: palindrome checks
(13:08) Adding clone / copy functions to compose / pipe
(13:59) Example 1: Clone function before impure function
(17:04) Example 2: Curry the function for a partial that is unary
(19:29) Example 3: Insert the clone function as a dependency
✅ Follow Me:
Twitter: / yesdavidgray
LinkedIn: / davidagray
Blog: yesdavidgray.com
Reddit: / daveoneleven
Was this tutorial about Pipe Functions and Compose Functions for Functional Programming in Javascript helpful? If so, please share. Let me know your thoughts in the comments.
#functional #programming #javascript

[@DaveGrayTeachesCode]

Functional Programming is centered around Pure Functions which are typically tiny, composable functions. In this tutorial, we'll focus on the "composable" part. After creating tiny pure functions, we need to be able to chain them together somehow. That's where "compose" and "pipe" functions come in. We're going to look at how to create your own compose and pipe functions as well as some examples of how to use them. This is an advanced javascript tutorial. If you are just starting out, I suggest watching my 8 hour full course Javascript tutorial here: kzbin.info/www/bejne/e5eknWyYrN-JkM0

[@saadowain3511]

Amazing Dave

[@aya2222]

wonderful tutorial!! thank you for your sharing very practical examples!!

[@DaveGrayTeachesCode]

You're welcome! 💯

[@dylanm7638]

the time you dedicated to build these contents are worth, no doubt about that, these videos helps lot, thanks

[@adimardev1550]

just considered Subscribed! after watching lots of your series, it boosted my javascript skills like never before. Please Teach Us More Sir!!!

[@DaveGrayTeachesCode]

Welcome aboard! 💯

[@ibrahimyoussef4489]

Awesome, Dave

[@JakeHaugen]

You’re a fantastic teacher! Doing a great job with your lights on the intro by the way. I actually think that you might benefit from showing a face cam, I know it’s kinda taboo among developer channels but I believe that seeing a teacher’s face helps with teaching and retention. Just my opinion. I agree with others that I’d love to see a non trivial example or two where I can see how this approach really helps in production. Or even a link to an exercise that I could do that involves piping as the most elegant approach. For example, I have learned about currying in the past but it’s always just thrown in as a “oh you can do that” and it sneaks it’s way in without being called out in a lot of libraries like higher order components in react. That leads to me using the pattern without being able to implement it myself. Seeing some real examples could help, kinda like how if I was learning about cars, I would want to learn about an engine and then go racing in it to enjoy it and really cement that experience in the real world. Still love the channel. Please keep making videos 😄

[@DaveGrayTeachesCode]

Jake, thanks for the feedback! I really appreciate it. And I'm glad you're enjoying the channel. 💯🚀

[@mdalishanali3909]

😍

[@quofintech9200]

Great content, Thanks Dave

[@DaveGrayTeachesCode]

You're welcome! Glad it helped 💯

[@johnacsyen]

This is awesome. Thanks

[@rangabharath4253]

Awesome as always. Thanks 👍😊

[@DaveGrayTeachesCode]

You're welcome! 💯

[@paulhammond8583]

Great explanations in this video. Hands on and applicable. Very well thought out. Subscribed to your channel.

[@DaveGrayTeachesCode]

Welcome aboard!

[@gordonmullen7272]

Dave Dave; you did it again ::::: thanks for the detail and all the help! I mean, man it really helps... I can hear Eddie in the background playing 'Eruption' right now, cuz it finally 'Clicked' Must have been how he felt when he first discovered his 'tapping' technique lol...

[@DaveGrayTeachesCode]

Ha! Wow! To have one of my tutorials compared to EVH tapping is an honor! 💯🎸🎸🎸

[@Ath9493]

Awesome stuff

[@anhnguyennguyen4696]

Thank you so much. Your video is so great. It helps me a lot to understand compose functions.

[@DaveGrayTeachesCode]

Glad it was helpful!

[@hosamgnaba3205]

another brilliant video my friend

[@DaveGrayTeachesCode]

Thank you!

[@kshitijvengurlekar1192]

Youve covered some really good topics :)

[@DaveGrayTeachesCode]

Thank you for the kind words! 🙏

[@ahmad-murery]

Very practical, It's easier for me to work with pipe functions as it goes with the reading direction, although I'm natively rtl reader🙄, the Currying approach looks cleaner and very organized, one question just came to my mind, what if we needed a way to break the execution chain at some point due to an error or a business logic requirement? - maybe throwing an error and then catch it on the calling context, - or wrapping the piping/composing function with another function that accepts an optional error callback function, - or maybe just making use of a Promise instead but this may add extra complexity layer - or dispatching a custom event anyway, sometimes I'm overthinking about simple things Great video as expected. Thanks Dave

[@DaveGrayTeachesCode]

Thanks Ahmad! All good discussion points my friend. 💯🙏

[@ahmad-murery]

@@DaveGrayTeachesCode Thanks to you my friend

[@jimkk159]

The youtube cover is not so good, but this video content is awesome and clear.

[@DaveGrayTeachesCode]

Glad you like the content and that you're not here to learn graphic design. 😀

[@kensleylewis]

excellent guide. The only thing I would add to this is perhaps 2 short examples of when it would be beneficial to instead rely on utility libraries like Lodash or Ramda when working with compose and pipe processes.

[@DaveGrayTeachesCode]

Good suggestion! I have considered making a separate Ramda tutorial. 💯

[@kensleylewis]

@@DaveGrayTeachesCode that would be exciting to watch. You definitely have my vote!

[@sandeshwar]

Hi @DaveGrayTeachesCode , great video there! I was wondering, instead of passing cloned object, how feasible it will be to use spread operator and/or .map() function within each of the functions in the pipeline. Which one would be more performant or better, per you?

[@DaveGrayTeachesCode]

Thank you! It has been long enough that I would need to rewatch this to know exactly which part you are referencing. I can say that the spread operator will only create a "shallow clone". The new JS structuredClone() might be worth a look as it seems like the best way to currently create "deep copies".

[@urjithemantdesai5273]

Arguments- the values (variables) you pass to a function when calling it Parameters- the values (variables) you state in the function definition

[@DaveGrayTeachesCode]

You are correct. I (like many others) use those terms interchangeably when referencing them, but I do agree that you are accurate with your comment.

[@wallacesansanoski8185]

Correct me if I am wrong, why not throw a error if splitOnSpace function was not create in 12:00 min in nested pipe.

[@kierrereeg]

Any opinion on things like fp-ts the typescript library for functional programming?

[@DaveGrayTeachesCode]

Not yet. I'll be starting a Typescript series soon. Many functional programming practices are great. It gets difficult if you go fully functional everywhere, but here is a good library for it: ramdajs.com/

[@Johnny-rn8fb]

definitely u got like from me

[@DaveGrayTeachesCode]

Thank you!

[@andyelgrand0]

I guess due to reduce this only really works when you want a single reduceable parameter to be passed between functions. Howeverin a more "real life" example, where an object could be passed between functions (normally done for query purposes) which is not meant to e reduced as a whole normlly... does this approach have any advantages over just stringing the functions async?

[@DaveGrayTeachesCode]

Good question - and here is a good article ( dev.to/webduvet/synchronous-and-asynchronous-function-composition-5a20 ) showing both sync and async functions composition. Pipe and compose are both from functional programming where the goal is to decouple from everything else - which would be the main reason cited for using them.

[@avertry9529]

Dave, thank you for pipes I did not know these were a thing. But I'm a bit confused at 16:33 on the comparison, I thought they would always return false because it's not referencing the same object in memory, even if the homeScore was 0. This is why lodash has a deep comparison, to compare every property. I guess I need to do more testing. What am I missing, I just tested this? const obj1 = { home: 0, away: 0 } const obj2 = { home: 0, away: 0 } console.log(obj1 === obj2) // false

[@DaveGrayTeachesCode]

Referential equality. Objects can look identical but they reference different spots in memory. I was using a shallowClone function - which is not a deepClone (aka deepCopy) - as you mention, lodash has deep comparison, but we aren't doing that. I dive deeper into that in this video: kzbin.info/www/bejne/anbNYX-tn6h3kLM

[@shineLouisShine]

Thanks for the explanation. For me, both of those topics : (3:03) Creating a compose function (5:31) Creating a pipe function, Including the operators names ("prev", "val","fn") in the order of which they've been written as arguments, As well as the entire functions chronicles, Including the fact that 'pipe' reads from left to right while Looking quite the same (with minor unexplained differences) - Specially after the opening example - That was an overwhelmingly unproportional jump forward. This entire section is yet definitely unintuitive for me, Even after rewatching each and every related previous video which you've been referring to. I watched it all over again, came back, and yet - Couldn't figure out the concept's resolutions through the chosen function names, and through all the parts which have been presented as obvious. I've watched this video more than once, But too many obstacles during it are preventing me from translating your explanation into a coherentive conclusion. I do appreciate the fact that you put your time and effort though.

[@DaveGrayTeachesCode]

No doubt that it is complicated. The library Ramda.js provides these functions, too. Maybe an explanation from an article will help you: randycoulman.com/blog/2016/05/31/thinking-in-ramda-combining-functions/#pipelines

[@user-ip6ew6xk4r]

I am getting this type error. TypeError: str.split is not a function at split (/tmp/BNaMPuWsLj.js:4:24) at /tmp/BNaMPuWsLj.js:1:53 at Array.reduce () at /tmp/BNaMPuWsLj.js:1:33 at isStrPalindrome (/tmp/BNaMPuWsLj.js:23:42) at Object. (/tmp/BNaMPuWsLj.js:25:13) at Module._compile (node:internal/modules/cjs/loader:1256:14) at Module._extensions..js (node:internal/modules/cjs/loader:1310:10) at Module.load (node:internal/modules/cjs/loader:1119:32) at Module._load (node:internal/modules/cjs/loader:960:12)

[@user-pc9fz5in8z]

I wish you could have a complete course in a place like udemy

[@DaveGrayTeachesCode]

Thank you for the request! I plan to offer a complete course within the year. I'll offer it on my own site instead of Udemy though. Sign up for updates here: www.getrevue.co/profile/davegrayteachescode 💯🚀

[@cocoscacao6102]

Although I find these FP concepts interesting, I prefer the actual (business) code to be procedural and dead simple.

[@csmrfx]

I think that using (foo) => (bar) => zyx syntax is plain bad. Confusing and worse. Its just making JS worse. As if things like funCall(bar, foo)(zyx) were not ambiguous enough. Thank you for the great vid.

[@DaveGrayTeachesCode]

You're welcome

[@ajiteshmishra0005]

Are these programming techniques working in today's world also OR they are debricated? Or not relevant??

[@MrJloa]

Am i the only one that finds compose method unnatural? Look at the pure composition foo(bar(1)). As majority of us are reading left-to-right this is very uncomfy, just like writing compose(foo, bar) Pipe on other hand is logical 1 | bar | foo. That's just the logic order of operations I dunno mb it's just my preference, I always prefer using pipe only over compose

[@deepmashru8951]

Mujhe ghar jana hain. kaha a gaya main

[@akashddeepchitransh4537]

I really didn't like that you just pasted all the code and then explaining. May be it works for many other but for me it is not.