Arrow Functions JavaScript Tutorial - What NOT to do!!!

The JavaScript Tool I'm using to demonstrate:

ColorCode Etsy Merchandise store:

What are arrow functions in JavaScript?
How do you write them?
When should you use them?
When should you NOT use them?
How do they affect this binding?

I answer ALL the questions above in this video.

JavaScript Arrow Functions from the series "10 Things JS Developers Should Know"

This is episode 7 in a 10 part series I’m calling 10 things javascript developers should know but probably don’t. In this series, we’re gonna cover some of the most fundamental and important parts of JavaScript that most of us don’t actually know, and barely touch. Today, for episode 7, we’re gonna explore Arrow Functions, why are they useful, when should you use them, when should not use them, how do they affect this and scope, how do they change the binding of this, and so much more! Let’s go!

All the code from this series is available here:

0:00:00 Intro
0:00:49 Different function types
0:01:49 Ananymous Function to Arrow Function
0:05:34 Callback Function to Arrow Function
0:06:42 Named Function to Arrow Function
0:09:11 Object Method to Arrow Function
0:10:25 The benefits
0:10:54 The benefits - How they look
0:12:56 The benefits - Binding with THIS
0:16:33 When NOT to use Arrow Functions
0:30:28 - Wrap up

[Leon]

Been teaching myself JS for little over half a year ago and almost jumped straight into react.. Realized that I lacked the fundamentals and just got back into understanding the core of JS and man I can't tell you how helpful these videos are! So clean, so simple so perfekt! Thanks you!

[ValensIradukunda-jyjf]

I really appreciate your hard work Sir. I have never ever met teacher like you. Im 18 yrs from Rwanda 🇷🇼, in my journey of self teaching js, I can say they would be perfect if i always tage you as a backer of my journey long way. ❤❤❤❤ Much love:)

[robertholtz]

Best explanation of the pros and cons of arrow functions I’ve ever seen. Top quality production in every single sense. Thank you for your excellent work.

[techbro]

Love to watch this series as JS developer.
No idea, how other average/dummy teaching channels are getting more views and subscribers than this channel. please continue the series sir. your subscribers know the value of your teaching.

[ColorCode-io]

Arrow Functions JavaScript Tutorial - When to use them and when NOT to use them. Episode 7 of "10 Things JS Developers Should Know But Probably Don't". Enjoy! 💻🎉

[SagarKumar-dbxy]

I think this playlist is really underrated

[webcoderltd]

The song is: The nurse who loved me - A Perfect Circle

Finally I've found the best video that explains really well arrow functions! I also really like you use proper terminology to describe things in JS (higher order functions, surrounding scope AKA lexical scope?) + backticks use in the right situation instead of writing code "the old way" as many do!

[KayhanEskanndari]

بهترین و کامل ترین چیزی که دیدم
کیفیت و وضوح ویدیو بگیر تا کیفیت صدا و قدرت کلام و تسلط استاد واقعا تحسین برانگیزه. به نظرم در آینده نه چندان دوری شاهد صد هزار تایی شدن این چنل خواهیم بود.

[sammac]

OMG man I just love you, Thanks I have been JS developer for last 5 years and me myself didn't know this and arrow function this deeply :)

[dansmar_]

Thank you so much for creating this series. The way you communicate and share is very nice. You make things seems more easy to grasp.

[itsanuragjoshi]

@ColorCode Do you agree?
setTimeout is not a higher-order function as it doesn't return a function itself. It's a regular function that schedules the execution of another function (the callback) after a specified delay.
Higher-order functions, on the other hand, either accept functions as arguments or return functions as their result, or both. For example, map, filter, and reduce are higher-order functions because they accept functions as arguments and return transformed data or aggregated results.

[lifelens-nr]

I really love the way you teach. please create a full tutorial on JavaScript.

[rjerez]

Great episode. When you mentioned about the gotcha I was like I hope he goes into why that is the case, and why it’s done that way. I think you covered it but missed one important example. It was done to fix a very common problem with callbacks. Way back before arrow functions people had to write their methods by reassigning the value of this to something like “var self = this” outside of the higher order function so they can keep the binding they wanted. Arrow functions removed the need to do that.

So your example at 21:40 would have been:
talk() {
var self = this // const was not a thing yet
setTimeout(function () {
console.log(self.name)
}
}

[xurshidalimmamadov]

The video is extremely informative, and you did your best, way more better than others. I have already watched the video twice and gonnewatch it 2 or 3 more times to get the point.

[iambestin]

Best series I have watched for JS concepts. I donno why I never got this channel as recommendation.
Subscribed!

[vagedis]

Your content is absolutely awesome. You deserve a JavaScript statue.
Last but not least: The Nurse Who Loved Me
Thank you so much for sharing this!!!

[alimansourey]

Forgot to say that you are the best when it comes to teaching js on youtube ... keep it up .

[sajjadhussain]

Man, you just blow my mind! I have clear all of my doubts in JS. I will be very greatful, please continue making this types of tutorials. Best Wishes for you man ❤

[sourabhkulkarni]

This is my third time watch. I can say that I have understood "THIS" in arrow functions 90%. For the rest 10%, I need to code it myself to fully understand it. Thank you very much Mr. Sina for making such an important content.

[NachoDev]

Spot on explanation. I now finally understand how this works anywhere. Thank a bunch.