Higher-order functions – Part 1 of Functional Programming in JavaScript

Higher-order functions – Part 1 of Functional Programming in JavaScript


Hello in this video series I will teach you how to do functional programming in Javascript In this first one I will begin by telling you about one of the most important concepts in functional programming and that is higher-order Functions I will talk about what higher-order functions are and I will then move on to code and show you how to use them but Before I do that. I want to tell you why you should learn functional programming in case you don’t know me I’m Mateus Pepper Johannsen, MPJ for short I have been a full-time programmer for about 10 years. I work for Absolut Vodka Blackberry, and I currently work as a front-end developer for Spotify I love functional programming Functional programming has made programming so much more fun to me if you have been programming for a while But haven’t yet tried your hand at functional programming before, this video is going to change your life Learning to program functionally is gonna make you so much a Better programmer you will feel much more secure with the quality of your work And it will be a lot better and you will be more sought after. You will be able to write your programs with less bugs in less time Your code will have less bugs because your code will be easier to reason about and you will be able to write it in less time because you will be able to reuse more of your code. Higher-order functions really like saying that it’s is like saying quintessential It just makes you feel smart So let me tell you about higher-order functions because that is going to make me feel Super Smart In Javascript and in all functional programming languages functions are values Let me show you what I mean by that. Here we will see the basic function in its natural habitatSo you will recognize this even if you don’t know Javascript because all Non insane programming languages have functions, but not all programming languages can do this Create an anonymous function and assign it to a variable Just like any other value. We can pass it around like this [and] You know yes? This will be 90. Again in functional programming languages functions are values just like strings or numbers functions can be assigned to variables or pass into other functions higher-order Functions, but what are higher-order functions good for? well composition the fact that we can take one function and put it into another function allows us to compose a lot of small functions into bigger functions. BLAH! That’s all a lot of theory let’s look at how to actually use one of these things. Probably the most basic and useful higher-order function is filter. It’s really simple Filter is a function on the array that accepts another function as its argument which it will use to return a new filtered version of the array. Here, we see a list of animals we have Fluffykins, which is a rabbit we have Hamilton who is a dog and we have Ursula who is a cat. We want to filter out the dogs because we’re writing Enterprise-grade software here. I I am going to show you how to do this using filter, but before I do I want to remind you how you do this with a normal for Loop BAM! So this is just a ultra normal for loop it creates an array to hold the dogs it iterates over the animals animals Array and if the species of the the animal is being iterated Is equal to dog it will push that dog onto the animals array Now let’s rewrite this using the filter function I’m Gonna comment out the for loop and keep it on so that you can see it for comparison purposes and Here goes faster [typing – seen on screen] So let’s have a look at this, filter accepts one argument another] function Functions like this functions that you send into other functions are called Callback functions Because the host function will call back to them filter will loop through each item in the array and for each item it’s going to pass it [into] the callback function and When it does it will expect the callback function to return either true, or false to tell filter whether or not this item should be in the new array and After it’s done. It will return the new filtered array, and that will be dogs Remember how I said that You’ll write software faster when you’re doing functional programming Notice here that the example that uses filter is a lot less code than the than the for loop and That is not because the syntax is cosmetically shorter or anything it’s Because we’re actually writing less code less logic The reason that we need less logic is that when we write our software in small simple functions They compose together which allows us to reuse functions all over the place So in the filter example. We are just writing one line of logic really Which is this one the line that determines? What animals goes into the array and the rest of the program creating a new array stuffing animals in it that the For loop has to implement here and here that is actually handled inside the the filter function It’s handled for us so we don’t need to write it there for the filter function the filter example is just an object. The callback function and the filter function just slopped into each other. They are [Composable] I’d really like to stress how well these simple functions compose Let’s break out the callback into a separate variable So notice here that is dog is Just a function that checks that an object is a dog It doesn’t really have anything to do with the filtering at all It’s completely decoupled from it, so we can use it for other things For instance, if we wanted the animals that aren’t dogs, we could pass it to reject which is another a higher-order function on the on the array object that does the inverse of filter so it could be animals don’t Reject dog and this will give us an array of Animals that are not so compare this to the for loop you’ll see that we very cleanly broken the problem up into two completely separate problems the problem of determining if an animal is a is a dog or not, and the problem of creating an array and stuffing the objects into them, and this way we’re allowed to Think and reason and debug these problems separately and that [is] a lot easier than when the two Solutions are all jumbled together like in the for loop Today, I’ve talked about how functional programming means that you can write software with less bugs in less time in JavaScript functions are values and you can exploit this by dividing your code into small simple functions and composing them together using higher-order functions as an example I showed you the higher-order function filter() and how it compares to normal form We’re just scratching the [surface] here Learning functional programming is going to introduce you to a whole new world that you didn’t know existed There are many useful higher-order functions besides filter next time I will talk about two of them map and reduce do not miss it hit subscribe follow me on Twitter @mpjme @mpjme Stay curious you next time [end]

