16.3: ES6 Arrow Function - Topics of JavaScript/ES6

Поділитися
Вставка
  • Опубліковано 5 вер 2024
  • In this video, I cover anonymous functions with the arrow syntax in ES6 JavaScript.
    Next Video on ES6: • 16.4: for...of loop - ...
    Support this channel on Patreon: / codingtrain
    To buy Coding Train merchandise: www.designbyhu...
    To Support the Processing Foundation: processingfoun...
    Send me your questions and coding challenges!: github.com/Cod...
    Contact:
    Twitter: / shiffman
    The Coding Train website: thecodingtrain....
    Source Code for the all Video Lessons: github.com/Cod...
    p5.js: p5js.org/
    Processing: processing.org
    For an Intro to Programming using p5.js: • Start learning here!
    For Coding Challenges: • Coding Challenges
    Help us caption & translate this video!
    amara.org/v/cJ4E/
    📄 Code of Conduct: github.com/Cod...

КОМЕНТАРІ • 517

  • @bte320
    @bte320 6 років тому +255

    I really like that you don't edit out your mistakes, these are the same mistakes I make and it's cool to see someone else going through the process. Makes your tutorials much more relatable.

    • @WistrelChianti
      @WistrelChianti 2 роки тому

      I suspect the ones here were deliberate but for purpose as he's aiming to illustrate the gotchas and their fixes

    • @lesliehui
      @lesliehui Рік тому

      @Dragon arrow functions are always anonymous regardless whether you assign them to a variable a not

  • @flieranonymous4588
    @flieranonymous4588 6 років тому +678

    Best programming teacher on internet..........

    • @haideralipunjabi
      @haideralipunjabi 6 років тому +2

      Flier Anonymous Agreed. Your opinion might change after watching the steams

    • @mohsinshaikh8944
      @mohsinshaikh8944 6 років тому

      Haider Ali Punjabi who cares the steam when you have coding train with you.... At least my opinions Will not..

    • @haideralipunjabi
      @haideralipunjabi 6 років тому +6

      mohsin shaikh My opinion, you learn things like debugging, mistakes, etc from the stream only

    • @bastifmbh
      @bastifmbh 6 років тому +5

      i find it very interesting how other programmers approach a problem.. and just watching the progress and the thinking of someone like daniel really helps a lot imho.. unless you're an expereinced professional yet i guess..

    • @BonefxInaxclan123
      @BonefxInaxclan123 6 років тому +4

      Urmmmmm travesy media check him out you will thank me later

  • @LandonHughes2
    @LandonHughes2 6 років тому +19

    Daniel, I literally CANNOT thank you enough! You are an UNBELIEVABLY amazing teacher!! Thank you SO much! I've wanted to understand how a computer thinks since I was exposed to them at the age of 5 (I got my first Gameboy with Yoshi's Island). I wanted to learn how to make games. The first time I was ever exposed to programming was my Junior year of high school (had a Java class). I hated it for the fact that my teacher was horrible! Nothing made sense. I wanted to like programming so much! Fast forward a few years later (2015), I took some Python courses, Swift courses, and C# courses on Udemy. All of them were incredibly basic and the instructors were very boring. I picked up all the basic things such as if/else logic, different data types, for loops/while loops, etc. All of them ended the same way; once they got to classes and objects, I gave up.
    Fast forward another year (2016) I picked up GameMaker, which is easy to understand for beginners. Everything that I learned in those courses transferred over nicely, but when it got time to debug, I gave up again :/
    Now fast forward into 2018, I found you! I remember you showed up in my Suggested Videos with your "Coding Challenge: Flappy Bird video". I subbed instantly! It was until this past week I watched your P5.js and Node Tutorials. I am SOOO glad I did. Like I said, computers have always fascinated me at young age. Thank you for teaching me the gift of programming! Thank you, thank you, thank you! I love that everything is starting to click now, which is what I wanted from the start. I'm pretty sure your style of teaching is how I'm able learn. Like I said in this comment and in previous comments, you are an unbelievably AMAZING teacher! Reading debugging errors is making SO much more sense now. Thank you so much times 1000 and keep up these awesome videos :)

    • @shubham-itachi
      @shubham-itachi 8 місяців тому

      What are doing now it's been half decade.

  • @pbznt
    @pbznt 3 роки тому +9

    I begin programming on Codecademy, and in 1 month I will begin an official coding course in college. I needed a channel like yours to get motivated and the way you explain everything is very fun and simple. Very entertaining and motivating!:) (From Quebec, Canada)

  • @KurtSchwind
    @KurtSchwind 6 років тому +8

    I've been using arrow functions for a while. It took a bit of time to wrap my head around some of the advantages but now it's nearly second nature. Good video. Keep up the good work.

  • @piczel9631
    @piczel9631 6 років тому +4

    Please don't stop do what you do. You are so funny and entertaining while still being extremely helpful => crucial things for an amazing teacher!

  • @vincej151
    @vincej151 4 роки тому +2

    You are truly gifted! I have watched hundreds of tutorials. I build complex software. And you are the best I have seen.

  • @benmoren5828
    @benmoren5828 6 років тому +2

    This video @ 5:46 totally saved me recently from so many `var that = this` statements in a recent project. I'm totally hooked on the arrow functions now!

    • @TheCodingTrain
      @TheCodingTrain  6 років тому +1

      I'm so glad to hear this!

    • @benmoren5828
      @benmoren5828 6 років тому

      Heres what I was working on, it's not a sketch, but it is p5 related :) : atom.io/packages/p5js-toolbar

    • @mrss649
      @mrss649 4 роки тому

      @@benmoren5828 Im going to download that tommorow. Kepp developing!

    • @mrss649
      @mrss649 4 роки тому

      @@benmoren5828 oh and also,
      1: Can you share the source code for that because that would be cool
      2:Where did you learn to make stuff like that

    • @BenMoren
      @BenMoren 4 роки тому

      @@mrss649 Source is available in the github repository here: github.com/bmoren/p5js-toolbar.

  • @shivam_0002
    @shivam_0002 5 років тому +6

    11:43 You are making the World a Happy Place by the way you teach.

  • @jaldipupadhyay4910
    @jaldipupadhyay4910 5 років тому +3

    It was so helpful and you are truly humble. I laughed at 8:22 when you said, if you are still watching this video you are really nice person LOL. I don't know how can we payback to people like you. Cheers

  • @blargflarg
    @blargflarg 5 років тому +2

    Holy crap. I absolutely love watching your videos on JS. JS has been one of the toughest languages I've come across, and you make it understandable and easy. Thank you!

  • @samhero479
    @samhero479 4 роки тому +1

    This guy is so friendly and full of life. Kudos to your contagious enthusiasm! Much love.

  • @phil5992
    @phil5992 4 роки тому +1

    this guy is a total goober and good lord do i love it. i had a college math professor EXACTLY like this, and you sir, captivate my attention. you got yourself another avid viewer!

  • @judeaf.4393
    @judeaf.4393 2 роки тому +1

    You're so quirky, I love it!!! Awesome, clear explanation. I needed this clarification before I read any more reference articles... sometimes they can become confusing or simply do not explain enough and I am left with questions. Awesome, awesome explanation- thanks!

  • @KayinAngel
    @KayinAngel 5 років тому +2

    Been watching a bunch of your videos lately, and am unsure if your "mistakes" actually are genuine mistakes or planned examples of mistakes, but for some reason it seems to help me learn and retain better than someone whipping through it without explaining why something fails if done wrong. I dig.

  • @caio-jl6qw
    @caio-jl6qw 5 років тому +13

    I love this channel. I've learnt so much about JS since I started watching you.

  • @TheWWWyrm
    @TheWWWyrm 6 років тому +1

    What helps me to use const more often is using a linter set to highlight all variables that are never assigned and not const. Really helps in keeping code clean and understandable!

  • @presshun
    @presshun Рік тому

    Watching 5 years later to the day, so spooky was relatable! :D Thanks for the great vid!

  • @newesttechdesigninnovation8121

    Might be the best teacher i came across
    and
    i usually dont even comment on peoples videos

  • @jobayerrifad544
    @jobayerrifad544 3 роки тому +2

    I've never smiled while watching a tutorial unitl 8:15

  • @SayanChakraborty10397
    @SayanChakraborty10397 4 роки тому

    Every time I forget any concept, this is the first (and sometimes the only) place I refer to. Thanks a lot!

  • @trollanddrump5326
    @trollanddrump5326 5 років тому +21

    Never in my entire life have I ever felt so much discomfort and anxiety over something as trivial as 2 bytes of tormenting equality symbols! Some nights when I don't get some sleep, I think it's because of the => like it's some kind of evil emoji jeering at me.

    • @Bigsupreme2000
      @Bigsupreme2000 3 роки тому

      Some gusta who introed it did not realize a lot of amateurs gonna get lost at it 😂

  • @surajkawale2763
    @surajkawale2763 5 років тому

    Never ever stop teaching programming.I wish i could like this video 3000 times

  • @konkenbonken
    @konkenbonken 4 роки тому +2

    I just realised that you make really great tutorials as well as your coding challenges. I've just watched those(and I love them❤).

  • @AdamMalesevic
    @AdamMalesevic Рік тому

    The best explanation of Arrow function on UA-cam 🎉😊

  • @pradiptahafid
    @pradiptahafid 5 років тому

    Hi Dan,
    As a beginner, I just want to let you know that your error is more valuable than the actual code that works. It saves me hours of time to figure out what's wrong with my code. That is why I always following your channel and reproducing the code that you made. Thanks for the information sharing.

  • @ArnoldsKtm
    @ArnoldsKtm 6 років тому +10

    Recently learned about arrow fns while messing with node. It was confusing at first but it's basically just a shorthand function which ends up being much cleaner. Now I try to use it whenever.

    • @iskariotas
      @iskariotas 6 років тому +5

      ArnoldsK there are catches with it tho. The scope is different than normal foos.

    • @dvorapat
      @dvorapat 6 років тому +2

      @Nikolajus
      Exactly! It is not just "shorthand function". It could be clearly seen in the video with the Counter class example that it is not the same, because arrow functions use lexical scoping.
      I found this article helpful to tell a difference between "standard" function and arrow functions:
      derickbailey.com/2015/09/28/do-es6-arrow-functions-really-solve-this-in-javascript/

  • @christopherLife
    @christopherLife 5 років тому

    This is what a man who loves coding and teaching looks like!

  • @rubenjwz
    @rubenjwz 3 роки тому +2

    You're always able to humanize programming for me, and I thank you for it :)

  • @tonyp3173
    @tonyp3173 5 років тому

    This is probably the single best video you've ever did let alone the internet.

  • @someenglishgames
    @someenglishgames 6 років тому +7

    Was very helpful in node.js to get a simple declaration for a function for a callback

  • @davidpark9020
    @davidpark9020 5 років тому

    Days of reading articles, blogs, books and still can't get it. This guy made me understand this within 20 min. Thumbs up high.

  • @PaulMcCannWebBuilder
    @PaulMcCannWebBuilder 5 років тому

    Your mess up at 14:34 is the perfect learning opportunity to understand const! The fact that you don't edit those kinds of things out sets you apart from most teacher and tutorials. I'm going to pretend to make this mistake in my own classes!

  • @cprogramming5640
    @cprogramming5640 6 років тому +73

    That is spooky. Code used to be cryptic and the emphasis has been on making programs more readable. Now we are headed back to more cryptic. Spooky “crypt”ic

    • @youngcitybandit
      @youngcitybandit 4 роки тому

      No it isnt... it is as readable as ever if you know what youre doing you can make anything readable.

    • @momahdy
      @momahdy 4 роки тому +1

      you gotta learn the language so you can read it

    • @0xssff
      @0xssff 4 роки тому

      From low level to high level to low level "syntax"..

  • @2ru2pacFan
    @2ru2pacFan 2 роки тому

    You and AutomationCat are the best coding teachers on the internet

  • @robocop30301
    @robocop30301 6 років тому +2

    So happy that I found this channel! Thanks for all the help!

  • @AliveNotDeadmund
    @AliveNotDeadmund 3 роки тому +1

    Oh my god, that was hilarious! THANK YOU for unpacking The Spooky Arrow into a much more friendly concept.

  • @brutalbutler
    @brutalbutler 4 роки тому

    my fav teacher, wish i had you as a lecturer

  • @ZZZZZZZaaaart
    @ZZZZZZZaaaart 4 роки тому

    You are amazing. It didn't solve my question but... I learned new amazing things and also discovered you. From a begginer in programming in Spain, thank you and keep it up!

  • @GraceandWisdom
    @GraceandWisdom 4 роки тому

    Daniel Schiffman, you are an awesome teacher and I understand most of what I don't know after you have shown me!!

  • @akosbarabas22
    @akosbarabas22 5 років тому +3

    Best explanation i could imagine, all i can say is thank you!

  • @leinf4464
    @leinf4464 6 років тому +2

    The arrow functions seem like a part of kinda functional programming in Javascript and seem to be similair to the lambda expresions notation in Java to me. Great tutorial video as always :D

  • @tekoreypy
    @tekoreypy 4 роки тому

    I agree, to try new thing in programming is also interesting/exiting/spooky/terrifying/and whatevea, I used to avoid these things, but even if you say there is no reason to be afraid of them, you will always find something you don't want to start using, thanks Theacher Shiffman for encouraging us to try new things

  • @arshadjaveed7877
    @arshadjaveed7877 6 років тому +98

    Arrow function => Lambda expressions ;)

    • @ruffianeo3418
      @ruffianeo3418 5 років тому +1

      Wait for his video once Haskell Arrows make it into ES 42 ;)

    • @protondecay4607
      @protondecay4607 4 роки тому

      It's a bit different from regular functions in that the current execution context(this) refers to the Global (or undefined, if you're in strict mode) instead of the function itself for regular functions

  • @roltthehunter
    @roltthehunter 6 років тому

    I just started coding with js a month ago i studied for 130 hours and i personally love arrow functions i feel like using them makes my code look more professional

  • @vibsh625
    @vibsh625 4 роки тому +2

    7:00 It makes perfect sense, thanks you cleared the doubts i had on react event binding.

  • @craigburton4447
    @craigburton4447 3 роки тому +1

    14:01 love the sound board

  • @boultifnidhal2600
    @boultifnidhal2600 3 роки тому

    You're the best teacher on earth, I love your intros so much.

  • @fracasj
    @fracasj 3 роки тому

    You might have changed your opinion of the arrow function three years later (or not haha), but it's extremely vindicating as a new coder working their way to ES6 how frustrated you are by it! It's stumped me so many times and I'd much rather write out the function in total! But this helps a lot and maybe I'll learn to embrace it. Thank you again for another helpful tutorial!

  • @jorgedavalos5663
    @jorgedavalos5663 4 роки тому

    the good old blackboard!! def works great for explaining things ! nobody uses it though! hope some other guys that teach coding learn from you. cheers!

  • @NatetheAceOfficial
    @NatetheAceOfficial 6 років тому +56

    I just need an excuse to apply the UnicornFluffyTimes function to make my project particularly magical.

  • @PirateCaptain_ThunderHook
    @PirateCaptain_ThunderHook 2 роки тому

    this is really helpful, thanks for having this video on the internet.

  • @MrT246007
    @MrT246007 6 років тому

    Your vids help me so much. I'm new to programming and you dumb things down really well. Thank you for what you do.

  • @Engineer9736
    @Engineer9736 5 років тому

    These videos really update my Javascript knowledge properly. To stay uptodate one needs input from somewhere.. could be a forum community or official documents, but these videos are just easy. Just press play and follow along 🙂

  • @MikahFSMusic
    @MikahFSMusic 3 роки тому

    This man is a fantastic teacher

  • @jorgel9041
    @jorgel9041 5 років тому +1

    The spooky intro music is ok even in summer. They're spooky dude

  • @sanishchirayath4149
    @sanishchirayath4149 2 роки тому

    I love this...Especially the 'CONST conter1'.., Thanks for making learning code fun

  • @wendusyaputra
    @wendusyaputra 6 років тому

    This guy is so funny. But honestly i would say that he is the best teacher on the internet

  • @entalpa
    @entalpa 6 років тому +9

    An anonomous function is hard to debug, because afterparty a error you dont get the name of the function where the error is if its a Callback function. Always try to name your functions

    • @tacarson
      @tacarson 6 років тому +9

      Wouldn't you still get a line number?

    • @ThatsEli
      @ThatsEli 6 років тому

      Tate Carson Depens on if you are transpiring and are/aren't using source maps :/

  • @scottibr2
    @scottibr2 5 років тому +2

    thx, you just got my like by making me giggle about "unicorn fluffy times"

  • @dinoXman
    @dinoXman 5 років тому +1

    Wow.. he's very good at drawing horizontal straight line.. amazing

  • @ohiriboi1872
    @ohiriboi1872 6 років тому

    It’s my first time to watch JS but am impressed 1000000%

  • @muhammadaadil3546
    @muhammadaadil3546 4 роки тому

    This video is better than the udmey courses for learning javascript

  • @syedbaryalay5849
    @syedbaryalay5849 6 років тому

    Watching this video was the most fun part of my day

  • @user-qn8uy5mj4c
    @user-qn8uy5mj4c Рік тому

    I really like your style of lecturing

  • @krushna7467
    @krushna7467 3 роки тому

    The way u simply all the concepts is just awesome 💜
    Thanks a lot!!!

  • @waterbottlexd1298
    @waterbottlexd1298 2 роки тому

    What an interesting person. Really makes it easier to learn.

  • @barszrhl445
    @barszrhl445 2 роки тому

    You are funny guy, I watched without cutting whole this video in normally always used to skipped,anyway thanks for helping.

  • @mohsinshaikh8944
    @mohsinshaikh8944 6 років тому +42

    He is nice guy

  • @therobot4779
    @therobot4779 5 років тому

    watching in the future on a micro binge, that was such a weird intro and i loved it

  • @UweEichel
    @UweEichel 6 років тому +3

    There is a way to use arrow notation outside of IEFEs. You could write something like
    var fun = (args) => {
    /* Your code here */
    }.
    Honestly, as somebody with a mathematical background, this way of writing functions seems very natural to me. When you (properly) define a function in mathematics, you also write
    f: Domain -> Image
    x => x^2.
    The new arrow notation could only be closer to that notation if you actually had to define the type of the arguments and the return value. I love the arrow notation

    • @RedsBoneStuff
      @RedsBoneStuff 6 років тому

      You sound like a fan of Lisp ;)

    • @matthewrice7590
      @matthewrice7590 6 років тому +1

      This would work but you would always want to use “const” when declaring a function and not “var”, as you would never want to reassign a function’s functionality(there’s probably a better way of putting this :) ) within a program. Just nit picky stuff but a programming standard nonetheless.

    • @UweEichel
      @UweEichel 6 років тому

      I have never thought of that. You are probably absolutely correct.

  • @stanleyjaxen5043
    @stanleyjaxen5043 Рік тому

    thanks so much the world is a better place
    most my teachers taught this like
    "nu nu nurr and an arrow!... next topic"

  • @ThinkerHigh
    @ThinkerHigh 5 років тому +1

    I wish every teacher should be like you.

  • @akhtar7574
    @akhtar7574 3 роки тому

    I'm a nice person!! You just made my day.
    I waited for you to tell me that before stopping the video.
    Just kidding. I watched the whole video.

  • @mrshurukan
    @mrshurukan 6 років тому

    Awesome explanation! I resent this to my friend who didn't know the whole thing about those arrow functions! Thank you so much

  • @ganstabreakincity
    @ganstabreakincity 6 років тому +14

    8:14 deserved like

  • @warrenwong4518
    @warrenwong4518 3 роки тому

    You have a gift for teaching!

  • @placidchat7532
    @placidchat7532 5 років тому

    @18:10 The reason this happens is javascript object orientedness is a kludge, so all functions don't know if they're functioning within the context of a class, which is why there are binds, something that doesn't exist in any other language, where every instantiation knows if instance methods are referring to itself and not a global function. You can see this happening because of javascript's use of a prototype hash keyword is to attach functions to an object. i.e. an object is a hash. Same thing was happening in perl for the longest time

  • @jl-dq5ch
    @jl-dq5ch 5 років тому

    0:49 dude, you nailed that sentence 👍

  • @willful759
    @willful759 5 років тому

    Funny how the solution you came up with is more elegant than the original solution, also lambdas are the best

  • @rimora.
    @rimora. Рік тому

    thx for understanding how confusing arrow functions are for beginners

  • @danilo2735
    @danilo2735 6 років тому +25

    i want to be like you when i grow up

    • @DavidWoodMusic
      @DavidWoodMusic 5 років тому +1

      Danilo Marques So be like him now. Then grow up. :)

    • @kennypeere9146
      @kennypeere9146 5 років тому +3

      Just start laughing at completely random non-funny things and consider yourself a comedian.

    • @cats4president
      @cats4president 4 роки тому

      grace and frankie quote?

  • @mephesh
    @mephesh 5 років тому

    18:15 *mindblown* great demonstration of how function() {} and () => {} have different this behaviour

  • @lofofojb
    @lofofojb 3 роки тому

    This channel is so cool ! Thanks you Coding Train !

  • @kingmonger4456
    @kingmonger4456 4 роки тому

    I LOVE this mans videos so much, he makes it enjoyable while learning. so much personality.

  • @Hubson55
    @Hubson55 Рік тому

    as someone wrote on the internet "arrow functions are trendy and sexy" :)

  • @MrJatinpatodi
    @MrJatinpatodi 5 років тому

    Very nice. A funny and easy way to learn complex stuff...great teaching skills

  • @tokunboayomide5440
    @tokunboayomide5440 2 роки тому

    Guy you're wonderful, I just had to subscribe and clicked the like button.

  • @mehdiwadoud8098
    @mehdiwadoud8098 6 років тому

    Hey man you almost killed me at 8:10 lol, i really admire the way you are making your lesson one of my best teachers

  • @SwapnilMhaske1
    @SwapnilMhaske1 5 років тому

    I like the way u make mistakes and don't deny it... Good to see u did not cut it off from video. Very comprehensive and nice video. You covered all aspects I know about arrows.
    One suggestion, instead of scoping tutorials to sketch.js library, why don't you keep it general. That will be less confusing for newbies.

  • @cimmik
    @cimmik Рік тому

    I watch it in the future, but because it's 29th of October, the Halloween reference is still relevant :)

  • @ethanshannon6825
    @ethanshannon6825 5 років тому +1

    Great explanation of hard to understand syntax!

  • @joshgrosss
    @joshgrosss Рік тому

    Watching this 10/28/2022 and still extremely helpful :)

  • @thydevdom
    @thydevdom 4 роки тому

    Loool. The opening. Great video!

  • @onyilimba
    @onyilimba 4 роки тому

    why is he always very happy... cheerful? nice tutor though.

  • @akshaypandey6086
    @akshaypandey6086 5 років тому +1

    THAT WAS AMAZINGGGGG...My life is better now and I can sleep

  • @davidfont2596
    @davidfont2596 4 роки тому

    I have to say that I want to be a student in your classroom. This got a like and sub out of me!

  • @adaliadasilva4200
    @adaliadasilva4200 2 роки тому

    Lemme tell you, you are great at explaining. (Y) Love your euphoric energy. Super pure! :)

  • @joesminis
    @joesminis 6 років тому

    You have just cleared up so much for me and I am only 3 minutes in

  • @d74g0n
    @d74g0n 5 років тому

    Watching this today ... just before Halloween 2018... and thought it was a new post I missed.