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

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

[@ColorCode-io]

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

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

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

[@ColorCode-io]

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

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

[@ColorCode-io]

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

[@pokerchannel6991]

oh? you like this better than socratica of python? Yeah, I think both are reall good for each of their respective language.

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

[@ColorCode-io]

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

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

[@ColorCode-io]

Thanks! :)

[@KayhanEskanndari]

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

[@SagarKumar-db2xy]

I think this playlist is really underrated

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

[@ColorCode-io]

Awesome! Thank you

[@pokerchannel6991]

this is excellent. No no. I don't mean this, the keyword. I mean this, the person talking. that is excellent.

[@ColorCode-io]

Thank you!

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

[@ColorCode-io]

Great to hear!

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

[@ColorCode-io]

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]

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

[@louielixx]

Someone beat me to it already, but the song is "The nurse who loved me" by A Perfect Circle !

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

[@ColorCode-io]

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

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

[@ColorCode-io]

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

[@alimansourey2076]

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

[@ColorCode-io]

Thanks!

[@NachoDev369]

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

[@ColorCode-io]

You're welcome!

[@iambestin]

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

[@ColorCode-io]

👍🤘

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

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

[@ColorCode-io]

You got it! 👍

[@lifelens-n2r]

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

[@rishayshandilya1817]

He is officially the most underrated youtuber in the coding community

[@brucegenerator2755]

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

[@ColorCode-io]

🎉

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

[@eumm11]

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

[@ColorCode-io]

Very nice of you. Thanks.

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

[@ColorCode-io]

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

[@reidv6220]

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

[@namankeshari7332]

You are the definition of coolness mann

[@dreamer4515]

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

[@ColorCode-io]

Thank you!

[@genshian]

Lol. I stumbled upon "this" errors while trying to create some factories and was sooo confused why. Crazy how no one talks about arrow function scopes vs how functions a scoped. Im a year into programming and someone finally explained it to me XD.

[@oigresrol]

Here learning arrow function and english too, excellent video! thanks man.

[@ColorCode-io]

Lovely!

[@tcopling]

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

[@ColorCode-io]

🔥

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

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

[@marinkiet2003]

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

[@ColorCode-io]

♥️

[@snehalagrawal1010]

You are a master man

[@ColorCode-io]

I appreciate that!

[@snehalagrawal1010]

@@ColorCode-io 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

[@ChandanNath-nt6yx]

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

[@muhmmdarsal]

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

[@airixxxx]

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

[@genesipes8532]

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

[@ColorCode-io]

Thank you. Soon :)

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

[@مصطفىالربيعي-ت8غ]

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.

[@ColorCode-io]

Thank you

[@silent7152]

This is some top tier content

[@NinjaJutsu-y4d]

Great production.Wonderful explanation.

[@ColorCode-io]

Thank you!

[@RoyalG254]

Your channel is top notch

[@ColorCode-io]

Ty!

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

[@ColorCode-io]

Glad you like the material 👍

[@soumyadipmajumder902]

@@ColorCode-io Please make a full course video on react js and react native

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

[@ColorCode-io]

😎🫵

[@randymartin9040]

Love this series, I have a hard time following though around 4:00, you're deleting stuff, clearing screen, copy pasting, then deleting it all again very quickly. Just wanted to bring it to your attention, as this is a pretty important lesson and it's hard to follow along with that. Thank you! Blessings!

[@randymartin9040]

