JavaScript ES6 Arrow Functions Tutorial

ES6 added many amazing new features to JavaScript, but by far one of the best features is arrow functions. Arrow functions not only make code much more concise and legible, but it also handles the scope of this in a much more intuitive way.
Arrow Functions Article:
blog.webdevsimplified.com/202...
Twitter:
/ devsimplified
GitHub:
github.com/WebDevSimplified
CodePen:
codepen.io/WebDevSimplified
#ES6 #ArrowFunctions #ModernJavaScript

[@Bigsupreme2000]

This guy knows how to explain the basics down from the highly abstracted explanations to a very simple one everyone can understand. Great teacher!

[@user-gl9tr9nb1u]

Absolutely. He's the best

[@nerkec603]

Absolutely! I'm not religiosu but whenever he explains to me somethign I've been struggling with am always like "god bless this mf"

[@BM4Dayz69]

im actually really confused around 7:45 when he starts to explain this this or that this

[@piggiesgosqueal8066]

​@@BM4Dayz69I know I'm replying late but for anyone else confused- I believe he was pointing out that functions and methods are different and when calling a function (even within a method of a class) it will not work to refer to object variables (e.g. this.name) because the function acts as a completely separate block of code than the class and you must either provide the function the variables you're referring to via parameters OR you must be using global variables. Class variables are usable only within a class I think. Whereas if you use => notation then it stays within the class and thus you may use those local class variables.

[@joefacenda3034]

I finally understand how arrow functions use the “this” keyword differently. Thank you.

[@WebDevSimplified]

I'm glad I could help!

[@gunb00t]

I find still hard to grasp this "this" because of this so much "this" in this guy's speech. Hard to keep track of this. Yet, not this Bob's fault, he does the best to explain this "this".

[@redwanzia1823]

haha!!! same here .....8 months JS and REACT .....I finally get it !!! thank you so much!!!

[@manuelcasares7270]

@Geno Thank you for explaining this... ba dum ts, very helpful... and confusing...

[@damansharma6737]

@@WebDevSimplified love u brother..no homo❤️

[@AnnieTaylorChen]

Notes for Arrow Function: 1. function keyword NOT needed 2. let/const variableName = (argument) => {function body} 3. short hand: curly braces and return keyword NOT needed, return result directly after => 4. brackets NOT needed in SINGLE parameter function's argument 5. do NOT bind "this" (avoid for methods) or "arguments". 6. It can NOT be used as constructors or generators (I don't know what those mean yet...) A good suggestion from developer Lars Schöning: 1. Use function in the global scope and for Object.prototype properties. 2. Use class for object constructors. 3. Use => everywhere else. Since I'm a beginner I haven't seen so many examples with errors, so I will probably understand the point 5 and 6 better when I do.

[@JustSujC]

Thank you for these notes. Aggregated and concise knowledge like this is invaluable.

[@Microphunktv-jb3kj]

tech moves so fast... es7 = Added exponential operator (**). Added Array.prototype.includes. es8 = Added string padding. Added new Object properties. Added Async functions. Added Shared Memory. es9 = Added rest / spread properties. Added Asynchronous iteration. Added Promise.finally(). Additions to RegExp.

[@ulanb7584]

6) let sum = (a,b) => a+b; console.log(sum(2,3)); will output: 5.Here sum is variable but we still can use it as a function when we assign it parameters when running it: sum(2,3); But if you try doing: let sum2 = new sum(3,4); it will give error. cause 'sum' is variable, primitive data structure which hasn't got constructor. The usual function declaration such as: function sum3(a,b){return a+b}; in other case can become a constructor and be used as one. ex: let sum2 = new sum3(5,6); because it has constructor initialized with the same name sum3(). in JS constructors and functions declaration is similar.

[@MMABeijing]

marry me Annie, and thank you

[@ko-Daegu]

@@ulanb7584 Thankx what about generators ?

[@timwright7458]

Glad I stuck around for the climactic ending where he explains that arrow functions aren't just syntactic sugar but a fix for the scoping issues with regular functions.