100 thoughts to “Higher-order functions – Part 1 of Functional Programming in JavaScript”

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

  2. Hi, Matias,
    Around … 9:30, I see "return animal.species == 'dogs'" … but above, in the original array, the species for Caro and Hamilton is 'dog'. … I don't think AI is yet sophisticated enough to know you mean the same species, and are only using the plural form. Am I missing something?

  3. Gracias mister….excelente clases recién encuentro este canal…. también funciona
    let dogs= animals.filter((animals)=>animals.species==="dog");

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

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

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

  7. Which editor are you using for compilation the js code and how to install in windows. can you please help me

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

  9. @5:05 it will push that dog (from animal array ) on to the dog array right?…I'm super new to js so i kept wondering how is it pushing to the animals array when its already there but I think you meant dog array

  10. #MPJ at 5:55 on your channel you just said filter takes 1 argument but that should be at least 1 argument and 2 optional arguments I think. The params may be value, index, array

  11. Filter using ES6 arrow functions: –
    const dogs = animals.filter((animal) => return animal.species === 'dog');

    If you wanted to make it even shorter lol

  12. Is there a reason when I try and use Closed Caption, it FORCES French automatically? In every video I have to go into settings and change it from French to English, without fail every video… Kinda frustrating u.u

  13. var animals=[{ name:'a' ,species:'dog'},
    { name:'b',species:'dog'
    }]
    var isdog=animals.filter(function(animal)
    {return animal==='dog'})
    console.log(isdog)// print new array with species of dog
    // question
    how to print just name of the dog

  14. Going through the Eloquent Javascript book and I'm having trouble getting through the exercises of higher order functions. Being completly new to programming, I wonder if I should skip this chapter.

  15. I am having difficulty understanding why sometimes you use animals as a variable and sometimes animal. Where does animal get declared? E.g. the array is animals (you even use animals in the loop) but when you apply the filter your argument is animal. Am I misunderstanding something?

  16. 9:10 instead of reject()… var notDogs = animals.filter( (a) => { return !isDog(a) } ); …or just… var notDogs = animals.filter( (a) => { return a.species !== 'dog'; } ); . Also for everyone coming to this video from the future (that is more recent videos)…. wtf your hair!

  17. Hi MPJ
    It looks pretty clear.
    I was considered crazy to tell things like that to Java programmers
    I think people fall in love with this simplicity
    But I can't avoid to think about how big could be those collections and if it could be better to loop it only once with a for…of with many conditionals inside
    Thanks

  18. I am a beginner so while watching your video this question dawned on me. When one should use OOP vs FP ? Or do you meant to choose FP over OOP for all cases ? I am still learning about OOP so it would be great to have a video or reply that clarifies this for a lot of juniors out there 🙂

  19. good day to you sir.! I like how it is to the point. short sweet and i enjoyed this lessons very much. Thanks. Your my new javascript HERO

  20. How if instead of comparing an array to a value for a filter like shown in the video, that comes condition when we must compare a value of two arrays. Can filter function handle that condition?

  21. 1:50 that was a good one haha
    I like how your hands were everywhere. I found the video entertaining and educating at the same time.
    Nice job!

  22. HEY! I don't know if anyone else said this in your comments but your missing a comma in your array declaration xD @ Harold, The Fish!

  23. 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!

  24. return animal.species === 'dogs' is null or empty object as there are no "dogs" in animals object, only two "dog"

  25. Me: "why isn't he writing arrow function? 🤔"
    Me: "ooohhhhhh 😱"

    Me: "but why are you looking like a redneck? 🤔"
    Me: "ohhhhh 😱"

  26. Hi, MPJ,
    Sorry I've been out of touch. For months, I was focused on classes, and trying to rebuild my web comic site. And I got pretty discouraged, So I came back to the beginning, as I know I'll need a lot of review.

    And I'm wondering how you get that example code to work. The animals array has elements with species === "dog", not "dogs". And I know computers don't really understand words, so how does a computer know that the animals array of more than one animal. How does the computer recognize what you're asking it to do, when you use a function that uses the argument "animal"? I really wish coding worked so easily, but there might be random chaos, down that path.

    Are we really able to instantiate new variables on the fly, that way, such as "animals", and new values, such as "dogs"?

    Oh, why am I asking here? You're too busy. And if I could even find the forum, how do I bring this up for discussion? … No, wait, I found the forum, and you've made it easy enough for patrons to get back in, even when they're 60, and didn't grow up with computers. Thanks. Posted in forum, under Programming.

  27. var isDog = function(animal) {
    return animal.species === 'dogs'
    }

    Why isn't it animals.species ? How does the program know to pull from the animals array? I guess I don't understand how animal.species works. Thanks for anyone's help.

  28. Please please please make a video series on react hooks. I came back to this video series to leave that comment, because it's what set me down my journey of functional programming.

  29. Map, reduce, and filter are obvious winners, so much so, that they have been quickly adopted in imperative languages like java. The harder questions to answer are, … How can FP promote SOLID principles, and "cohesion over coupling", and encapsulation? How do we use FP to make code more readable and lower long term maintenance costs, when working in medium to large teams?

  30. hi. What if i don't have prior programming experience, can a beginner start diving into this tutorial?

  31. You Explained very nicely as well very clearly. I really thank you for this type of video tutorial for us. Can you create Form Validation as well error display in HTML itself? We want to know how to populate error message in dynamically when user clicks SUBMIT Button.

    Thanks Advance

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

  33. still confused, you didn't explain how var dogs using the filter function makes the dogs an array and not just a variable that holds a single argument.

  34. But this is only true because .filter and .reject for example have already been written by other people for you? How do you even write something like that yourself?

  35. wtf this is your first 'old' video that I watched and I didn't recognize you until you said what your name is. Until that point I was wondering, looking at the upper half of your face, that you kinda look like Eminem 😀 😀 great video though, simple and neat 🙂

  36. Is voice quite low or is it only me ? I checked other youtube video and it seems fine. Kindly improve voice quality next time.

  37. Even I know these Things Very Well, I love to watch your videos, Your Teaching Style is Awesome, So Crazy Man!, Keep it up!

  38. animals.reject is not a function in standard libray. this function actually looks like : var otherAnimals = _.reject(animals, isDog) ; and comes with underscore.js library

  39. " and we want to filter out the dogs, Because we are writing enterprise grade software here" lmao gets me ever time

  40. 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'}
    ]

  41. I didn't understand how to get reject method working by adding underscore.js library in this program, please clarify

Leave a Reply

Your email address will not be published. Required fields are marked *