16.5: Higher Order Functions in JavaScript - Topics of JavaScript/ES6

Поделиться
HTML-код
  • Опубликовано: 15 янв 2025

Комментарии • 193

  • @lolulol4
    @lolulol4 7 лет назад +159

    The syntax is not the only difference between arrow and regular functions. An arrow function does not create its own context, while regular ones do. This is something important to keep in mind.

    • @POGOLAUNCHER
      @POGOLAUNCHER 7 лет назад +3

      Yeah, same as .bind(this) on a normal function.

    • @TheCodingTrain
      @TheCodingTrain  7 лет назад +55

      Yes, this is key! Thank you for the comment. I wish I had mentioned this during the video. I do discuss this aspect in my arrow functions video. Will pin this comment so others see.

    • @lolulol4
      @lolulol4 7 лет назад +4

      POGOLAUNCHER while that is one of its benefits and gives somewhat of the same result, I wouldnt say it's exactly the same. It can also get you results you dont want

    • @guinwhite
      @guinwhite 4 года назад

      Gotta keep those arrows out of object key-value statements that use "this"....right?

    • @adityadubey5204
      @adityadubey5204 4 года назад +1

      but what does that actually mean?

  • @iTzJimBoi
    @iTzJimBoi 4 года назад +17

    How you can remain engaged and ENGAGING throughout your videos is a skill I'm highly jealous of. You take a screen full of code and humanize it. I'm currently stuck in class trying to prove higher order functions work by rewriting them in our own words...and it's not fun. It's basically .filter() my joy out of my personal array. Your channel is a gushing spring river on a hot summer's day.

  • @keving6758
    @keving6758 4 года назад +12

    his enthusiasm is what every other programmer needs on their tutorial videos. Literally if other people were like this, i would of learned java so much faster

  • @jw7665
    @jw7665 6 лет назад +4

    Usually I have to speed the video up, but this time I slowed it down a bit lol. Dudes a ball of energy, makes a great teacher.

  • @zinsy23
    @zinsy23 5 лет назад +6

    I never knew programming could even be like this! This is incredible!

  • @juanok2775
    @juanok2775 6 лет назад +22

    honestly your videos are awesome 20 mins tutorial feels like 5 mins... thanks!!

    • @guinwhite
      @guinwhite 4 года назад

      especially when you watch them at 1.75 speed (like I do)

    • @adityadubey5204
      @adityadubey5204 4 года назад

      so true I love the enthusiasms!

  • @Momosun2018
    @Momosun2018 5 лет назад +1

    "A function that expects a function as a parameter, creates a function and/or returns a function." - this did it for me. Thank you!!!

  • @christopherholt3782
    @christopherholt3782 2 года назад +1

    this guy has to be the most likeable person i've come across on YT

  • @RodrigoCastroAngelo
    @RodrigoCastroAngelo 7 лет назад +2

    That dab in 1:31 was flawless!
    Also, I don't remember where I saw it, something about functional programming I guess, but they had a similar example:
    You have a function multiply(a,b) with two argments.
    If you call multiply(2,3) it returns 6
    But you can also call multiply(2) which returns a function like that doubler, which multiplies to 2 whatever you pass in to it

    • @sadhlife
      @sadhlife 7 лет назад

      that was definitely not a dab tho :P

  • @human3rr0001
    @human3rr0001 4 года назад +1

    You are so awesome to watch. I have a ton of fun and laugh a lot just tuning into your videos!

  • @neonhoshi
    @neonhoshi 2 года назад

    Thank you for this video!!! I have read and read my lesson over and over, but after coding along with you it finally made sense!!!

  • @katherinedragieva
    @katherinedragieva 4 года назад +1

    You are a great teacher. I always come here when there's something I can't understand. :)

  • @santiagoramirez5507
    @santiagoramirez5507 3 года назад

    The best coding teacher! Thank you so much!!

  • @percy888ferry
    @percy888ferry 6 лет назад +25

    You can take it even further:-
    const multiplier = factor => x => x*factor;
    although readability can suffer a bit.

    • @jkf16m96
      @jkf16m96 3 года назад

      const multiplier = factor => number => number*factor;
      I think just changing "x" with "number" might be readable enough (unless the reader doesn't know arrow syntax).

    • @gabef9538
      @gabef9538 2 года назад +1

      I'd can keep a set of curly braces around the inner function.

  • @davidmcdougald6695
    @davidmcdougald6695 6 лет назад +1

    I finally subbed after this one. I finally understand whats going on with ES6 and callbacks.

  • @danielrodas7692
    @danielrodas7692 3 года назад

    Wasn't too sure how higher order functions worked but came across this video and it explained it very clearly. Thank you!

  • @danilo86petrovic
    @danilo86petrovic 2 года назад

    This is the best explenation of higher order functions that i seen... Only now i understand it after so many watched tuturials... Thank you!!! 👍

  • @jetspray3
    @jetspray3 3 года назад

    Coding Train for clear concise explanation.

  • @mistermomo2904
    @mistermomo2904 4 года назад +2

    I'm still in high school, but i get the sensation that i'd learn more from this guy in 16 minutes than a professor in hours

    • @eatfrenchtoast
      @eatfrenchtoast 4 года назад +1

      Behind all the RUclipsrs and behind RUclips itself are people that grinded it out in higher education. Don't get too high on the education bashing juice.

  • @hugodelnegro
    @hugodelnegro 6 лет назад +1

    You are great, your entertaining skills while teaching are outstanding

  • @lukes5631
    @lukes5631 2 года назад +1

    It crazy how entertaining you make coding. Your energy literally seeps through the screen.

    • @dgh25
      @dgh25 2 года назад +1

      "literally"? Your screen is leaking?
      Did you mean "metaphorically"?

    • @lukes5631
      @lukes5631 2 года назад

      @@dgh25 No. I mean literally because he is an exceptional and embodied communicator whose energy you can FEEL through the screen you dunkin' donut head.

  • @Dylan_thebrand_slayer_Mulveiny
    @Dylan_thebrand_slayer_Mulveiny 5 лет назад +2

    What's crazy is you could also do
    const multiplier = factor => x => x * factor
    In fact, if you wanna get extra crazy, you can keep nesting the pattern as far as you want.
    I seriously love JS.

  • @MalikJamazov
    @MalikJamazov 5 лет назад

    You are the best! You solve my questions about high-ordered functions!

  • @techtronixweb7040
    @techtronixweb7040 6 лет назад

    I was a bit confused at first but you tied it all together nicely with the doubler tripler functions. Nice work.

  • @WistrelChianti
    @WistrelChianti 2 года назад

    Thanks I'm new to these arrows too so this has really helped!

  • @setupdraw7642
    @setupdraw7642 6 лет назад +20

    Nice tutorial but I think it is not 100% clear (at least to me) how "x" argument is handled by the function; where the "x" parameter comes from (where it gets defined as a variable) and how it is passed in the factory function.

    • @Dylan_thebrand_slayer_Mulveiny
      @Dylan_thebrand_slayer_Mulveiny 5 лет назад

      It's basically inheritance. developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/arguments

    • @4ipon4ik
      @4ipon4ik 4 года назад +3

      function multiplier(factor){
      return x => x * factor;
      }
      let doubler = multiplier(2);
      // now doubler = x => x * 2;
      // so doubler(4) returns 4 * 2;
      // doubler assigned multipliers returned function

  • @cnsnmms3708
    @cnsnmms3708 4 года назад

    Yes. An explanation should be like this.

  • @joeekadi
    @joeekadi 3 года назад

    Love your videos mate, super helpful and really enjoyable to watch. Thank you!

  • @fuzzylilpeach6591
    @fuzzylilpeach6591 6 лет назад +1

    OH MY GAWD IT MAKES SENSE NOW

  • @kopilkaiser8991
    @kopilkaiser8991 3 года назад

    I enjoy watching your energy and interest in explaining programming logic. You have helped me understand this concept easier. I have tried reading many articles and forums for understanding Higher Order Functions but couldn't grasp the idea of it. But, you have helped me understand it better. Thank you so much for giving such efforts in explaining the complex ideas. Keep it up. I've subscribed to your channel to follow you regular.

  • @rnmmakings4989
    @rnmmakings4989 Год назад

    i really like your funny way and expressions to explain things.

  • @ynotbutcher1891
    @ynotbutcher1891 5 лет назад

    you are very majectic the way you teach, bahaha it works!

  • @Locationary
    @Locationary 6 лет назад

    argh thank you so much for this video, explained it so much better then the current ebook I'm working off

  • @adamnorman85
    @adamnorman85 2 года назад

    You're great as you always 😘

  • @blusanders
    @blusanders 4 года назад

    These are new to me and hard to wrap my brain around just yet but this is the best explanation thus far for me :) Thanks!

  • @thedotisblack
    @thedotisblack 7 лет назад +1

    That's quite relevant... Especially since I always get headache from those higher order functions!! 🙃⚫
    Thanks for the video!

  • @aayanguren
    @aayanguren 4 года назад

    Honestly watching you make the same (minor) mistakes I make, makes me feel a lot better about my experience learning code. Except, I spend thirty minutes questioning everything I've learned studying functions, before realizing I forgot the second "i" in multiplier. "Like what the? I thought I understood this!!! What happened?!"

  • @syedarmaghanhassan4652
    @syedarmaghanhassan4652 4 года назад

    Thanks for sharing.
    Tip. 10:00. Don't lift your hand too much higher than the green-screen!

  • @Nyamistaya
    @Nyamistaya 7 лет назад

    Your videos are useful not only for javascript, i really appreciate

  • @elgary9074
    @elgary9074 4 года назад

    Thank you for this amazing explanation!

  • @yavasel
    @yavasel 4 года назад

    Hello, mate. Thank you very much. You are very good on this. This is the best coding video I have ever watched. I wish I could contribute you doneting this beautiful video but l lost my job 2 weeks ago because of covid.

  • @saminchowdhury7995
    @saminchowdhury7995 5 лет назад +3

    7:25 me whenever I see food.

  • @darkthrongrising5470
    @darkthrongrising5470 6 лет назад

    Yours are the very best tutorials, you give really good quality education here, thank you very much sir.

  • @ginalin310
    @ginalin310 5 лет назад

    soooo gladdd I find you

  • @papii_6669
    @papii_6669 7 лет назад

    I learned this for swift a while ago, good video :)

  • @ore_bear8045
    @ore_bear8045 4 года назад

    thank you!, very well explained

  • @Suviiii69
    @Suviiii69 Год назад

    😭🥺rll appreciate this viddddd

  • @stuffedpeanuts
    @stuffedpeanuts 3 года назад

    Great tutorial

  • @Mari_Selalu_Berbuat_Kebaikan
    @Mari_Selalu_Berbuat_Kebaikan 2 года назад

    Let's always do good 🙏

  • @amirulidzham3686
    @amirulidzham3686 5 лет назад

    The code executed is 4 x 2 right? not 2 x 4 isn't? at 15:10

  • @CharlesGouin
    @CharlesGouin 7 лет назад

    We all love those good old factories.

  • @papinkelman7695
    @papinkelman7695 7 лет назад

    No diminishing return on the Coding Train.

  • @Weeb940
    @Weeb940 2 года назад

    thank you so much for this toturiale

  • @jakefreise7601
    @jakefreise7601 7 лет назад

    Do you have any plans on completing part 3 of the agario code challenge? Looking forward to it!

  • @fdj1966
    @fdj1966 3 года назад

    thanks for the great video....

  • @gabef9538
    @gabef9538 2 года назад

    This could do interesting things with optimization of damage calculations that include special effects being doubled.

  • @mssadewa
    @mssadewa 5 лет назад +1

    damn! I just subscribed and enjoy how you present this!

  • @phantasmFES
    @phantasmFES 5 лет назад

    thank u so much for this video ^_^ u made it very entertaining

  • @ninglizhu2255
    @ninglizhu2255 6 лет назад +2

    still not easy for me to understand totally... but your video is great!

  • @chrismanuel8993
    @chrismanuel8993 5 лет назад

    hey thanks for this!

  • @darsh_shukla
    @darsh_shukla 4 года назад

    Dan will you make a playlist separate for functional programming please

  • @juliancaste3914
    @juliancaste3914 6 лет назад

    awesome !! I really like this videos

  • @乐易盎
    @乐易盎 5 лет назад

    I like your teaching

  • @wreak3r
    @wreak3r 7 лет назад

    Also just in case you come across this syntax, you may call the multiplier function like so: multiplyer(2)(4) and get 8 as result.

  • @mainlandbahr2176
    @mainlandbahr2176 3 года назад

    How does the doubler(x) call work when there are no parenthesis holding parameters in the definition let doubler = mutiplier(2); I saw a comment below that mentions inheritance in JS, but I was still unable to make sense of this as it looks implied and not defined.

  • @iandareopal
    @iandareopal 6 лет назад +3

    I do not understand what is being passed through as x in these examples, it seems as though you are only passing a value for factor.

  • @amogus7
    @amogus7 4 года назад

    Everything between () will recognise as function argument and will return as a constant variable

  • @trex283
    @trex283 5 лет назад

    What ide do you use for js programming?

  • @okoiful
    @okoiful 7 лет назад

    Awesome!!!! ive been waiting for stuff like this for a looong time!!! :) . can u pease do more functional programming stuff? thanks!!!!

  • @manu_prasadh
    @manu_prasadh 7 лет назад

    Thanks for this video

  • @angelcaru
    @angelcaru 5 лет назад

    11:30
    const multiplier = factor => x => x * factor;
    :)

  • @anmolagarwal5952
    @anmolagarwal5952 4 года назад

    Do await and async use this higher order functions?

  • @mekelilyasa9561
    @mekelilyasa9561 3 года назад

    what is the different between closure and higher order function? newbie here

  • @OfficialYunas
    @OfficialYunas 7 лет назад +9

    The arrow functions look like python lambdas

  • @journeyoftulsi
    @journeyoftulsi 4 года назад

    I would agree more if someone said the father of computer science has a youtube channel named "The Coding Train", rather than memorizing his name from my GK book in first grade.

  • @denzelsugayan432
    @denzelsugayan432 3 года назад

    i cant seem to process the code in the example at my vs code

  • @frankrizzo5181
    @frankrizzo5181 5 лет назад

    I accidentally set the tripler factor to 4 and when changing it to three I got an error telling me identifier tripler had already been declared. It's a "let" declaration ......?

  • @mortyjr2334
    @mortyjr2334 5 лет назад

    So is the arrow function like a lambda expression in Java?

  • @mohammadalrefaai-games8034
    @mohammadalrefaai-games8034 4 года назад

    thank u thank u thank u

  • @JonatanEdOrtiz
    @JonatanEdOrtiz 4 года назад

    Amazing

  • @ErrorDebug
    @ErrorDebug 5 лет назад

    Hi thanks for your videos you are awesome healthy guy!
    I have one question cus i am a beginner, I see this first time, how can you pass a number into a variable 'doubler(4)' and that variable knows that you are referring to returned x parameter??? How and why it knows that, how is that linked?

  • @konstantinkkk8397
    @konstantinkkk8397 4 года назад

    does it higher order or destructuring? I cannot understand this code. Snippet where function return function
    function fluent(fn) {
    console.log(fn);
    return function (...args) {
    console.log(args);
    };
    }
    function Person() {}
    Person.prototype.setName = fluent(function (first, last) {
    this.first = first;
    this.last = last;
    });
    let Peter = new Person();
    console.log(Peter);
    Peter.setName("Peter", "Parker");

  • @sumantkanala
    @sumantkanala 7 лет назад +9

    applying this to multiplier function itself, it looks like this: const multiplier = factor => x => x*factor

  • @elbekkhaitov683
    @elbekkhaitov683 5 лет назад +2

    What this guy smokes before every video? Anyway good job

  • @chrismanuel8993
    @chrismanuel8993 5 лет назад +1

    arrow functions corrupt my brain

  • @VimalKumar-dl5jb
    @VimalKumar-dl5jb 6 лет назад

    passing function to function or returning a function is called higher order function right

  • @Solsenderz
    @Solsenderz 2 года назад

    Well, I thought I could teach myself what is hof in the video, but instead, I'm more confused now, lol) definitely not for beginners, it's so fast to catch all of your ideas

  • @neddev2990
    @neddev2990 3 года назад

    Clickety, click, click.... don't mind me. I'm getting stuff that i didn't understand before! great tutorial.

  • @emerson-sheaapril8555
    @emerson-sheaapril8555 6 лет назад

    like a couple others below I'm a little confused how JS knows to pass doubler or trippler to the x variable.

  • @vilmariehernandez1189
    @vilmariehernandez1189 4 года назад

    Your board looks like how my brain feels.

  • @lucasteixeiranl4473
    @lucasteixeiranl4473 3 года назад +1

    hahaha you are awesome!

  • @latostadaa
    @latostadaa 5 месяцев назад

    Hello, i have a question: Why doubler's argument becomes the X on the multiplier function?
    If somebody could help me i would be grateful.

  • @VimalKumar-dl5jb
    @VimalKumar-dl5jb 6 лет назад

    arrow function dont requried return value r we need to return the value

  • @ruuji.
    @ruuji. 5 лет назад

    So I tried shortening the whole thing up and came up with this:
    let add = addition => { return x => x + addition; }
    Same with multiple, just as an addition.

  • @mightyocean411
    @mightyocean411 4 года назад

    const multiplier = factor => x => x*factor, all in one line

  • @petsinyourhair
    @petsinyourhair 7 лет назад

    Correct me if I'm wrong, but usually this is called 'Closures' in JavaScript. I don't disagree that they are also higher order functions, but this concept isn't how it is usually refered to.

    • @sumantkanala
      @sumantkanala 7 лет назад

      Please watch the whole video.

    • @petsinyourhair
      @petsinyourhair 7 лет назад

      Sorry, I didn't ask anything. Not sure what you reply to...

    • @sumantkanala
      @sumantkanala 7 лет назад

      I'm not correcting you as you said earlier in your comment, just stating that the what you described is discussed if you watch the whole video.

    • @petsinyourhair
      @petsinyourhair 7 лет назад

      Your comment is very useful. I wouldn't have wished I wouldn't have had missed it.

  • @shajiabbas5342
    @shajiabbas5342 3 года назад

    This kinda coding looks like a movie Inception damn

  • @rominatulli4243
    @rominatulli4243 6 лет назад

    I love your voice.

  • @okoiful
    @okoiful 7 лет назад +1

    This is even shorter: let multiplier = (factor) => (x) => x * factor

    • @TheCodingTrain
      @TheCodingTrain  7 лет назад +1

      nice!

    • @DavidWMiller
      @DavidWMiller 7 лет назад +4

      Just need to ditch the unnecessary parentheses. const multiplier = factor => x => x * factor;

    • @okoiful
      @okoiful 7 лет назад +4

      i personally find it much more readable by adding the parenthesis.. i prefer to two extra characters than having to think what it means... it becomes fuzzy just like that.. the parenthesis make it clearer.. for me at least..

  • @brod515
    @brod515 5 лет назад

    Can get even more cryptic if you want... let multiplier = factor => x => x * factor;