[@techsamurai11]

Yeah but that's a language choice - the anonymous function could have had scope... If anything, this creates a mess.

[@garster]

Tip: 99% of the time you can use const over let in JavaScript. Functions can always be assigned to a const since the function code does not change.

[@dineshvutukuru5692]

Correct

[@DenisovichDev]

Nice

[@AlThePal78]

will using const make the this inside the function inherit the constructors this?

[@Micro-Moo]

Perfectly correct. There are more fallacies in this video, I listed them (or some of them) in my other comment.

[@Micro-Moo]

@@AlThePal78 No way. Const is nothing but const. Moreover, it is a constant declaration only for a variable, not for the properties of an object this variable refers to.

[@kendallhunt981]

Your content is amazing. I am always trying to make my learning more efficient, and I always come to your channel for clear, well taught lessons. They always make sense to me right off of the bat. You're doing great dude!

[@innocentrage1]

I've been doing various tutorials on web design for three months now and didn't fully understand arrow functions till now, thank you so much!!! I will be checking out more videos of yours

[@JP-zp6ob]

anytime im stuck on something i always search for your channel to break it down into something i can digest, thank you!!

[@andrewkuhlman1665]

I appreciate that you have your words together ahead of time and can demonstrate while speaking. I get so frustrated at the content providers that sound like they didn't bother rehearsing and doing multiple takes until the script flows naturally, clearly, and concisely. Thank you!

[@ljli]

Kyle, you seriously have a gift for teaching. Everything is so concise and well explained. It's very evident you take a lot of care in planning out your lesson plan. Having been a dev for over 20 yrs and consuming tons of material, you're my go to person when I need to learn or review something. Thanks so much!

[@TheNagyTheater]

Could not agree more! Excellent work. Thank you!

[@griffinsilver5072]

The portion of the video where you speak about the different usage of this in arrow syntax versus what was standard function syntax was worth its weight in gold. I wrote it in my notes twice. Thank you so much.

[@perseuswong6864]

I'm a big fan of cleaner, concise code syntax. This is awesome. Thanks you!

[@MJRezai]

I was learning React, then confused about the this keyword; I read the MDN Documentation, then w3 schools, stack overflow and everywhere but this video was where I was enlightened. Thanks Kyle, you're awesome.

[@diptimalik0101]

same here

[@Micro-Moo]

Read Mozilla JavaScript documentation. Yes, Mozilla browser now fails to provide compliance at the level of Chromium, but its documentation is very good.

[@compton8301]

This channel is seriously underrated. Thanks Kyle-- you're clear and straight to the point. I subscribed!

[@WebDevSimplified]

I'm really glad I could help!

[@Micro-Moo]

This channel is seriously overrated. So much of a failure to get into the essence of things and to promote good practices. People, don't waste time on it, read original documentation and use your own head.

[@ganavin3423]

@@Micro-Moo hey bro.. Didn't u attend any classes or any videos regarding web ?...one thing I wish to tell that if someone helps to understand any concept it makes us to Learn quicker.this is smart work... I accept your words but we can't follow this in every time... If we get some knowledge on any concept .we can easily dig the documentation.

[@DaalderMees]

I absolutely love your videos. You explain everything so calmly and clear. Thanks a lot Kyle!

[@ngunner15]

I like how you explain arrow functions in a simple way, always return to this video whenever I want to refresh arrow function and the 'this' binding concepts.

[@GretSeat]

Dude, I have to admit, this is the first and ONLY video that has helped me understand arrow functions. I've never understood WHY I wrote it the way I did... and you simplified it beautifully. The fact you said "Well, because it's this... you can delete this..." and "And because this... you can get rid of that" was so much easier than people saying stuff like "Okay, just do it like this" Okay, but WHY? So thank you, so much for doing this video.

[@tym20021]

I love how organised your videos are. No distractions and stuttering like on a lecture. You're making people's lifes so much easier

[@KENAXION88]

This is amazing. Your tutorials are the most helpful I've come across. Thank you so much.

