Coding reduce from scratch in vanilla JavaScript

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

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

50% 1

💛 Brilliant (Episode sponsor)
Interactive courses on computer science.
Use link to get 20% off annual subscription: brilliant.org/fff
💛Code from the episode
gist.github.co...
📝 Episode notes
In this episode I code / re-implement reduce in JavaScript from scratch, in order to get a better understanding of functional programming in JavaScript.
💛 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

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

11 окт 2024

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист

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

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

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

I missed your vanilla JS tutorials. Keep them coming!

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

Awesome video. Keep it up, mpj. Really liked the implementation that you did :)

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

Glad you liked it!

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

Hi prateek! (from rabbitwerks)

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

I love your drive man. That’s something that I admire about your content. Keep it up!

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

I missed your vanilla JS tutorials too. But I should say that you missed some part - initialAccumulatorValue (initialValue in the future) is not required parameter if there is no initialValue - first element of the array should be taken as accumulatorValue From MDN: InitialValue - A value to use as the first argument to the first call of the callback. If no initialValue is supplied, the first element in the array will be used and skipped. Calling reduce() on an empty array without an initialValue will throw a TypeError.

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

Love your channel. Love the content! I miss your snazzy intros.

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

Love this format. Miss the old coffee intro.

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

oh, I should really make a new intro

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

@@funfunfunction Please involve struggling with keyboard typing lul

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

Hahahaha yes

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

Thanks for continuing this series on, MPJ! Sending many positive vibes from your newest Patreon supporter in San Francisco after watching for years ✨So pleased to realize the live-stream is actually Monday morning HERE haha 🙏🏼 Keep up all the great work, man

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

Good morning to you, Robin! Thanks for the vibes and your long time support, really means the world to me 💛🥰Morning is a trick concept on a global level, when is it, really? SF mornings is a convenient time for me to shoot on, so I ended up picking that for my time zone haha

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

NIce and short, really helpful to understand what goes on under the stood. Thanks MPJ.

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

I missed this format! Thanks for bringing it back!

@geechai3475 Год назад

Much Thanks. Helped a lot

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

MPJ good job on these videos

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

Thanks!

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

@Fun Fun Function For as long as I shall dwell I shall henceforth not doubt your power. I humbly bow at your feet MPJ

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

Thank you so much! It helped me understand Redux Reducers !!!

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

Before watching the video I gave it a try and I came up with this recursive curried version: const reduce = fn => seed => xs => xs.length == 0 ? seed : reduce(fn)(fn(seed, xs[0]))(xs.slice(1));

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

Relaxing content...💻💻💻👍👍👍

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

Love this content ! keep doing cool stuff like that

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

Good mood to you

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

Good mode to you

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

Did you consider implementing reduce with recursion?

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

completely doable, similar implementation difficulty, but much less performatic than the sollution he implemented since the stack would grow much faster and consume more memory

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

@@Marcosmapf possibly, however reduce can be written using tail recursion to avoid growing the call stack and save on memory. The for-loop approach works just as well though, I'm just biased towards functional programming patterns :)

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

Hi, awesome video, may i know what extension you have use to get directly result (output) on editor..?

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

how about if the accumulator parameter is an object? or an array? that's not gonna work

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

Hey mpj, do you have a video/resource about how you handle your overlays?

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

Personally I prefer how the LINQ extension method for this is named: Aggregate to me that fits better the broad nature of what it does, reduce to me just has this underlying implication you are taking AWAY from the object if your doctors say i'm going to reduce your meds you'd intuitively think they mean mean you will take LESS meds but in javascript reasoning he actually means group all your meds together in one pill and take that, it just a little jarring, Calling it Aggregate while few people actually know that word once you do you understand that it doesn't matter if you are adding numbers, multiplying, concatenating strings, flattening multi dimensional arrays, etc what you are doing at a high level is aggregate potentially disparate things into a simpler value not always necessarily a single value, e.g. you are putting different fruit into fruit salad that to me just seems more honest about what it is doing

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

Like this basic videos format!

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

I have an extremely exhaustive video series on generator functions, not sure if I can add much there.

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

I do have a series on that. You can check my channel as well. I have also create my own async await using generators and pify. You can find that on my channel. Maybe it helps.

@AtulSingh-rq7wh 4 года назад

Hey! can I get the vs code configuration? Like which extensions you prefer . I'll be really thankful.

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

No extensions except Quokka. I get caught up in tool tweaking and never end up doing any real work.

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

This is a strangest techno track I've heard..

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

hands down the best implementation of reduce function I saw! Now I really, thoroughly understand reduce :). Thanks a ton @mpj!!

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

next make redux ?

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

I did it this way: function reduceArray(reducerFn, array, initVal) { let initialValue = initVal ? initVal : 0; for (let i = 0; i < array.length; i++) { initialValue = reducerFn(initialValue, array[i]); } return initialValue; } so you dont have to pass initial value

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

thanks. this helps

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

I could figure out how to do a simple reducer function just like adding numbers but I am having trouble implementing a more advanced reduce function where you can reduce an array down to an object. Now, I'm never getting to sleep lol

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

Probably not the greatest and most articulate but here is my implementation of reduce( ) : function reduce(arr,cb, initial ) { let result; let i; if(initial || initial === 0) { result = initial; } else { result = arr[0]; } for(!!initial || initial === 0 ? i = 0 : i = 1; i < arr.length; i++) { result = cb(result, arr[i]) } return result; }

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

Beginner: 3 hours later, **damn it, initialAccumulatorValue it is!** Experienced: ~5mins, either **finds good fitting name** or **I see this trickery! You'r not going to trick me into wasting hours! a straightforward initialAccumulatorValue it is!**

@AjitKumar-wb9bp 4 года назад

@mpjme your recent video is not funny then it used to be in functional programming series

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

man are you drunk?

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

hands on explanation: reducing something complex to something simpler. Often times you have an array of objects (complex type) and might want to do sth. with one property for all objects (simpler type).