Higher-order functions - Part 1 of Functional Programming in JavaScript
HTML-код
- Опубликовано: 21 сен 2024
- 💖 Support the show by becoming a Patreon
/ funfunfunction
In this video series, I will teach you how to do functional programming in JavaScript. In this first one, I will tell you about one of the most important concepts in functional programming: Higher-order functions. I will talk about what higher order-functions are, and then move on to code, and show you how to use them. I will also tell you why you should learn functional programming in the first place.
💛 Follow on Twitch
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...
💛 Quokka (Show sponsor)
Wonder how MPJ evaluates JavaScript inline his editor. Quokka is the answer - use this link when you buy to let them know you came from here:
quokka.funfunfu...
💛 FUN FUN FUNCTION
Since 2015, Fun Fun Function (FFF) is one of the longest running weekly RUclips 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 RUclips.
Content Topics revolve around: JavaScript, Functional Programming, Software Architecture, Quality Processes, Developer Career and Health, Software Development, Project Management
Andrzej klapek Great point! That is correct, I made a mistake. It's not part of ES6. It's so common that I just assumed that it was. You need to use underscore, lodash or mout.
Or ramda.js if you are an OG.
it is not clear where did you make a mistake, can you please include a time where there mistake were made into this comment. Thanks.
EugeneTest Manager - 8:51. `Array.prototype.reject` doesn’t exist in ES6.
thanks
You could also extend the Prototype and create a reject method on the Array...
Array.prototype.reject = function(fn) {
let rej = test => !fn(test);
return this.filter(rej);
};
Miss you MPJ 😌! Thanks again for your passion and commitment when this channel was active! Your content is still an incredible reference that I recommend to every new JS dev that joins our team.
I praise that day when youtube put one of your videos to my "recommended". You are so fun and enjoyable to watch. You definitely have a teacher talent. Please, keep doing that :)
I don't even know where too begin really, first I only found your channel a couple of days ago and I have already watched every video you have posted. your channel is miles above anything I've seen on youtube, Really, I'm not in the lest trying to stroke your ego but I have been watching tutorial videos since way back when and theses are the most information packed and yet entertaining that I've seen. PLEASE know that I'm very grateful for your channel and can't wait to see more videos. buckle up chaps this channel is about to BLOW up!
Thanks a ton!
Have you found anyone better is you wrote this 9 months? I just discovered this guy. I am a beginner to intermediate and functional programming is what it takes to get to the next level.
Thank you, Thak you PJ ... you are my official stackoverflow!
I agree, and I've made it my mission to make sure I make a comment about it in as many of MPJ's videos as possible.
There is nothing on programming on RUclips that is even close to how good and informative it is.
The thing that is so good is that, when you hear a new concept for the first time as a beginner, you get a lot of questions, MPJ always brings these up to discuss the why of them, the counter arguments to why they might be good, counter technologies that are similar, why HE thinks they are better, etc.
I really hope he keeps doing these videos, the world needs them.
All the same words from my side, I am indebted as a student getting access to such high quality and enetertaining videos to learn javascript and programming as a whole from such a cool person. I would definitely start with patreon as soon I gain my financial independence, keep doing the good work man! Much appreciations. :) Wish you happy days ahead
This is just a friendly comment saying that this video series has solved a problem I have had for months now. I know it is really old now, but it still has helped me a LOT. Thank you!
I started learning how to program in JS this year and after watching a lot of video classes, I found yours... You are the best professor ever, I really enjoy your classes, please keep going and helping a lot of people! You are amazing, thank you so much!
It clicked! It finally clicked! I have been breaking my head trying to understand callbacks, closures and higher order function all week and finally this video showed me the light. Thanks mpj!
Hooray! Thanks a lot for your kind words!
In the last few days I've watched a bunch of videos on filter and map. What makes this one so much better is the last thing where you write the 'var isDog' part. It captures and reinforces the utility of being able to pass a function as a parameter.
This video helped me when I was learning HO functions years ago and I recommend it to all my students! ❤
Same with me
This is the most explicit explanation of functional programming. I am a former PHP developer as a student and now I shifted to JS using React as my front end after I graduated last month. This tutorials helped me alot to became a better developer in JavaScript. Thank you so much! Keep up the good work.
" and we want to filter out the dogs, Because we are writing enterprise grade software here" lmao gets me ever time
Blew my mind when you assigned your function to "isDog". Love it!
What is great is that video applies to a lot of high level programming language. I almost didn't start watching the vid, thinking it would be about JavaScript only when I saw the title!!
What is great is that this video* languages* (like Python, Ruby, PHP, ...)
❤ This should be required viewing for JavaScript devs
+Josh Pierro It is, a lot of people just don't know yet.
I learned a lot of FP concepts from these videos back in 2017. Thank you
Your humor makes learning much easier. Not every day I get to smile while watching a video tutorial about something.
Hey Mattias, after really enjoying your contributions related to JavaScript on Quora, I'm happy to see you starting a video series!
I am busy with a coding Bootcamp and your videos are GOLDEN!
Finally a video with a clean explanation of what is functional programming and with very illustrative code examples without beating around the bush for a long-ass time!
One of the best javascript-explaining series of videos I've seen in the last months. Theory + practice. Suscribed.
+tornadoofthoughts thanks a ton!
Your channel just appeared from nowhere. I am glad that it did. I was looking for something like this since last month. Keep making videos about trending tech and trends. You are doing a work of god! I'd disable my adblocker so that I can contribute something to you. Good Day!
Finally a function master explain the higher order function I was so confused about thank you 🙏🙏🙏
Alright, day one of watching all the content. I've found this channel a long time ago but my english skills were not that great back then. There's something about this guy that just keep me remembering him. I know that the channel is over now but i'm sure that there is a lot of good content here. I'll be documenting my journey along the way, so if you're interested... i don't know what you can do. Wish me luck and i wish everyone a great 2021.
I just got enlightened .. I have been doing this for so long without understanding Why I was doing this.. Thanks for these awesome videos..
You are a fantastic teacher, best regards to all JavaScript fans from Russia.
Thank you, lito!
Absolutely loving this series. One _tiny_ correction in your codez :
var isDog = function(animal) {
return animal.species === *'dogs'*
}
should be:
var isDog = function(animal) {
return animal.species === *'dog'*
}
Hate to nitpick, just for any beginners out there who are confused as to why their code might not be running correctly if they're following along.
Keep up the great work 😅
Just want to say, your videos have improved a lot, not that they weren't already great!
map, filter, reduce, reject, find these all are functions to an array object. Very smooth experience. Good Job man
Great explanation. I am a front end developer just getting into learning the basics of Javascript, referred by my teacher. Everything you said was as plain and simple and to the point as I needed to hear, thank you!
coming from c++ , never done any functional programming. excited to learn what it is!
I'm a CS student just learning higher-order functions - thank you for this clear explanation!
Very well explained. I ran to make an update to my code to see if I could utilise this, and bam! Not only did it work, but it saved me writing some additional code for checks that are not needed when using filter.
Absolutely brilliant. Other JS 'teachers' simply regurgitate complex material & definitions. What simplicity - 'functions are values'. So glad I found your channel. Big thank you for your refreshing & simple perspective on coding. Please don't stop!
Just wanted to say this was a fantastic video! I'm learning Javascript for the first time and coming from a soft background of php and c++, and this has been fantastic to help wrap my head around thinking this way. Subscribed!
+Palundrium glad you like it, welcome to the channel!
"This video is going to change your life". I'm not the same programmer since I saw this video just some months ago. Functional Programming is all what I needed
This has completely changed the way I used to think about JavaScript. Thanks a lot!
i was addicted to World of Warcraft 2 years ago and the newest expansion was bad, so i quit and learned to code and now I am i a lead developer running react native ty mpj
I always come back to this video, thank you so much MPJ!
I know I am stating the obvious when I say that "You rocked in these videos". Initially I was confused about Functional Programming but after a bit of videos on RUclips I am now really excited to learn it. Specially the mathematics that functional programming involves. Thanks a lot man!! keep enlightening us.
Truly extraordinary lesson, I feel like my mind has been expanded! I`ve been doing JS programming for a month and with this I feel like I went from the stone ages to the modern times, especially coupled with the ES6 syntax.
Lightbulb goes on when you separate out isDog() into a separate function! Nice! This makes so much sense - THANK YOU for showing us the uses of Higher Order Functions - now I can see a practical use and I am not struggling with reading endless blog posts on the theory any more. :) You put the funk into functional programming :D
I have no idea how I didn't discover your youtube channel before, I can tell the quality of your teaching is really high just with the one vide I've just watch! New subscriber.
Ops, meant to subscribe with this account instead, well, another sub!
I follow you on Quora for a while now, even as a full time software engineer I find your answers, and now you videos - very useful.
Thank you and keep up the good work.
Matan Sabag Thank you very much, that's great to hear. That's what I'm aiming for. I'm shooting for people that have moved past the beginner stage and want to move from "good" to "great". Next video is out now!
I agree that functional design definitely helps you write fewer bugs! This is exactly why I promote a functional design for business logic! Business logic should not rely on state! You should be able to pass in certain arguments and it will behave the same every time! Thanks for the video! This was a great primer for javascript HOFs!
Amazing job! This is really enlightening on many levels! Prob. the most entertaining functional programming video(s) out there.
+Adam Brodzinski Thanks a bunch, that means a lot!
Hi MPJ, I was trying to learn ES6's new features and I bumped into your video on Promises which lead me to the video series on functional programming. At first, I thought you are just another guy with a youtube channel but then I realised the tutorial are one of the finest on youtube with some great examples. And you fun-funny way of teaching just helps to make things stick to the mind.... you deserve a 👏🏽👏🏽👏🏽......Great job.......
Dude, you are hilarious! “I like saying ‘higher-order functions’. It’s like saying ‘quintessential’; it makes you feel smart!" I see why my classmates shared this with me, as it is super helpful to us newbies.
I hope you are able to monetize this well, as it's a very valuable service, you are a natural at explaining code and making it interesting, AND your enthusiasm is infectious. We need more people like you in the world. Rock on!
clear concise and most important of all interesting. Most instructional videos have a tendency to drone on with low energy .
+Michael Okerson thanks! I get a lot more energetic in the later episodes, though ;)
Crisp and clear. Please upload more videos regarding other concepts of JavaScript. Kudos
Ajey C Thanks for cheering me on - Next one coming on monday!
Great video! Thank you for making this! Just one thought for improvement:
I believe it’s very important to stress that Array.prototype.filter() is part of the language! For experienced JS developers it may feel like a no-brainer, while beginners get puzzled: Is this thing »built-in« or do I have to write it myself? And, like Andrzej already pointed out, Array.prototype.reject() does not (yet?) exist.
Nice explanation, simple terms. Easy to understand even english not being my native language. Good job, pal.
The beauty of having things explained by someone who deeply understands this thing
your way of talking just makes the teaching so much interesting.Again, thanks for the great tutorial.
Your series are great. Very well explained and accessible. I have circulated it far and wide. Thanks for the effort and time you put into making them so slick. I know it must take you many many hours each time.
+Dave Kierans Thanks a lot for spreading the good word, Dave! Glad to have you on funfunfunction!
Great videos MPJME!!
I have seen this video like 4 times and everytime I learn something new.
You are amazing man. I have taken some courses but you explain it better than anybody. Thanks a million.
After watching your series, i can't watch most of other programming channels, because i get bored out of my fliping mind... too good of a content this is...
Seeing your video gives me confidence that I too can become a developer someday.
Hello, nice to meet you. You were telling a lie when you said you were a developer, you are really a teacher who takes the complex and mysterious and makes it easy to learn. That is a great skill. Once you get to the point where you can teach something, is the point you become the master of it. Your balance of content, humor, and presentation is excellent. Thank you. Keep broadcasting!!
Hola! saludos desde Perú! soy frontend junior y viendo tus videos estoy aprendiendo mucho! y ademas aprendo ingles! tu ingles es muy comprensible muy claro! muchas gracias ! me suscribo!
Hi, MPJ! Thank you a lot for your videos. I have lots of years of OOP experience and I was finding very difficult to understand functional programming.
I've tried to learn it so many times, but you just made it so easy to learn I could understand the first time I watched your video.
Just subscribed and liked ur video.
Congrats and, again, THANK YOU!
I was reading Eloquent Javascript 2nd Edition,and then...then....then...i was reading about high order functions.But myself talk to me and said..hey!!It is a crazy guy from whom you can learn in funnier way!Well crazy guy.I am crazy too.WHOALAAA
Thank you for these videos you are awesome
You made me interested in funfunfunctional programming in javascript! Thanks a lot! Subscribe.
I friggin' loved that video! A real eye opener for people that are new to js. thanks for your clear explanation and thoughtful pacing. Excellent teacher!
Can't help you enough for taking the time to explain this. And I really like you way of explaining things, clear and simple, making it very easy for us beginners to understand and focus on the problem...
I think the right title for this beautiful playlist, is Declarative programming using higher-order functions!
+Muhammad Hasan well, that depends on your definition of "right". ;) if it is "correctness" then yes, maybe. If it is "purposeful", i.e. get people not familiar with the subject to start watching, I think my title is still a better choice. Thanks for calling it beautiful, though!
You are awesome man...please keep these FANTASTIC videos coming...this is a goal mine for me and very very helpful...! mix that with your sense of humor...there's nothing better on the tube....! Thanks dude
Dude...
Ever thought about becoming a full time RUclipsr?
You are fantastic.
I have been procrastinating about learning Functional programming since the last two years. This is the first time I really feel motivated to learn it.
Thanks! This is actually what I was looking for. Looking forward to the next part.
Václav Zeman Glad to hear it! Next part is coming up on monday.
I really, really appreciate your videos. It's breathing life back into what I loved (but working in the wrong places kicked the heart out of after a while). You should Patreon!
Thank you for making these videos man. Never heard anyone explain it as clear and concise as you do. In behalf of C++ devs trying to learn JS for a project, we thank you. Keep up the great work.
Just starting to learn javascript, and this video was very helpful.Thank you, I definitely will watch the whole series.
This video taught me to do a lot of things better than anything else. Thankyou
2 years after I watched this video for the first time, I came back today to revisit it. This video and it's playlist did completely change my life.
Thank you for making this. :)
"What? So you took out the *dogs*, because we are writing enterprise grade software!"
Man, your videos are really good and fun to watch, always give you something to pause and muse about.
The way of your explaining thing is so awesome for me. Thank you mr. mpj
Thank you for these videos, I have been trying to wrap my head around functional programming for a while, and I can see the efficiency gains already!
"Higher order functions... I really like saying that. It's like saying, 'Quintessential," it just makes you feel smart!" Laughing. I can tell that I am *really* going to like watching this video series, so thanks in advance for making the time to do this for us. Cheers!
+UK2AK Glad to have you with us, welcome to the channel! :)
Great series ... One thing I'd mention is we don't do for loops like that anymore. If we have to use a for loop, we use the for ..of syntax now.
Working example:
var animals= [
{ name: 'Fluffykins', species: 'rabbit' },
{ name: 'Caro', species: 'dog' },
{ name: 'Hamilton', species: 'dog' },
{ name: 'Harold', species: 'fish' },
{ name: 'Ursula', species: 'cat' },
{ name: 'Jimmy', species: 'fish' }
]
function getAnimals(value) {
return value.species==='dog';
}
var filtered = animals.filter(getAnimals);
console.log(filtered);
thanks!
what is the essential paramater for filter method sir ??
the callback function is always confuse me ..
why name your function getAnimals when it's only getting dogs?
The output of this is [{ name: 'Caro', species: 'dog' }, { name: 'Hamilton', species: 'dog' }] while the output of the for loop examples is ['Caro', 'Hamilton']. If I wanted to get the same out with with forEach as we get with for loop, what should we do.
I tried changing the return in getAnimals to "return (value.species==='dog')[name]" but did not work.
grazie from italy :D
I've only watched part 1 and 2 but these videos have certainly helped me a bunch. Thanks a lot.
Even less code with ES6 :)
animals.filter(animal => animal.species === 'dog')
I came to say that. Arrow functions do with it less code lol
one thing at a time... a beginner should first understand the mechanism of these functions. You can learn to write them with less code later. Otherwise it might be too confusing.
@@prody666 thanks. I hate it when experienced programmers just force the newest standards on people just getting into javascript. The arrow has been very confusing for me. Just let me learn the basics first, if theres no real difference between function and => (there is but its not important for a beginner) then just use function. when he gets better he can switch to => easy.
Or even less :) animals.filter(({ species }) => species === 'dog')
Have seen two of your videos on functional programming. It's impressive how you make it quite enjoyable to learn compared to my university lecturer, where it was certainly not.
i love your enthusiasm and personality.
Hi MPJ,
I have been watching a lot of your videos lately and really enjoying them.
This being what seems to be your first, I wanted to leave some comments and let you know about your audience.
I'm a web developer for over 22 years, started out in ASP classic and PHP 3 era.
Most of my career was spend behind the wheel of ASP.Net and the likes.
In recent years I have been pushed out of my comfort zone and started learning newer things.
While my backend stuff is still heavily Microsoft driven, I have learned a lot with front end frameworks and tools.
I think your videos are very important, and I appreciate the work that you do.
It seems that Im often thrown into things like working in Angular2 or React because I have to make things work, but you are doing a fantastic job of giving some of the why context.
Keep it up!
Love your videos NPJ! My only gripe is the painful lack of semicolons (i know, i know).
Thanks for spending your time to spread your knowledge to the community.
Excellent explanations! Very useful. I also appreciate your teaching style even including a recap! Thank you!
Jesus. Is that you? Thank you for showing me the way. I don't understand this all yet, but there is a very simple way you have of explaining things that I think I have become more intelligent about programming, in just 5 minutes of watching your videos
Love your videos. You're always fun, fun. Have browsed several videos on this topic and they all talk too quietly. Thank you for being you.
You just explained a concept that I have been struggling with for WEEKS! Godt arbejde, hilsen en dansk programmør :)
brought here by Full Stack Open! Awesome video!
I've been looking tutorial video like this. Thanks, you make it easier for beginner like me to understand functional js
with the help of a friend and mpj i understood higher order functions
This is absolutely amazing. Thank you so much for taking the time out to explain one of the harder to digest concepts in javascript. I wish I had seen this before deciphering eloquent javascript higher order function by myself. Keep them coming!
The way that you use to teach is so funny and nice...keep posting more videos ! Thanks
So this is where it all started will miss your videos 🙏
@funfunfunction you are making me love JS even more than I did. Thank you for the examples.
i am starting on this as soon as i get a bit better at code, i like the videos you make i am just a bit new to JS and i need to up my game a bit, i'll keep working thru my Udemy courses.
You are awesome! I love the way you explain these challenging topics. You always make it so clear and understandable and fun. Thank you for taking the time to help some of us that aren't as smart as you. Ha! You are a genius and greatly appreciated.
Thanks for making it super simple to easier see each individual parts that make up a callback. Keep up the good work :)