[@aparna1498]

I was struggling with this arrow function thing, seriously the comparison use really changed the game for me thanks!!

[@jimmydeanbakker]

This is the first time I've seen the arrow functions. I'm going to definitely have to dive nose deep into this.

[@WebDevSimplified]

They are super nice when trying to write code that utilizes the new ES6 array methods as well as promises. It makes the code so much cleaner.

[@achtube85]

Oh man… the variety of examples, the pace, the clarity… It gives me so much pleasure to finally understand certain concepts in such an easy way. Thanks!

[@spondoolie6450]

BFTs!

[@achtube85]

@@spondoolie6450 what does that mean?

[@draganpanic1082]

Clear and concise explanation. Have been trying to understand since I started learning JS what the difference was and haven't come across an explanation like this. Finally get it now! Definitely subbed to your channel. Thank you!

[@lowwastehighmelanin]

I am in a bootcamp and this topic has been kicking my butt thank you SO MUCH for making this make sense. Wow. This has been stopping me getting my homework done.

[@dpapa2175]

ah....this finally makes sense to me...(coming from another language and recently learning JS I couldn't understand why my method similar to 2 didn't work. Cheers.

[@TheLinkinax]

Dude keep it up! you deserve way more subcribers!

[@WebDevSimplified]

Thanks! I only just started KZbin, so I am really happy with where I am so far.

[@ardonjr]

I heard you.. I just subscribed.. this was a joy and informative to watch.

[@albertchung7641]

Thanks for explaining the scoping for "this"! Now I want to use arrow functions every chance I get!

[@AlexHutchingsOfficial]

I couldn't get this after hours of other people explaining them, and I understand your explanation literally within 2 minutes. Thank you,

[@linhdo1738]

He pretty much untangled the "this" myth for me in 9 minutes.... Legend! Thank you so much for the video!

[@MatthewWeiler1984]

Great video, you really explain arrow functions well. I agree that the "this" scoping is the best reason to use arrow functions. I don't agree with making your code more concise as it frankly makes the code harder to understand for novices and lazy developers. From what I've seen, working in medium to large companies, most developers are lazy and don't want to learn new things. To avoid people constantly asking me how my code works because they don't understand it, I've opted to make my code as readable as possible. I add comments wherever there is conditional logic and I always add method/function comments (JavaDoc style). I won't make my code as verbose as possible, but I'll avoid one-liners when a couple extra lines containing curly-braces and return statements will help someone else understand the code better. In the end, code that is going to be maintained by multiple people, should be written with readability in mind. If you're working with code which is negatively affected by nano-second delays introduced by not 100% optimized code, then don't let shitty developers touch that code :p But this it about JavaScript, and I've never seen a scenario where JavaScript code is used where such optimization is needed.

[@pablitocodes]

This is a good point. When I was a jr one liners seriously confused the hell out of me.

[@raven.4815]

Completely agree!

[@tactical_blaireau]

Great job Kyle, your explanations are clear and you didn't even punch any holes in drywall!

[@jelanmaxwell4762]

Great tutorial! I really enjoyed the explanation of the scope of "this" I'm finally seeing the power of arrow functions. Subed!

[@dsellis08]

"This is defined where the function is called" finally made me understand why this.name didn't work in ES5.

[@jeyzzz696]

just reviewing arrow functions for my tomorrow interview. wish me luck!

[@WebDevSimplified]

You got this!

[@mohammedalmukhtar8949]

How did it go?

[@jeyzzz696]

@@mohammedalmukhtar8949 the exam was all about JSON manipulation. Really had a hard time I was doing the exam for about 6 hours. Some mobile responsive designs as well was asked. all should be in plain javascript no frameworks.

[@xuevgermanist]

Finally an explanation that I understood and successfully ran! Thank you so much!

[@arcadeduo7101]

After studying from different sources and this video, I started to get it. Thank you very much. Best teacher!

[@damianodamian7907]

Thank you very much for this amazing tutorial. You're really good at explaining stuffs. Great job! I just want to let you know you forgot the parenthesis in "random()" in the third function, otherwise it won't return a number between 0 and 1

[@lostware6458]

it would in fact return the Math.random function itself right?

[@9remi]

@@lostware6458 yeah, it would. const randomNumber2 = () => Math.random(); // personally not what i'd do. const randomNumber2 = Math.random // way better

[@Eltopshottah]

Doesn't use semicolon Me: "I too like to live dangerously "

[@md.shariarkabir7350]

semicolon done by prettier

[@anonymanonym9004]

Doesn't use semicolon; Me: "I don't like to live dangerously."; Looks way cleaner, not?

[@digitalminister5687]

@@anonymanonym9004 I actually started using semicolons in normal non-programming texts because of the habbit :D

[@paulopiyo5399]

Bruh I actually got ticked off

[@quinndirks5653]

The rules of JavaScript Automatic Semicolon Insertion: flaviocopes.com/javascript-automatic-semicolon-insertion/#the-rules-of-javascript-automatic-semicolon-insertion has examples of what can go wrong when you forget to put a semicolon, too.

[@linjie6446]

oh man, your videos are so straight forward and easy to understand. Thank you so much

[@satvirsandhu207]

Great explanation, I was having trouble understanding how arrow functions work. I ended up watching around 5-6 videos, and this was the one that finally made it 'click'. Thank you!

[@chrismaki5456]

So two years later, where are you at now?

[@eddiejaoude]

Great explanation and examples 👍🤓

[@WebDevSimplified]

Thanks!

[@mankybrains]

'This' just confused me.

[@peefg]

LMAO, how sweet comment 😁

[@ClintDavis86]

Do you mean 'this' the parent scope (youtube video), or, 'this' your own comment 🤣

[@mankybrains]

@@ClintDavis86 I'll let the reader of the comment decide. 🤔😊

[@connectthebits9763]

Completely normal to be confused by it. Think of 'this' as just another property that comes with objects, but it refers to scope.

[@sommie4935]

Instructions unclear, this pointing to afterlife

[@mitor_5052]

man ur rly great for make this content for us, i didn't know the context of "this" in js and as an oop dev i have been having problems for long time.. ty a lot

[@dudulofuu]

Man this was the best video on the subject I've found so far! thanks a million!

[@jean-francoisbouzereau6258]

Another difference is that functions obey to hoisting, when arrow functions do not : This works : console.log(triple(10)); function triple(x) { return 3*x } This doesn't : console.log(triple(10)) let triple = x=>3*x;

[@dreamyrhodes]

huh? Why doesn't the second work?

[@Chibisenpai2]

@@dreamyrhodes From what I understand, function declarations get hoisted but function expressions do not. Also "let" does not get hoisted I believe, so it creates an initialization error. If it was "var" you still get an error (a different one) since function expressions do not get hoisted. That's what I think, but please let me know if I forgot something or if I'm wrong.

[@breasthopper]

Second one is a function expression right? So even if you don’t use arrow function you still wouldn’t be able to log the second one. Let keyword would give you “triple is not defined” error, while var would give you undefined.

[@somedude6420]

ohhhh

[@jrgalyen]

But that is a feature of anonymous functions. Hoisting is a strange, irrelevant term. Let fn = function(x) { return x * 3; } // notice the semicolon, required by any good lint rule

[@MylesGmail]

Thx I tweeted this

[@machaca111]

Great explanation, not only did i understand the arrow function as also making it easier to compreend the 'this' keyword

[@felixsavero4656]

Thank you so much for the explanation! I've been confused for like hours until your video showed up. Definitely subscribing.

[@Joseph-qb1es]

I swear KZbin algorithms can read minds.

[@JoonasKarp]

Could you make your es6 videos with ’react hooks’ specially those where you use ’this’ keyword and ’class’ ? Or simply write it in comments, i really like your videos

[@staymotivated1204]

Thank you so much for your explicit explanation on this. You really made it easier to grasp. subscribed immediately!

[@karimbedreddine8967]

what's an amazing simple explanation i really appreciate your work.

[@nicklandreth2527]

As someone who learned other languages first it was much harder to envision how regular functions work than how arrow functions work, which would have been what I would have expected from regular functions.

[@jimosman7301]

The fact that he doesn't end every statement with a semi-colon disturbs me.

[@nagualdesign]

Thank you! I thought it was just me.

[@hugocardoso1488]

I was thinking the same. It gave me some anxiety ahahah and it's just a tutorial ahahah

[@evil1717]

Automatic Semicolon Insertion, check it out...

[@douchymcdouche169]

@@evil1717 If you're teaching people to code you should teach it with proper syntax. The automatic stuff comes after you've learned how coding works.

[@houseofdiego]

I know...

[@menglin7432]

This explaination is much easier to understand. Thank you so much!

[@SergioArroyoSailing]

I have just learned about => but only your video discussed scoping, which is by far the most important to use it. Thanks for 'this' . :)

