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

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"
by ColorCode.io, Sina Jazayeri
Full playlist here: • 20 Things JavaScript D...
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:
github.com/ColorCode/js-10-th...
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

[@215Leon215]

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!

[@ColorCodeio]

Thank you. Made my day. New video dropping tomorrow.

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

[@ColorCodeio]

Thank you so much for your support Robert. Glad the video was helpful.

[@SagarKumar-db2xy]

I think this playlist is really underrated

[@techbro3085]

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.

[@ColorCodeio]

Thanks Tech Bro. I see your comments :) more videos coming very soon.

[@ColorCodeio]

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

[@freemanhubbard6234]

As soon as you sang "Say Hello" I immediately thought is this guy singing "The Nurse That Loved Me" by Failure and you were.

[@ColorCodeio]

@@freemanhubbard6234 No way!!!! haha that's awesome. I've only heard 'A Perfect Circle' version. Listening to Failure now.

[@mehdizahedi2810]

Hat off! crystal clear. I like particularly the last part on arrow function in the EventListener, fantastic explanation.. Thank you for sharing your knowledge.

[@whyyshivam]

Thanks Sina! This really helped a lot.

[@maannikita]

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

[@dansmar_2414]

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.

[@ColorCodeio]

Awesome! Thank you

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

[@ColorCodeio]

Thanks! :)

[@eumm11]

your videos are pure enlightenment, can't thank you enough

[@ColorCodeio]

Very nice of you. Thanks.

[@iambestin]

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

[@ColorCodeio]

👍🤘

[@ChandanNath-nt6yx]

Thank you sir, for describing the discrimination of arrow function.❤

[@tcopling]

This was 🔥, loved the way that you explained the 'this' behavior in arrow functions. Good job.

[@ColorCodeio]

🔥

[@minihowtos7682]

this was fun and really informative to watch thank you for this series i'm gonna consider watching the rest of it great great content

[@ColorCodeio]

🙏Thanks

[@orzohar3483]

Your happiness is reflected and makes everything extra fun to watch :) Great videos I would add the fact that You cannot bind this to arrow function and it will always be defined as the context in which it was defined.

[@ColorCodeio]

Thank you

[@sajjadhussain4250]

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 ❤

[@ColorCodeio]

You got it! 👍

[@sammac8706]

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 :)

[@ColorCodeio]

Great to hear!

[@tetianazhuchenko2182]

Thanks, your explanation is magnificent 👍👍👍

[@devesh21]

Great explanation Thank you for taking efforts making life much easier ☺️

[@ayushdixit8993]

Next Level Bro.

[@elijahtraumen8007]

Very good video in terms of code examples and explanation.

[@rimamousavi6734]

This video is incredibly awesome, is a master piece, full of information and deep points.😃 Thank you👍👍👍!

[@namankeshari7332]

You are the definition of coolness mann

[@user-wt9xo5ys1m]

I would like to thank you alot for your delivering your amazing understanding of the core topics in JavaScript, we are waiting for intermediate projects in JavaScript for Software developers.

[@ColorCodeio]

Thank you

[@alimansourey2076]

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

[@ColorCodeio]

Thanks!

[@nuranura3209]

hi sina thank you so much for the tutorial! it would help all of us a lot if you could leave some projects to do after we finish the whole course beacuse i am finding it difficult to find the use of some the things you teach, with that i tend to forget a lot of the things we learn.

[@reidv6220]

Thank you for creating this episode! Great content. As an Aspiring Web Developer at the age of 39, your explanations are clear and concise and easy for me to follow ! Subscribed. And followed on Twitter.💯👌

[@ColorCodeio]

Good for you for learning to program. Best of luck and contact me if you have questions.

[@reidv6220]

@@ColorCodeio thank you! It's been a decent journey so far (3.5 months). Just starting to get my feet wet with Javascript.

[@user-nl8wi2cg9x]

Great production.Wonderful explanation.

[@ColorCodeio]

Thank you!

[@strikerwow2011]

Congrats on the explanations! You the man!

[@ColorCodeio]

Thank you

[@dreamer4515]

This series is very helpful. Impressed by the production quality and your teaching style as well. 😉

[@ColorCodeio]

Thank you!

[@snehalagrawal1010]

You are a master man

[@ColorCodeio]

I appreciate that!

[@snehalagrawal1010]

@@ColorCodeio Waiting for the next video of 20 series, can you explain the basic one like call stack with hoisting and yeah expectng generator functions as well

