No video :(

Coding map and filter from scratch in plain JavaScript

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

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

50% 1

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

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

27 авг 2024

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист

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

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

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

Is the old MPJ back omg?! :D

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

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

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

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.

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

It's actually an extra lamp for effect, it's not from the monitor! But glad that the illusion works! :D

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

I love this old and classical fff

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

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.

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

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

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

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

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

Excellent idea!

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

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

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

That's why it's called live programming, videos with almost no edits, that's not easy.

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

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

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

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

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

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.

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

hahaha, thank you! Thanks for the feedback about the thunder, I'll see what I can do.

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

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.

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

I made a series on iterators and generators here: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-W4brAobC2Hc.html

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

Old MPJ is back!

@siam5672 3 года назад

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

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

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

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

Quokka.js

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

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

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

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

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

what extension are you using for inline output and comilation?

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

Quokka.js ( quokkajs.com/ )

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

Quokka

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

I've been wanting to know this for so long lol

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

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 😅

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

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

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

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

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

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

he bailed on reduce in my opinion. I'm sure he knows Reduce . but he couldn't pull it off on the spot .

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

To really approximate the builtin map/filter, you should be passing i as the second and transformedArray as the third parameter by the way ;)

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

Yeah, we should also not do the inversing of the parameters. :)

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

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

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

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.

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

What an interesting idea!

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

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

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

i think "transform" and "predicate" most docs use "callback"

@Mark-ms8gk 4 года назад

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

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

You could make it useful and create the functions for Map or Set instead of Array

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

Yo mpj is back with a new video.

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

Thanks..

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

Is there any difference between a Sweden's keyboard and US?

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

Swedish keyboards has three extra letters Å Ä and Ö. Also some special characters has a different placing. Google Swedish keyboard vs American

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

Mpj do a series on blob, and files

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

What is the text editor?

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

He says its vs code around 13 minutes in

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

Nice!

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

Your sponsor link in the description is broken

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

Fixed thanks!

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

Is there any "img map" solution for a modern responsive site? :-) Hi from Sweden too

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

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.

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

@@TimTindall hi, thank you for the work, but I meant like this: en.m.wikipedia.org/wiki/Image_map

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

Can you make a video about how function chaining is done? map.map.filter.me.code.period :D

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

your keyboard has deep bass, below 50hz could be

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

Not necessarily better but "functor" would be the formally correct name instead of "processor".

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

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.

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

@@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.