[@shashwatgupta_]

can someone tell me when we use the {} braces with arrow function ? do we use it when we have to return multiple line of code ?

[@BobbyBundlez]

yes. no brackets needed is single line that returns something (called implicit return)

[@iamb2348]

"The scoping of the this." Hah

[@tonyjaradev]

You should also add to the description of the video "How to understand "this"" because I've looked for so many videos explaining and finally I get it xD

[@erickchavez4551]

"This" is such a confusing topic, but thanks to your explanation I think I'm getting it now. Thanks a lot!

[@RisyadHasbullah]

This this this this this this this. This is so confusing to hear 😂, great video tho!

[@WebDevSimplified]

It was just as confusing to say lol. I was so worried I would mess up saying a this at some point.

[@jameswagstaff1962]

How many people were screaming 'SEMICOLON' at the screen?!?!

[@ErrorDebug]

In JS semicolons are not necessary.

[@jameswagstaff1962]

@@ErrorDebug neither are indentations or separating lines of code!

[@jsprowse]

I was yelling "PARENTHESES!" at the Math.random line.

[@ThatResolves]

My prettier does it for me lol

[@topper_clausen]

Everyone who teaches code does this -.- even proffesional teachers do

[@ravitshoval2458]

your explanations was the only one that made me really understand the use of it . thanks man