[@levand2391]

I am absolute beginner, so little bit hard to understand but still the perfect talant of you teaching style, works for me. The melody is created by you on the go, I guess.

[@airixxxx]

Great video, the only things that I can think of missing are, hoisting and how e.target behaves on event listeners.

[@sourabhkulkarni1731]

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.

[@ColorCodeio]

Write some code and you’ll get it. I promise 👍

[@silent7152]

This is some top tier content

[@user-mw5bm2xh9x]

thanks for the tips.

[@WineMusicWith]

background music at 25:20 hits you like you don't feel you learning how to write and become a coder anymore you're learning how to create and become a creator.

[@ColorCodeio]

😎🫵

[@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) } }

[@ColorCodeio]

That's so funny you mention that because that's one the main reasons I used setTimeout and I totally forgot to make the point at the end. Thanks Ronald. Maybe you should be teaching these lol

[@rjerez]

@@ColorCodeio ha, I poses the knowledge but my delivery may not be as good as yours :)

[@raviraj-zm4zb]

Thank you so much to point out this missing point, i am new to javascript and i saw the same thing in debouncing program but unable to understand the real reason behind it. And yeah Thank you so much @ColorCode for creating these amazing content, this series is really helping me to learn javascript better.

[@KayhanEskanndari]

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

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

[@marinkiet2003]

I planned to watch for a few minutes,...30 min later 'still watching', I think I'll be here for a long time. ☺

[@ColorCodeio]

♥️

[@datsmydab-minecraft-and-mo5666]

Awesome Video! Would be great if after you finish your JavaScript series you do one one react

[@sarahtsoh862]

thank so much for the video, your video is even better than the paid one, you sort out a lot of my confusion

[@ColorCodeio]

That’s awesome to hear. Thank you.

[@chrisdietrich1533]

please keep making videos. They're great

[@ColorCodeio]

More coming soon

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

[@ColorCodeio]

I don’t know about a statue but thank you 😀And correct song! DM me on instagram for a ColorCode sticker

[@namankeshari7332]

Bro, this guy is really cool!

[@sirdragoon4625]

Just remember that this in arrow function take its context from the closest normal function , if it doesn't finds any normal function it will take window Object reference.

[@ashrodders]

thank you

[@genesipes8532]

Should have so many more views and likes. Thanks for the content.

[@ColorCodeio]

Thank you. Soon :)

[@brucegenerator2755]

the nurse who loved me by the band failure. later covered by APC. subscribed, great work!

[@ColorCodeio]

🎉

[@samuiljasinov8067]

Hi, ColorCode. Best video for JS that I‘ve seen. The Song you sang in 1:53. It‘s „The Nurse Who Loved Me“, right?

[@mirkosrndovic]

Thank you Sinaaaa!!!!

[@ColorCodeio]

You got it, Mirkooo!

[@asadmoosvi]

Great video! When can we expect the next video in the series to be released?

[@ColorCodeio]

Mid September

[@RoyalG254]

Your channel is top notch

[@ColorCodeio]

Ty!

[@martinn1071]

Great video as always! I've been watching your videos and finally decided to subscribe! BTW, what do you code on? How can you output js like that? I've never see this before

[@ColorCodeio]

Thanks for the sub. I'm just using Chrome DevTools.

[@martinn1071]

@@ColorCodeio looking good !! impressive. thanks for the answer !! you're a legend

[@nihalpanday7888]

sir i cant,t tell this videos are helping so much please can cover some more topics

[@santhoshk9285]

waiting for next video 🔥

[@ColorCodeio]

Already??? :)

[@santhoshk9285]

@@ColorCodeio I mean Higher order functions 😁

[@user-de4zh8qm4w]

Sir you are really a good teacher for me . I m hussnain from Pakistan . I just want to sa sir I love your way of teaching

[@muhmmdarsal]

The song: The nurse who loved me by Failure and covered by my fav band A Perfect Circle :)

[@rishayshandilya1817]

He is officially the most underrated youtuber in the coding community

[@soumyadipmajumder902]

Your JavaScript course is awesome, personally I develop myself more through your course. And the song is A-perfect-circle band editz. Though I don't know the song but the tone is similar, the song is so relaxing for mind.

[@ColorCodeio]

Glad you like the material 👍

[@soumyadipmajumder902]

@@ColorCodeio Please make a full course video on react js and react native

[@ranius7388]

