Coding map and filter from scratch in plain JavaScript

📝 Episode notes
In this episode, I live code map and filter from scratch 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.

💛 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

[marceloprado]

A cool video would be about Ramda, covering more about the FP paradigm : )

[SeanJMay]

Really liking the warmer white balance and the practical lighting.
It's a teal & orange just by virtue of the cooler light off of the monitor.

[DeepeshDshooter]

great video....btw I assume the editor is VScode..so which pluging have you used which diplays content when you write :)

[usethisonelol]

What's the vs code extension (if it is vscode) that's allowing you to see variables live?

[jjcpjacobs]

Please do reduce next time! This is so great MPJ!

[dovh]

I always thought it was fun that reduce can implement a lot of your base functions, like map and filter, e.g.,

function Map(transform, array) {
return array.reduce((acc, val) => {
acc.push(transform(val))
return acc
}, [])
}

Map(x => x + 1, [1, 2, 3]) // [ 2, 3, 4 ]

I'm sure you already know that but I still think it is neat.

[RobinMacPhersonFilms]

I always really enjoy implementing array methods from scratch like this! Could we please continue this with reduce, debounce, and memoize?

I personally really really like implementing something like debounce and then discussing a little bit how you can implement it in the most basic form, but then maybe talk a little about the lodash debounce and how they add extra features and cover little edge cases. I think I would personally get a lot of value out of seeing your take on this as well as input from those in the chat 😊

Just some thoughts! Tack så mycket, som alltid :)

[seemsas]

I really like your tuts and learned a lot, especialy about concepts. This one appears a bit confused and unprepared?

[siam]

I laughed at "to satisfy people's OCD' lolllzzzz

[monocheddars]

I'm a big fan of these old school vanilla js videos

[debashishrambhola]

what extension are you using for inline output and comilation?

[smoothbeak]

I really enjoyed this one, this is lacking in Javascript and programming education in general

[NigelStratton]

MPJ is back and now with enhanced US keyboard typing! It makes my day so good.
You could parameterize addTwo to add any number, with addNum (number, add) => number + add; but how do you write [2, 4, 5, 6].map(addNum(blah, 20))?
I know it's a new setup but the "thunder" in the mic is quite distracting.

[KrotUA]

One more amazing video. When I watching your videos, I again become so excited of learning new information, and I want learn learn and learn. Thank you for that))

[nils]

Putting down your glass or hitting the table in any way is producing quite a bass that my glasses on the shelf are rattling 😅
22:09, 26:59 and 29:49
At first I thought my neighbor is stomping 😅

[michaeljenis]

I was actually sad to hear, that reduce will be "next time"... like literally, I just said :(" Thanks for another amazing video... love you!!!! it's so amazing to understand the concepts behind these functions for the first time. THANK YOU

[leonardlacson]

I feel like a lot of developers take higher order functions for granted. This is a great video!

[SolidousMdz]

Thanks for that, have you done the Class syntax sugar version of this yet?

[komodoutd]

T-Bag became a programmer, how cool is that! :D

[Mark-msgk]

There is a loud deep bass sound that you make while typing. Is it OK to take it as a sample for my music experiments :)