[@Greg4510able]

You are the man! I love your way of explaining, it shows that you truly understand what you teach. Thank you so much for your videos, I'm very grateful for them! God bless

[@LonelyJester]

so when you use 'this' in the function, since its being called directly from the document. The 'this' would refer to the document? and The document doesn't have a name property so thats why it returns " ", did I understand correctly? 😂

[@michaelpaxman9731]

This is correct.

[@nickr753]

No, this is not correct. Test it for yourself by defining this.name outside of the class definition. The most important point about the issue (which is completely glossed over in the video) is that the this is being referenced in an anonymous function passed as a callback to setTimeout().

[@StanbyMode]

Challenge: Take a shot everytime he says "function"

[@hamzahahmad1670]

Your explanation of how arrow functions change the usage of the "this" keyword is the best I've seen on KZbin. Thank you.

[@WebDevSimplified]

You are very welcome. I'm glad my video was able to resonate with you.

[@robinkartik6356]

This is what I am looking for, easy explanation. Wonderful job.

[@IcarianX]

First part is very good. Could be improved by demonstrating the code in execution though. The second part, explaining "this" totally lost me though.

[@WebDevSimplified]

Sorry it was confusing. Essentially all I was trying to say is that the this keyword inside an arrow function is going to be the same as it would be right before the function is defined while the this keyword in a standard function is the same as it would be directly before the place where the function is called.

[@HemeHaci]

@@WebDevSimplified Nah it wasn't confusing, the way you explained was great. The dude who asked might not be in his best state or simply coding isn't for him. Keep up the good work.

[@polosatus]

5:22 That code is not exactly the same - first one has no return statement, and though in this example it doesn't matter, you should always make sure that what your function returns is not going to break things in you code. So, just blindly replacing all classic functions with arrow functions might even break things. You might also break things if you rely on function this context (e.g. in event handlers).

