Coding map and filter from scratch in plain JavaScript
Вставка
- Опубліковано 1 жов 2024
- 💛 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 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
/ 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 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
Is the old MPJ back omg?! :D
A cool video would be about Ramda, covering more about the FP paradigm : )
great video....btw I assume the editor is VScode..so which pluging have you used which diplays content when you write :)
I really like your tuts and learned a lot, especialy about concepts. This one appears a bit confused and unprepared?
That's why it's called live programming, videos with almost no edits, that's not easy.
Please do reduce next time! This is so great MPJ!
I laughed at "to satisfy people's OCD' lolllzzzz
What's the vs code extension (if it is vscode) that's allowing you to see variables live?
Quokka.js
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 :)
Excellent idea!
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.
what extension are you using for inline output and comilation?
Quokka.js ( quokkajs.com/ )
Quokka
I've been wanting to know this for so long lol
I love this old and classical fff
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.
It's actually an extra lamp for effect, it's not from the monitor! But glad that the illusion works! :D
I really enjoyed this one, this is lacking in Javascript and programming education in general
Old MPJ is back!
this was not very easy to understand
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 😅
Can you make a video about how function chaining is done? map.map.filter.me.code.period :D
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.
hahaha, thank you! Thanks for the feedback about the thunder, I'll see what I can do.
I was actually sad to hear, that reduce will be "next time"... like literally, I just said "aaaaaw :(" Thanks for another amazing video... love you!!!! it's so amazing to understand the concepts behind these functions for the first time. THANK YOU
he bailed on reduce in my opinion.
I'm sure he knows Reduce . but he couldn't pull it off on the spot .
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 :)
One of my favorite features in node is the child_process standard library. You should totally do a video on it! running a python script as a promisified node child process is powerful and allows to capture stdout real time 😀 love it brother. python needs to be called with -m (if I remember correctly) and after every print statement you need to run sys.flush(). This will give you real time stdout from python to node. 😁. You could pipe a python application’s stdout over a web socket - might be able to do something fun by injecting stdin into the python script also.
What an interesting idea!
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))
Also consider that you can use generator functions now and return an iterable that yields values only when they are needed. I've just implemented something like this (siderite.dev/blog/linq-in-javascript-linqer/) so I thought I would mention it. The thing is many people coming from other programming languages don't automatically realize that map and filter and reduce return arrays and therefore they need to construct them. People rarely need that level of performance, but if you have a million items in an array or you do expensive computations in filter it might matter.
I made a series on iterators and generators here: ua-cam.com/video/W4brAobC2Hc/v-deo.html
You could make it useful and create the functions for Map or Set instead of Array
To really approximate the builtin map/filter, you should be passing i as the second and transformedArray as the third parameter by the way ;)
Yeah, we should also not do the inversing of the parameters. :)
i think "transform" and "predicate" most docs use "callback"
your keyboard has deep bass, below 50hz could be
I'm a big fan of these old school vanilla js videos
Thanks for that, have you done the Class syntax sugar version of this yet?
T-Bag became a programmer, how cool is that! :D
Well you failed my OCD by not using const for the return arrays
haha *I* failed YOUR OCD? :D
Yo mpj is back with a new video.
Is there any difference between a Sweden's keyboard and US?
Swedish keyboards has three extra letters Å Ä and Ö. Also some special characters has a different placing. Google Swedish keyboard vs American
Not necessarily better but "functor" would be the formally correct name instead of "processor".
Why makes you say that? In my world, a functor is the general name for something that you can map over, such as an array or a stream.
@@mpjme In mathematics a Functor is a mapping between an input category and an output category . Though admittedly Haskell uses the term to describe the transformation from a generic type to a type encompassed by another type (i.e. an array, tree, etc.). But since Javascript has a very interesting concept of type (category in this context) you could also consider the input and output values of map to have different types and therefore make the output value a value encompassed by the functor. But its all somewhat theoretical and as I said doesn't really clearly transfers the meaning of what the function represents.
I feel like a lot of developers take higher order functions for granted. This is a great video!
Mpj do a series on blob, and files
Is there any "img map" solution for a modern responsive site? :-)
Hi from Sweden too
I dunno why this struck me, but I assumed you mean applying a transformation to an array of images? I ended up working through something that functions...
const imageURLs = [ /* same domain urls */ ]
// Quick function to load our images
const requestImageData = ( URL ) => {
return new Promise( resolve => {
const img = new Image()
img.src = URL
img.onload = function( ) { resolve( this ) }
} )
}
// Keeps the output the same as the input
const identityTransform = ( context, image ) => {
context.setTransform( 1, 0, 0, 1, 0, 0 )
context.drawImage( image, 0, 0 )
const output = context.canvas.toDataURL( 'image/png' )
return output
}
// Random transformation
const rndTransform = ( context, image ) => {
randos = [...Array( 6 ).keys() ].map( number => Math.random() )
context.setTransform( ...randos )
context.drawImage( image, 0, 0 )
const output = context.canvas.toDataURL( 'image/png' )
return output
}
/*
**Takes an some urls, loads them up as images,
** then returns an array of the transformed images as Data URI
*/
const mapImages = ( transform, URLs ) => {
const imageData = Promise.all( URLs.map( requestImageData ) )
imageData.then( images => {
const transformedImages = [ ]
const canvas = document.createElement( 'canvas' )
const context = canvas.getContext( '2d' )
for( let i = 0; i < images.length; i++ ) {
const currentImage = images[ i ]
const transformedImage = transform( context, currentImage )
transformedImages.push( transformedImage )
}
return transformedImages
} )
}
// mapImages( rndTransform, imageURLs )
I dunno if it's performant or useful, but I did get a little practice with Promises.
@@TimTindall hi, thank you for the work, but I meant like this: en.m.wikipedia.org/wiki/Image_map
Your sponsor link in the description is broken
Fixed thanks!
early
What is the text editor?
He says its vs code around 13 minutes in
make a reduce
Are you the johnny deep to the programing world?
what does that mean
@@funfunfunction You are funny and look like him, lol.. jack sparrow??
Johnny Depp
Nice!
why are you smiling like insane?
Thanks..
CODE!
haha yes indeed