Using reduce to code filter and map in vanilla JavaScript

📝 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

💛 Follow on Twitch and support by becoming a Subscriber
We record the show live Mondays 7 AM PT

💛 Fun Fun Forum

💛 mpj on Twitter

💛 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:

💛 FUN FUN FUNCTION
Since 2015, Fun Fun Function (FFF) is one of the longest running weekly YouTube 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 YouTube.

Content Topics revolve around: JavaScript, Functional Programming, Software Architecture, Quality Processes, Developer Career and Health, Team Collaboration, Software Development, Project Management

[GiammaCarioca]

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!

[willianandrade]

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!

[ryangill]

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

[letscodesomething]

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

[YauhenKavalchuk]

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

[mladjo]

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.

[nathancornwell]

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

[Andrew-pzjx]

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?

[joaofnds]

Tried to do without watching the video, this is what I came up with:
const reduce = reducer => memo => ([first, ...rest]) => first ? : 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 =>
const filter = f => arr =>

[insertoyouroemail]

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

[SushmitGaur]

Can we rewrite filter like this?

function filter(predicate, array) {
const initialArray = []

const filterReducer = (filteredArray, currentItem) => {
const shouldBeIncluded = predicate(currentItem)
return shouldBeIncluded ? : filteredArray
}


// or even shorter like this
// const filterReducer = (filteredArray, currentItem) => predicate(currentItem) ? : filteredArray


return reduce(filterReducer, initialArray, array)
}

[northcode_]

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

[kzeojbl]

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

[Muhammad-oxsy]

I like the way you explain these functions, but what do you think of the approach I take in this article?
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?

[kusemono]

Why dont you just learn Common Lisp already, JMe?