[@codesymphony]

true. the last function is specifically used to perform a side effect, but not return a value. airbnb's style guide recommends keeping the curly braces to signify that there's a side effect

[@cesarchicaiza4831]

Thanks so much, your videos have been so easy to digest. Keep up the excellent work. You are a life saver!

[@javieralas05]

You're awesome, I've been struggling to understand arrow function and finally got it!

[@zarghamaijaz5933]

i know how 'this' keyword works but when i see it in an actual code, i have no idea what's going on 😟

[@ProtegeBlackMamba]

So glad that I found this Channel!

[@amandaromero1221]

Subscribed so fast. Thank you for a clear and concise explanation. Emphasis on EXPLANATION. Thanks mate!

[@kimitiwari571]

You're awesome ,I have been struggling to understand arrow function and now I finally understood . Thanks

[@MimadoTheCat]

I feel sort of weird to be commenting on a really old video... I just want to say that you explained the concept of the arrow function in a way that even a 5-year-old could understand if they had background knowledge. I love how you make your videos so easy to follow. Tysm for the vid.

[@johnjoyce]

Nice, well-planned, simple examples to help reinforce.

[@lemos51]

3rd video in a row made me subscribe. Clear and straight to the point. I'm enjoying your channel so far. Keep it up (Y)

[@WebDevSimplified]

Thank you!

[@jillhughes3792]

That helped me really understand how to convert to arrow functions, thank you - I am in school and class went too fast past this part.

[@benniegamali3622]

Thanks. The examples and descriptions were realy helpful to understanding the point of using arrow functions.

[@silviupanait8861]

Wow, finally someone explained this to me so that I can understand it, thank you so much!

[@yellowrr]

You earned a subscribe from this video. Great explanation. As a programmer from a past life who has been getting back into JavaScript for fun, I never understood what the arrow function was used for, until now. Thank you!

[@WebDevSimplified]

I'm glad I could help!

[@ubermenschfallschirmjager7184]

Confidence oozes from this dude! And his tutorials are unparalleled!

[@WebDevSimplified]

Thank you!

[@stephanieowens1390]

OH my god. Finally -- a good, simple explanation, with simple examples, _without_ a bunch of joking around about it.

[@techskeletons7381]

Great Tutorial... also enjoyed your exceptional BLINKING skills!!!

[@dukewellington5222]

Crystal clear explanation as is the norm on this channel.

[@reignsvicky]

Tons of videos I've seen but your video Really simplified this❤️❤️❤️❤️👍

[@kasiabauer]

Thanks m8, just learning JS and this was very helpufl. Short to the point with good examples. Thank you!

[@adrianpabloalvarez2523]

Thank you, I was asking myself about arrow functions for a while :).

[@Koujujutsu]

Duuuuude! This was concise! Thank so much for posting this!

[@SoyDelSouth]

straight to the point with clear concise examples = new subscriber

[@bicobielich665]

Nice and simple non-convoluted explanation … Thanks

[@perfect.stealth]

"This" is very useful. Been coding JS for some time and never understood the real difference

[@brauliogarcia1836]

fantastic video. not everyone can explain things as he does!

[@Dragonyoshi013]

Fantastic explanation with great examples. Great work!

[@battlecrusecruse9155]

this video is pure gold someone give this guy a medal !!!

[@IanSebryk]

can't count how many bloody times i've watched other vids trying to explain this concept and walked away in a cloud of WTH. you cleared this up for me in a straightforward way. brilliant. thank you. i learned JS waaaay back and rarely used it until recently. this scoping confusion has haunted the hell out of me until today. you cannot know the relief, because now it jives with the other languages i use regularly.

[@WebDevSimplified]

That is awesome. I am really glad I was able to help.

[@josuebarros-desenvolvedorw2490]

Oh man! I was broking my head to learn that! Thank you very much!!!

[@fanxxai]

You explained it than many of the senior Coding KZbinrs.