ฝัง
- เผยแพร่เมื่อ 23 ก.ค. 2024
- 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
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!
Thank you. Made my day. New video dropping tomorrow.
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! 💻🎉
As soon as you sang "Say Hello" I immediately thought is this guy singing "The Nurse That Loved Me" by Failure and you were.
@@freemanhubbard6234 No way!!!! haha that's awesome. I've only heard 'A Perfect Circle' version. Listening to Failure now.
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.
Thank you so much for your support Robert. Glad the video was helpful.
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.
Thanks Tech Bro. I see your comments :) more videos coming very soon.
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.
Awesome! Thank you
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!
Thanks! :)
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.
Thank you
Hat off! crystal clear. I like particularly the last part on arrow function in the EventListener, fantastic explanation.. Thank you for sharing your knowledge.
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 ❤
You got it! 👍
your videos are pure enlightenment, can't thank you enough
Very nice of you. Thanks.
Best series I have watched for JS concepts. I donno why I never got this channel as recommendation.
Subscribed!
👍🤘
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 :)
Great to hear!
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
🙏Thanks
This was 🔥, loved the way that you explained the 'this' behavior in arrow functions. Good job.
🔥
I really love the way you teach. please create a full tutorial on JavaScript.
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.
Write some code and you’ll get it. I promise 👍
Forgot to say that you are the best when it comes to teaching js on youtube ... keep it up .
Thanks!
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.💯👌
Good for you for learning to program. Best of luck and contact me if you have questions.
@@ColorCodeio thank you! It's been a decent journey so far (3.5 months). Just starting to get my feet wet with Javascript.
Thanks Sina! This really helped a lot.
Here learning arrow function and english too, excellent video! thanks man.
Lovely!
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.
Thank you
Great explanation
Thank you for taking efforts making life much easier ☺️
Very good video in terms of code examples and explanation.
This series is very helpful. Impressed by the production quality and your teaching style as well. 😉
Thank you!
Thanks, your explanation is magnificent 👍👍👍
This video is incredibly awesome, is a master piece, full of information and deep points.😃 Thank you👍👍👍!
Congrats on the explanations! You the man!
Thank you
Next Level Bro.
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)
}
}
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
@@ColorCodeio ha, I poses the knowledge but my delivery may not be as good as yours :)
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.
You are a master man
I appreciate that!
@@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
thank so much for the video, your video is even better than the paid one, you sort out a lot of my confusion
That’s awesome to hear. Thank you.
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.
Thank you sir, for describing the discrimination of arrow function.❤
You are the definition of coolness mann
Great production.Wonderful explanation.
Thank you!
This is some top tier content
thanks for the tips.
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.
please keep making videos. They're great
More coming soon
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!!!
I don’t know about a statue but thank you 😀And correct song! DM me on instagram for a ColorCode sticker
بهترین و کامل ترین چیزی که دیدم
کیفیت و وضوح ویدیو بگیر تا کیفیت صدا و قدرت کلام و تسلط استاد واقعا تحسین برانگیزه. به نظرم در آینده نه چندان دوری شاهد صد هزار تایی شدن این چنل خواهیم بود.
Should have so many more views and likes. Thanks for the content.
Thank you. Soon :)
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.
😎🫵
Your channel is top notch
Ty!
Bro, this guy is really cool!
the nurse who loved me by the band failure. later covered by APC. subscribed, great work!
🎉
Thank you Sinaaaa!!!!
You got it, Mirkooo!
Awesome Video! Would be great if after you finish your JavaScript series you do one one react
Great video, the only things that I can think of missing are, hoisting and how e.target behaves on event listeners.
You are amazing , real amazing
♥️
waiting for next video 🔥
Already??? :)
@@ColorCodeio I mean Higher order functions 😁
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
Thanks for the sub. I'm just using Chrome DevTools.
@@ColorCodeio looking good !! impressive. thanks for the answer !! you're a legend
Great video! When can we expect the next video in the series to be released?
Mid September
Awesome video!
Thanks!
good stuff!
Appreciate it!
Instant like!
Instant thanks
Helpful for me
Great
thank you so much
You're welcome!
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.
Glad you like the material 👍
@@ColorCodeio Please make a full course video on react js and react native
sir i cant,t tell this videos are helping so much please can cover some more topics
Thank you
Yw
I planned to watch for a few minutes,...30 min later 'still watching', I think I'll be here for a long time. ☺
♥️
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?
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"
Glad you liked the video
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.
thank you
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
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!😅
Do you have article for the topic which I can refer to, to solidify my understanding?
He is officially the most underrated youtuber in the coding community
king
@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.
The song: The nurse who loved me by Failure and covered by my fav band A Perfect Circle :)
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().
Good idea. It’ll be included in my JavaScript Mastery course.
Thanks
learned something about this I did not know and great ambient sounds in the background
I'm glad!
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.
The song is by Failure. APC covered it.
You win!
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.
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.
Also, arrow functions shouldn't be used as direct methods inside an object.
@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"`.
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.
@@ultronsam1214the interpreter will make it a named function similar to how object property shorthand works
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?
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
will you make react tutorials in future?
Yes
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
Chrome DevTools
proud of me Thanks
Very good, thank you
Best
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?
www.google.com/search?rls=en&q=the+nurse+who+loved+me&ie=UTF-8&oe=UTF-8
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.
@@rjerez I need to consult with you when writing for these episodes :)
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
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.
@@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 :)
I think this playlist is really underrated
How do you get the horizontal lines that divide the code?
It's not a code editor. These are animations I make manually.
Oh nice!
Y u r so cool man
It's been a month since you last uploaded, I hope you are fine, waiting for new video this series
Next video coming this week :)
You can do something like arguments with the spread operator (...n) => {n[0]}
This is rest parameter tho. A spread operator used inside a function parameter which groups args into true array, right?
The Nurse Who Loved Me by Failure (A Perfect Circle made it famous with their cover)
the song is The nurse who loved me - A Perfect Circle or by Failure :) no gift needed
That is correct :)
You sound similar to Ray Ramano from Everybody Loves Raymond! Now I have to sub!
hah I'll take it
thx for the nice video bro but please VS code as well I get confused bro thx
What exactly about VS code is confusing for you? Plug-ins? Setup? Something else?
@@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
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
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)
Song - The nurse who loved me ( waiting for the gift 😂😂 )
Instagram DM me your address. I'll send you a couple of ColorCode stickers.
@@ColorCodeio sure thanks 😊