what editor are you using? i tried both vscode and devtools console but all i get is "hello ${name}" can't print the input value .. thank you for this excellent tutorial.

[@nicolaiandersen6319]

Awesome video!

[@ColorCodeio]

Thanks!

[@unstopology]

Thanks for the video. I don't understand the hype with these 'new' arrow. It's almost the same amount of syntax. It makes it more complicated because depending on what you're doing the syntax changes.

[@ibrahimyoussef4489]

You are amazing , real amazing

[@ColorCodeio]

♥️

[@stephendelacruzone]

Bravo good sir!👏I understand 90% of it but 10%... I will rewatch this over and over in months after to re-hash, fully remember and fully understand the freakin' the dense concepts of gotchas in #ArrowFunctions. I fully understand what an "Arrow Function" is... it's that freakin' annoying THIS keyword! If I could bash THIS keyword with real-life Mallet... I would. The head-y concepts that I've learned from my first language Golang... kinda really helps me understand the dense wonky concepts of #Javascript Javascript is neat but... it's kinda weird with it's concepts, features and implementation. Sheesh!😅

[@user-de4zh8qm4w]

If you plz make a playlist on react js . It would be great for developers like us who are working in react js but actually do not know how it actually works underhood

[@konradkrasocki7720]

good stuff!

[@ColorCodeio]

Appreciate it!

[@NARAYANAREDDY-FEdev]

Very cool video! I love you content a lot ❤ you deserve more likes & views 😢 BTW song that you sung was from "The nurse who loved me"

[@ColorCodeio]

Glad you liked the video

[@harvard004]

20:51 So for my future reference: // Functions bind things to the global scope. // Objects do not bind things. Functions do. // "arrowtalk: this" in the example is an object property. therefore, bound to the global object. 'this' will point to the window. // When we invoked talk(), a Method(which is a function that's a property of an object), it looks for the calling object to the left of it, in this case, 'me' , and binds the value of the talk() code block to that calling object 'me' when using 'this'. Again this works because we are using a Method to bind things.

[@ultronsam1214]

Also, arrow functions shouldn't be used as direct methods inside an object.

[@mockawocka5568]

The song is by Failure. APC covered it.

[@ColorCodeio]

You win!

[@jatilyadav4000]

Helpful for me

[@ColorCodeio]

Great

[@buggycoder7900]

Do you have article for the topic which I can refer to, to solidify my understanding?

[@user-rn3rb6eg9v]

thank you so much

[@ColorCodeio]

You're welcome!

[@aylanelson1012]

Love the video, it is super helpful. could you maybe consider an episode on REGEX at somepoint? I realize it's pretty basic, but your teaching style is easier to follow than a textbook . specifically like .text() or . match() or. .replace().

[@ColorCodeio]

Good idea. It’ll be included in my JavaScript Mastery course.

[@SebastianZartner]

@ColorCode What you did at 7:50 _is_ a named arrow function. By that I mean you can access the name of the function via the `name` property. In your example, if you typed `sayHello.name`, you'd get `"sayHello"`.

[@ultronsam1214]

I think that's a function expression; a function assigned to a variable. A function expression can either be named or anonymous. Both are optional.

[@bj0rnen]

@@ultronsam1214the interpreter will make it a named function similar to how object property shorthand works

[@stephanembenga9324]

Hey colorcode. I got a question for yah. const animal = { name:"Lion", talk() { setTimeout(function(){ console.log(this); }, 5000); }, } animal.talk(); // outputs setTimeout function/object I tested this code out, and the value of this was the setTimeout function/object. Does this occur because a binding is created between the callback function passed to setTimeout and setTimeout itself right? Am I wording that the right way?

[@hiphop861]

Thank you

[@ColorCodeio]

Yw

[@Thrillseeker419]

You can do something like arguments with the spread operator (...n) => {n[0]}

[@ultronsam1214]

This is rest parameter tho. A spread operator used inside a function parameter which groups args into true array, right?

[@slaincore]

Instant like!

[@ColorCodeio]

Instant thanks

[@maciekdzikdrums]

king

[@producersunite7515]

I think you explain things clear but i wish you showed more examples . The funnest thing i have learned on my own was to simply use a call back function to keep jumping in and out of functions that perform tasks or calculations. I havent seen any really solid tutorials that break real working code down. So far from watching multiple videos of yours i understand me.talk . Build something more interesting with those same concepts add and explain some more techniques on top of them so we can say ahhh that's dope i could do all this cool shit now and get creative . Your dope otherwise though bro. Much respect