edit: I just realized I had you at 1.25x speed, but nonetheless I suggested it in case you wanted to give it a second look and edit anything ( I don't know how youtube works with changing any parts of videos). I have to say I love your style of teaching, and your candor etc. I think you would do well to make a course or something. Just an idea!

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

[@ColorCode-io]

🙏Thanks

[@sarahtsoh862]

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

[@ColorCode-io]

That’s awesome to hear. Thank you.

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

[@ColorCode-io]

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

[@martinn1071]

@@ColorCode-io looking good !! impressive. thanks for the answer !! you're a legend

[@strikerwow2011]

Congrats on the explanations! You the man!

[@ColorCode-io]

Thank you

[@HussnainMuhammad-y9b]

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

[@rimamousavi6734]

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

[@elijahtraumen8007]

Very good video in terms of code examples and explanation.

[@ayushdixit8993]

Next Level Bro.

[@buggycoder7900]

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

[@chrisdietrich1533]

please keep making videos. They're great

[@ColorCode-io]

More coming soon

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

[@nihalpanday7888]

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

[@namankeshari7332]

Bro, this guy is really cool!

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

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

[@whyyshivam]

Thanks Sina! This really helped a lot.

[@mockawocka5568]

The song is by Failure. APC covered it.

[@ColorCode-io]

You win!

[@Shashank_Goel]

at 7:27 if we type sayHello=()=>{ console.log("Hello") } sayHello() now doesn't it become that we have a named arrow function ?

[@stephenkrus]

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

[@asadmoosvi]

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

[@ColorCode-io]

Mid September

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

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

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

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

[@gatorgrad]

thanks for the tips.

[@EliasVargas-v7e]

3:26 what did they say??? I need to know

[@datsmydab-minecraft-and-mo5666]

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

[@tetianazhuchenko2182]

Thanks, your explanation is magnificent 👍👍👍

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

[@ColorCode-io]

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]

@@ColorCode-io 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?

[@ColorCode-io]

Yes

[@HussnainMuhammad-y9b]

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

[@devesh21]

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

[@cezartorescu]

Why did you said not o use setTimeout ? If it is that bad why does it exist ?

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

[@yarinvanzikri]

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

[@ColorCode-io]

That is correct :)

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

[@ColorCode-io]

Chrome DevTools

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

[@santhoshk9285]

waiting for next video 🔥

[@ColorCode-io]

Already??? :)

[@santhoshk9285]

@@ColorCode-io I mean Higher order functions 😁

[@AhmedAli-jx9ie]

why music in video

[@mirkosrndovic]

Thank you Sinaaaa!!!!

[@ColorCode-io]

You got it, Mirkooo!

[@ibrahim_youssef_13.12]

You are amazing , real amazing

[@ColorCode-io]

♥️

[@pokerchannel6991]

oh. I see. But, even without using New, and without using the anonymous function as a constructor, you can still functionally inherit from it with just not using the word new. 9:00

[@usernameiphone3gkid]

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

[@ColorCode-io]

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

[@usernameiphone3gkid]

Oh nice!

[@UnifiedFriends]

So, in short. If the target is this, the arrow will miss. If the surrounding or context pointer will fit, it's a hit?!

[@ColorCode-io]

You should be writing for ColorCode :)

[@UnifiedFriends]

@@ColorCode-io lol, with pleasure. 😆 But your writing/teaching style, is already great.

[@jatilyadav4000]

Helpful for me

[@ColorCode-io]

Great

[@saschaschneider9157]

Get rid of both the parentheses and the curly brackets doesn't realy appeal to me. It makes the code difficult to read for me actually. I have to be aware that the variable before the arrow is part of the function signature. This is kind of a mind stunt for me and brakes my readflow. BTW: That song is The nurse who loved me by A Perfect Circle

[@ColorCode-io]

I understand the mind stunt and I don't disagree, it took me a long time to get used to 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"

[@ColorCode-io]

Glad you liked the video

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

[@Salah-YT]

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

[@ColorCode-io]

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

[@Salah-YT]

@@ColorCode-io 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

[@hiphop861]

Thank you

[@ColorCode-io]

Yw

[@niiicolai]

Awesome video!

[@ColorCode-io]

Thanks!

[@slaincore]

Instant like!

[@ColorCode-io]

Instant thanks

[@정재희-i1b]

thank you so much

[@ColorCode-io]

You're welcome!

[@froggore52]

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