Using reduce to code filter and map in vanilla JavaScript
Вставка
- Опубліковано 30 січ 2020
- 💛 Educative.io (Episode sponsor)
Use link for 10% off: educative.io/FunFunFunction
Educative.io helps you learn in-demand tech skills faster. Text-based courses with embedded coding environments mean you can jump in and learn without all the fluff - no set-up, no scrubbing back and forth through videos, no hassle. Get 10% off any course when you go through our link: educative.io/FunFunFunction
📝 Episode notes
In this episode, I live code map and filter USING REDUCE in vanilla plain JavaScript, in order for us to get a better, intuitive understanding of how higher order functions work in functional programming in JavaScript.
💛 Code from the episode
gist.github.com/mpj/955034c4e...
💛 Follow on Twitch and support by becoming a Subscriber
We record the show live Mondays 7 AM PT
/ funfunfunction
💛 Fun Fun Forum
Private discussion forum with other viewers in between shows. www.funfunforum.com. Available to patron members, become one at / funfunfunction
💛 mpj on Twitter
/ mpjme
💛 CircleCI (Show sponsor)
Robust and sleek Docker-based Continuous Integration as a service. I used CircleCI prior to them becoming a sponsor and I love that their free tier is powerful enough for small personal projects, even if they are private. Use this link when you sign up to let them know you came from here:
circleci.funfunfunction.com
💛 FUN FUN FUNCTION
Since 2015, Fun Fun Function (FFF) is one of the longest running weekly UA-cam shows on programming 🏅 thanks to its consistency and quality reaching 200,000+ developers.
🤦♂️ The Failing Together concept is what makes FFF unique. Most coding content out there focus on step-by-step tutorials. We think tutorials are too far removed from what everyday development is like. Instead, FFF has created a completely new learning environment where we grow from failure, by solving problems while intensively interacting with a live audience.
Tutorials try to solve a problem. Failing Together makes you grow as a developer and coworker.
📹 Each show is recorded live on Twitch in a 2-hour livestream on Mondays. The host, assisted by the audience, is tasked to complete a programming challenge by an expert guest. Like in the real world, we often fail, and learn from it. This, of course, reflects what the audience identifies with, and is one of the most praised aspects of the show.
⏯ On Fridays, an edited version of the show is adapted for and published on UA-cam.
Content Topics revolve around: JavaScript, Functional Programming, Software Architecture, Quality Processes, Developer Career and Health, Team Collaboration, Software Development, Project Management - Наука та технологія
I'm loving this series of videos on higher order functions, man! I didn't find the code from this episode though. For the last couple of videos you had put up a gist. I missed the live streaming last Monday so idk maybe you put the link in the chat. Anyway thanks for the content! Hope you feeling better! Um forte braço!
Thank you for pointing this out, put it here: gist.github.com/mpj/955034c4e1f507bf8e540e4a3c77f653
@@funfunfunction Thank you, mpj!
From a complete beginner: Your videos are amazing and the way you explain things on them makes these kind of topics very easy to understand. Thank you so much!
Good stuff. This is the type of video that hooked me on Fun Fun Function. Keep up the great work!
That is great! Thank you! As usual, you are awesome!)
YOU are awesome! Joking aside, thank you so much for your cheers and your support, it really means a lot.
@@funfunfunction Thanks!)
08:13 - happens at the worst of times (live streams, interviews,...), and you have a good way to deal with it! Keep up the great job! ^^
Thank you for your kind words and support! 💛
You can try putting a towel or a t-shirt below your keyboard to somewhat reduce the typing sounds from carrying through the table. Not perfect but works a bit.
There is already a big pad under it, unfortunately. I'll try to solve it using a more stable desk next, but I suspect that the only way that will really solve it is to move the mic off the table somehow, but the current space doesn't quite allow that as easily as the last one.
You should implement the Maybe monad and "map" for it (or "then" if you want to liken it to Promises instead)
Awesome tutorial on reduce! I've been using VSC as my editor but I do like the results that print out in real-time in your editor, may I ask what you are using?
What extension are you using that logs what variables are ? That seems useful so you don't have to console.log everything...
TRANSDUCER !!!!!!!!
If anyone is interested in oneliner definitions of reduce,map and filter, I tried making some here:
let reduce = (f,i,xs) => xs.length > 0 ? reduce(f, f(i,xs[0]), xs.slice(1)) : i;
let map = (f, xs) => reduce( (a,i) => a.concat(f(i)), [], xs);
let filter = (f,xs) => reduce( (a,i) => f(i) ? a.concat(i) : a, [], xs);
Awesome!
@@funfunfunction Interestingly, because of how concat is implemented in javascript (it acts as "add range" if you pass it lists) this implementation of map works as both map and flatMap, if you want it to work only as map you need to use a.concat([i]).
@@northcode_ maybe it should be renamed from "map" to "then" to mirror how "then" is both map and flatMap for promises. :)
Tried to do without watching the video, this is what I came up with:
const reduce = reducer => memo => ([first, ...rest]) => first ? reduce(reducer)(reducer(first)(memo))(rest) : memo
const mapReducer = f => a => memo => memo.concat(f(a))
const filterReducer = f => a => memo => f(a) && memo.concat(a) || memo
const map = f => arr => reduce(mapReducer(f))([])(arr)
const filter = f => arr => reduce(filterReducer(f))([])(arr)
Can we rewrite filter like this?
function filter(predicate, array) {
const initialArray = []
const filterReducer = (filteredArray, currentItem) => {
const shouldBeIncluded = predicate(currentItem)
return shouldBeIncluded ? filteredArray.concat(currentItem) : filteredArray
}
// or even shorter like this
// const filterReducer = (filteredArray, currentItem) => predicate(currentItem) ? filteredArray.concat(currentItem) : filteredArray
return reduce(filterReducer, initialArray, array)
}
The initial challenges in reactivex.io/learnrx/ are great for learning how to bend arrays to your will
Do a video on webpacks and webGL
Please and thank you and have a nice day
const filter = (arr, pred) => arr.reduce((acc, val) => pred(val) ? [...acc, val] : acc, [])
const map = (arr, cb) => arr.reduce((acc, val) => [...acc, cb(val)], [])
I like the way you explain these functions, but what do you think of the approach I take in this article?
medium.com/heavenlyx/functional-programming-the-simple-version-63fe10678f6e
I try to start from the very fundamentals whenever I'm explaining these things to beginners. Like, I don't even assume they know what a functions is. Do you think it's better to focus on their relation with imperative loops instead?
Why dont you just learn Common Lisp already, JMe?