Coding reduce from scratch in vanilla JavaScript
Вставка
- Опубліковано 23 січ 2020
- 💛 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.com/mpj/64af7100e...
📝 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.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 missed your vanilla JS tutorials. Keep them coming!
I love your drive man. That’s something that I admire about your content. Keep it up!
NIce and short, really helpful to understand what goes on under the stood. Thanks MPJ.
I missed this format! Thanks for bringing it back!
Awesome video. Keep it up, mpj. Really liked the implementation that you did :)
Glad you liked it!
Hi prateek! (from rabbitwerks)
Love your channel. Love the content!
I miss your snazzy intros.
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
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
Love this content ! keep doing cool stuff like that
Love this format. Miss the old coffee intro.
oh, I should really make a new intro
@@funfunfunction Please involve struggling with keyboard typing lul
Hahahaha yes
Much Thanks. Helped a lot
Thank you so much! It helped me understand Redux Reducers !!!
MPJ good job on these videos
Thanks!
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.
Relaxing content...💻💻💻👍👍👍
Hi, awesome video, may i know what extension you have use to get directly result (output) on editor..?
Hey mpj, do you have a video/resource about how you handle your overlays?
Good mood to you
Good mode to you
Like this basic videos format!
I have an extremely exhaustive video series on generator functions, not sure if I can add much there.
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.
how about if the accumulator parameter is an object? or an array? that's not gonna work
hands down the best implementation of reduce function I saw! Now I really, thoroughly understand reduce :). Thanks a ton @mpj!!
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));
Hey! can I get the vs code configuration? Like which extensions you prefer . I'll be really thankful.
No extensions except Quokka. I get caught up in tool tweaking and never end up doing any real work.
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).
@Fun Fun Function
For as long as I shall dwell I shall henceforth not doubt your power.
I humbly bow at your feet MPJ
Did you consider implementing reduce with recursion?
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
@@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 :)
This is a strangest techno track I've heard..
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
next make redux ?
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
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;
}
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
thanks. this helps
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!**
man are you drunk?
@mpjme your recent video is not funny then it used to be in functional programming series