[@ColorCodeio]

Ahhhhh! I see what you mean. The biggest challenge is breaking down theory and show real examples while keeping videos short in time. With that said this one is 30 minutes so that's not a good excuse haha. Thanks for your comment. I'll keep that in mind for future.

[@bryanragin4162]

@@ColorCodeio I appreciate this video, because you explain things really clearly, and you dive in... I personally think this is what was needed to understand just that... Other videos that shows how to build specific things, doesn't explain theory... I think the 2 are very different, unless there is a theory in building complex things... I would love to hear that :)

[@hamzahnadeem6041]

will you make react tutorials in future?

[@ColorCodeio]

Yes

[@froggore52]

The Nurse Who Loved Me by Failure (A Perfect Circle made it famous with their cover)

[@annabrakowska9544]

Great episode! I couldn't figure out the song, but I want a gift for trying hard :P I wonder what's the reason that arrow functions don't have the arguments available?

[@ColorCodeio]

www.google.com/search?rls=en&q=the+nurse+who+loved+me&ie=UTF-8&oe=UTF-8

[@rjerez]

There are better ways to get the arguments list now using rest parameter. I think arguments was kept around for backwards compatibility, but arrow functions been new there’s no reason to have it be backwards compatible. This will push people to use the new ways instead.

[@ColorCodeio]

@@rjerez I need to consult with you when writing for these episodes :)

[@yarinvanzikri]

the song is The nurse who loved me - A Perfect Circle or by Failure :) no gift needed

[@ColorCodeio]

That is correct :)

[@AlexCernat]

actually, using arrow functions as event listeners is ok, as long as you don't use this anymore, but event.target (with event as arrow function argument)

[@alexvass]

Thanks

[@alexvass]

learned something about this I did not know and great ambient sounds in the background

[@ColorCodeio]

I'm glad!

[@Salah-YT]

thx for the nice video bro but please VS code as well I get confused bro thx

[@ColorCodeio]

What exactly about VS code is confusing for you? Plug-ins? Setup? Something else?

[@Salah-YT]

@@ColorCodeio no bro I mean can u code on VS code then output them to dev toll it,s much better for me and people so I don't know what I say bro I believe one day JS will kill me bro I got so much confuse bro it is about a years now I have a lot of course on Udemy and I did watch a million video on YT so even I don't have my won portfolio even I cant solve one simple problem on CodWAR website I must always follow the video so now I read a book I download about 5 best book I like only one of them I'm on half way now it is about 490 page it is name ( JavaScriptNotesForProfessionals) and I don't know what to do bro I understand when I read or when I watch but after that I cant do anything even I cant make 2 line of simple project so what is wrong with me bro the problem is I don't care about looking for job I'm at home 24/7 so but I just really love to make website and app so any advise bro I think I have nearly 10 best JS course on Udemy they are TOP course and maybe 5 full stack course but I only focus on HTML and CSS and JS so now i js work with js i ignore HTML and CSS I'm not bad with them yes bro that is my problem that is why i say code on VS code better for understanding thx bro

[@soniablanche5672]

I disagree with the last point, you can always get the clicked element with the Event object you get as the first argument of the callback

[@alexfaucheux6138]

How do you execute JS on demand like that? I know python has something similar, but did not know you could do the same with JS

[@ColorCodeio]

Chrome DevTools

[@ataurahmandaudzai8198]

proud of me Thanks

[@Mohib3]

Got a bit confused with your wording. So should we not use arrow functions inside a method. For example, const me = {name: "cat", talk(): setTimeout(()=> {console.log(this.name)})

[@usernameiphone3gkid]

How do you get the horizontal lines that divide the code?

[@ColorCodeio]

It's not a code editor. These are animations I make manually.

[@usernameiphone3gkid]

Oh nice!

[@ayushjain7023]

Best

[@BabaLift-or8ks]

in the video @1:24 you say "here is a constructor "function Personon(n) {this.name=n} " ....I thought the method constructor should always be called "constructor".....

[@TheAmanpro]

It's been a month since you last uploaded, I hope you are fine, waiting for new video this series

[@ColorCodeio]

Next video coming this week :)

[@Justnadeem]

Y u r so cool man

[@abhishekpoloju2794]

const me={ name:"Abhishek", thisname:this } why does this representing window object here As it should represent me object

[@serapheogen]

2:00 Pet - A Perfect Circle?

[@serapheogen]

The Nurse Who Loved Me* Where's my gift?