No video :(

Using reduce to code filter and map in vanilla JavaScript

Подписаться 263 тыс.

Просмотров 10 тыс.

50% 1

💛 Educative.io (Episode sponsor)
Use link for 10% off: educative.io/F...
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/F...
📝 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.co...
💛 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.funfunforu.... 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.funfu...
💛 FUN FUN FUNCTION
Since 2015, Fun Fun Function (FFF) is one of the longest running weekly RU-vid 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 RU-vid.
Content Topics revolve around: JavaScript, Functional Programming, Software Architecture, Quality Processes, Developer Career and Health, Team Collaboration, Software Development, Project Management

Опубликовано:

27 авг 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 30

@GiammaCarioca 4 года назад

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!

@funfunfunction 4 года назад

Thank you for pointing this out, put it here: gist.github.com/mpj/955034c4e1f507bf8e540e4a3c77f653

@GiammaCarioca 4 года назад

@@funfunfunction Thank you, mpj!

@willianandrade1357 4 года назад

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!

@ryangill9518 4 года назад

Good stuff. This is the type of video that hooked me on Fun Fun Function. Keep up the great work!

@YauhenKavalchuk 4 года назад

That is great! Thank you! As usual, you are awesome!)

@funfunfunction 4 года назад

YOU are awesome! Joking aside, thank you so much for your cheers and your support, it really means a lot.

@YauhenKavalchuk 4 года назад

@@funfunfunction Thanks!)

@letscodesomething8804 4 года назад

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! ^^

@funfunfunction 4 года назад

Thank you for your kind words and support! 💛

@mladjo2505 4 года назад

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.

@funfunfunction 4 года назад

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.

@insertoyouroemail 4 года назад

You should implement the Maybe monad and "map" for it (or "then" if you want to liken it to Promises instead)

@northcode_ 4 года назад

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);

@funfunfunction 4 года назад

Awesome!

@northcode_ 4 года назад

@@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]).

@insertoyouroemail 4 года назад

@@northcode_ maybe it should be renamed from "map" to "then" to mirror how "then" is both map and flatMap for promises. :)

@Andrew-pz8jx 4 года назад

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?

@user-kz8eo7jb1l 4 года назад

const filter = (arr, pred) => arr.reduce((acc, val) => pred(val) ? [...acc, val] : acc, []) const map = (arr, cb) => arr.reduce((acc, val) => [...acc, cb(val)], [])

@joaofnds 4 года назад

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)

@nathancornwell1455 4 года назад

What extension are you using that logs what variables are ? That seems useful so you don't have to console.log everything...

@SushmitGaur 4 года назад

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) }

@julienjamet 4 года назад

TRANSDUCER !!!!!!!!

@tkbyte 4 года назад

The initial challenges in reactivex.io/learnrx/ are great for learning how to bend arrays to your will

@mritunjaypathak251 4 года назад

Do a video on webpacks and webGL

@soupedenuit 4 года назад

Please and thank you and have a nice day

@kusemono1755 4 года назад

Why dont you just learn Common Lisp already, JMe?

@Muhammad-ox5sy 4 года назад

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?