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

In this video, I discuss "higher order functions" in JavaScript.
🎥 Next Video: • 16.6: Array Functions:...
🎥 Topics of JavaScript/ES6: • 16: Topics of JavaScri...
🎥 ES6 Arrow Function: • 16.3: ES6 Arrow Functi...
🎥 Closures in JavaScript: • 9.6: JavaScript Closur...
🚂 The Coding Train website: thecodingtrain.com/
💖 Support this channel on Patreon: / codingtrain
🛒 To buy Coding Train merchandise: www.designbyhumans.com/shop/c...
📚 Book recommendations: www.amazon.com/shop/thecoding...
💻 github.com/CodingTrain/Rainbo...
🎥 For an Introduction to Programming: • Start learning here!
🎥 For More Coding Challenges: • Coding Challenges
🔗 p5js.org/
🔗 processing.org
📄 Code of Conduct: github.com/CodingTrain/Code-o...

Пікірлер: 193

  • @lolulol4
    @lolulol46 жыл бұрын

    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

    6 жыл бұрын

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

  • @TheCodingTrain

    @TheCodingTrain

    6 жыл бұрын

    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

    6 жыл бұрын

    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

    3 жыл бұрын

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

  • @adityadubey5204

    @adityadubey5204

    3 жыл бұрын

    but what does that actually mean?

  • @iTzJimBoi
    @iTzJimBoi3 жыл бұрын

    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.

  • @jw7665
    @jw76655 жыл бұрын

    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
    @zinsy234 жыл бұрын

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

  • @keving6758
    @keving67583 жыл бұрын

    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

  • @techtronixweb7040
    @techtronixweb70405 жыл бұрын

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

  • @Momosun2018
    @Momosun20184 жыл бұрын

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

  • @neonhoshi
    @neonhoshi2 жыл бұрын

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

  • @danielrodas7692
    @danielrodas76922 жыл бұрын

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

  • @juanok2775
    @juanok27755 жыл бұрын

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

  • @guinwhite

    @guinwhite

    3 жыл бұрын

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

  • @adityadubey5204

    @adityadubey5204

    3 жыл бұрын

    so true I love the enthusiasms!

  • @MalikJamazov
    @MalikJamazov4 жыл бұрын

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

  • @katherinedragieva
    @katherinedragieva4 жыл бұрын

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

  • @percy888ferry
    @percy888ferry5 жыл бұрын

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

  • @jkf16m96

    @jkf16m96

    2 жыл бұрын

    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

    Жыл бұрын

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

  • @kopilkaiser8991
    @kopilkaiser89912 жыл бұрын

    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.

  • @noahbrewer8611
    @noahbrewer86113 жыл бұрын

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

  • @joeekadi
    @joeekadi2 жыл бұрын

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

  • @davidmcdougald6695
    @davidmcdougald66955 жыл бұрын

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

  • @danilo86petrovic
    @danilo86petrovic Жыл бұрын

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

  • @darkthrongrising5470
    @darkthrongrising54706 жыл бұрын

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

  • @hugodelnegro
    @hugodelnegro5 жыл бұрын

    You are great, your entertaining skills while teaching are outstanding

  • @WistrelChianti
    @WistrelChianti Жыл бұрын

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

  • @blusanders
    @blusanders3 жыл бұрын

    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!

  • @santiagoramirez5507
    @santiagoramirez55072 жыл бұрын

    The best coding teacher! Thank you so much!!

  • @RodrigoCastroAngelo
    @RodrigoCastroAngelo6 жыл бұрын

    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

    6 жыл бұрын

    that was definitely not a dab tho :P

  • @Nyamistaya
    @Nyamistaya6 жыл бұрын

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

  • @elgary9074
    @elgary90743 жыл бұрын

    Thank you for this amazing explanation!

  • @thedotisblack
    @thedotisblack6 жыл бұрын

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

  • @Locationary
    @Locationary5 жыл бұрын

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

  • @cnsnmms3708
    @cnsnmms37083 жыл бұрын

    Yes. An explanation should be like this.

  • @papii_6669
    @papii_66696 жыл бұрын

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

  • @yavasel
    @yavasel4 жыл бұрын

    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.

  • @mistermomo2904
    @mistermomo29044 жыл бұрын

    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

  • @youtubezcy

    @youtubezcy

    3 жыл бұрын

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

  • @Dylan_thebrand_slayer_Mulveiny
    @Dylan_thebrand_slayer_Mulveiny4 жыл бұрын

    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.

  • @christopherholt3782
    @christopherholt37822 жыл бұрын

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

  • @ore_bear8045
    @ore_bear80453 жыл бұрын

    thank you!, very well explained

  • @jetspray3
    @jetspray33 жыл бұрын

    Coding Train for clear concise explanation.

  • @aayanguren
    @aayanguren3 жыл бұрын

    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?!"

  • @ginalin310
    @ginalin3105 жыл бұрын

    soooo gladdd I find you

  • @adamnorman85
    @adamnorman852 жыл бұрын

    You're great as you always 😘

  • @younesraymond2500
    @younesraymond2500 Жыл бұрын

    thank you so much for this toturiale

  • @manu_prasadh
    @manu_prasadh6 жыл бұрын

    Thanks for this video

  • @fuzzylilpeach6591
    @fuzzylilpeach65915 жыл бұрын

    OH MY GAWD IT MAKES SENSE NOW

  • @lukes5631
    @lukes5631 Жыл бұрын

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

  • @dgh25

    @dgh25

    Жыл бұрын

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

  • @lukes5631

    @lukes5631

    Жыл бұрын

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

  • @okoiful
    @okoiful6 жыл бұрын

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

  • @chrismanuel8993
    @chrismanuel89934 жыл бұрын

    hey thanks for this!

  • @fdj1966
    @fdj19662 жыл бұрын

    thanks for the great video....

  • @gabef9538
    @gabef9538 Жыл бұрын

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

  • @phantasmFES
    @phantasmFES5 жыл бұрын

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

  • @rnmmakings4989
    @rnmmakings49894 ай бұрын

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

  • @stuffedpeanuts
    @stuffedpeanuts2 жыл бұрын

    Great tutorial

  • @mssadewa
    @mssadewa4 жыл бұрын

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

  • @ynotbutcher1891
    @ynotbutcher18914 жыл бұрын

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

  • @juliancaste3914
    @juliancaste39145 жыл бұрын

    awesome !! I really like this videos

  • @syedarmaghanhassan4652
    @syedarmaghanhassan46523 жыл бұрын

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

  • @trex283
    @trex2834 жыл бұрын

    What ide do you use for js programming?

  • @ErrorDebug
    @ErrorDebug4 жыл бұрын

    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?

  • @CharlesGouin
    @CharlesGouin6 жыл бұрын

    We all love those good old factories.

  • @amogus7
    @amogus73 жыл бұрын

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

  • @jakefreise7601
    @jakefreise76016 жыл бұрын

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

  • @ninglizhu2255
    @ninglizhu22555 жыл бұрын

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

  • @darsh_shukla
    @darsh_shukla4 жыл бұрын

    Dan will you make a playlist separate for functional programming please

  • @Suviiii69
    @Suviiii694 ай бұрын

    😭🥺rll appreciate this viddddd

  • @JonatanEdOrtiz
    @JonatanEdOrtiz3 жыл бұрын

    Amazing

  • @Mari_Selalu_Berbuat_Kebaikan
    @Mari_Selalu_Berbuat_Kebaikan Жыл бұрын

    Let's always do good 🙏

  • @setupdraw7642
    @setupdraw76426 жыл бұрын

    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

    4 жыл бұрын

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

  • @4ipon4ik

    @4ipon4ik

    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

  • @papinkelman7695
    @papinkelman76956 жыл бұрын

    No diminishing return on the Coding Train.

  • @mainlandbahr2176
    @mainlandbahr21762 жыл бұрын

    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.

  • @wreak3r
    @wreak3r6 жыл бұрын

    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.

  • @TheCodingTrain

    @TheCodingTrain

    6 жыл бұрын

    Thanks for the tip!

  • @anmolagarwal5952
    @anmolagarwal59524 жыл бұрын

    Do await and async use this higher order functions?

  • @user-bx9pj9lc4x
    @user-bx9pj9lc4x4 жыл бұрын

    I like your teaching

  • @angelcaru
    @angelcaru4 жыл бұрын

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

  • @BeKindPlox
    @BeKindPlox6 жыл бұрын

    Cool!

  • @mohammadalrefaai-games8034
    @mohammadalrefaai-games80344 жыл бұрын

    thank u thank u thank u

  • @ruuji.
    @ruuji.4 жыл бұрын

    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.

  • @saminchowdhury7995
    @saminchowdhury79954 жыл бұрын

    7:25 me whenever I see food.

  • @VimalKumar-dl5jb
    @VimalKumar-dl5jb6 жыл бұрын

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

  • @Solsenderz
    @Solsenderz Жыл бұрын

    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

  • @frankrizzo5181
    @frankrizzo51814 жыл бұрын

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

  • @amirulidzham3686
    @amirulidzham36865 жыл бұрын

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

  • @mekelilyasa9561
    @mekelilyasa95612 жыл бұрын

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

  • @ukaszczaja9400
    @ukaszczaja94005 жыл бұрын

    If You haven't already, then try watching Daniel's videos in 1.5x speed (or even more). It's quite funny 😂.

  • @sahilcoleslaw

    @sahilcoleslaw

    4 жыл бұрын

    I do 1.75x :)

  • @aleksandrstaetskiy5687
    @aleksandrstaetskiy56874 жыл бұрын

    Nice

  • @vladthe_cat
    @vladthe_cat3 жыл бұрын

    I've done this in Lua

  • @rominatulli4243
    @rominatulli42435 жыл бұрын

    I love your voice.

  • @brod515
    @brod5154 жыл бұрын

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

  • @mightyocean411
    @mightyocean4113 жыл бұрын

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

  • @mortyjr2334
    @mortyjr23345 жыл бұрын

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

  • @TheCodingTrain

    @TheCodingTrain

    5 жыл бұрын

    indeed!

  • @mortyjr2334

    @mortyjr2334

    5 жыл бұрын

    The Coding Train Thanks!

  • @emerson-sheaapril8555
    @emerson-sheaapril85555 жыл бұрын

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

  • @emerson-sheaapril8555

    @emerson-sheaapril8555

    5 жыл бұрын

    @@Dima1415 Thanks!

  • @denzelsugayan432
    @denzelsugayan4323 жыл бұрын

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

  • @thebuildguy7
    @thebuildguy74 жыл бұрын

    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.

  • @lucasteixeiranl4473
    @lucasteixeiranl44732 жыл бұрын

    hahaha you are awesome!

  • @konstantinkkk8397
    @konstantinkkk83973 жыл бұрын

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

  • @pranavbhale9744
    @pranavbhale97445 жыл бұрын

    Hello sir and viewer, Can u explain me how multiplier(3)(5) gives out 15 ie. calling HOC( )( )

  • @attilatoth268

    @attilatoth268

    5 жыл бұрын

    Becasue multiplier(3) returns a function which you immediately call with the argument 5.

  • @VimalKumar-dl5jb
    @VimalKumar-dl5jb6 жыл бұрын

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

  • @TheCodingTrain

    @TheCodingTrain

    6 жыл бұрын

    correct!

  • @OfficialYunas
    @OfficialYunas6 жыл бұрын

    The arrow functions look like python lambdas

  • @michielarkema

    @michielarkema

    4 жыл бұрын

    Because it is lambda xd

  • @iandareopal
    @iandareopal5 жыл бұрын

    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.

  • @magdalenahlohovska1738

    @magdalenahlohovska1738

    5 жыл бұрын

    he sets the value for x when he calls the function in console

  • @2600D4u
    @2600D4u6 жыл бұрын

    Good morning

  • @sumantkanala
    @sumantkanala6 жыл бұрын

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

  • @TheCodingTrain

    @TheCodingTrain

    6 жыл бұрын

    thanks for this tip!

  • @mirtwomirtwo6810
    @mirtwomirtwo6810 Жыл бұрын

    🔥ty

  • @petsinyourhair
    @petsinyourhair6 жыл бұрын

    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

    6 жыл бұрын

    Please watch the whole video.

  • @petsinyourhair

    @petsinyourhair

    6 жыл бұрын

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

  • @sumantkanala

    @sumantkanala

    6 жыл бұрын

    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

    6 жыл бұрын

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