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!
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.
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.
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! 💻🎉
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!
بهترین و کامل ترین چیزی که دیدم کیفیت و وضوح ویدیو بگیر تا کیفیت صدا و قدرت کلام و تسلط استاد واقعا تحسین برانگیزه. به نظرم در آینده نه چندان دوری شاهد صد هزار تایی شدن این چنل خواهیم بود.
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
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.
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.
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 ❤
Hat off! crystal clear. I like particularly the last part on arrow function in the EventListener, fantastic explanation.. Thank you for sharing your knowledge.
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.
@@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
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.💯👌
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.
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.
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.
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.
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!
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!
@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.
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.
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.
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.
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 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"`.
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!😅
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
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?
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.
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".....
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
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.
7:44 This is incorrect. Arrow functions assigned to a variable are named functions with the name being the same as the variable name. This is similar to how the object property shorthand works. The interpreter will name the function after the variable.
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.
@@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 :)
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)})
Get rid of both the parentheses and the curly brackets doesn't really 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
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)
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.
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.
oh? you like this better than socratica of python? Yeah, I think both are reall good for each of their respective language.
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.
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.
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! :)
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
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!
I think this playlist is really underrated
بهترین و کامل ترین چیزی که دیدم
کیفیت و وضوح ویدیو بگیر تا کیفیت صدا و قدرت کلام و تسلط استاد واقعا تحسین برانگیزه. به نظرم در آینده نه چندان دوری شاهد صد هزار تایی شدن این چنل خواهیم بود.
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
@@ColorCode-io 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.
Best series I have watched for JS concepts. I donno why I never got this channel as recommendation.
Subscribed!
👍🤘
Forgot to say that you are the best when it comes to teaching js on youtube ... keep it up .
Thanks!
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
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 👍
Spot on explanation. I now finally understand how this works anywhere. Thank a bunch.
You're welcome!
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.
This series is very helpful. Impressed by the production quality and your teaching style as well. 😉
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.
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.
You are a master man
I appreciate that!
@@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
the nurse who loved me by the band failure. later covered by APC. subscribed, great work!
🎉
This was 🔥, loved the way that you explained the 'this' behavior in arrow functions. Good job.
🔥
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.
@@ColorCode-io thank you! It's been a decent journey so far (3.5 months). Just starting to get my feet wet with Javascript.
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.
😎🫵
Here learning arrow function and english too, excellent video! thanks man.
Lovely!
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.
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
Great production.Wonderful explanation.
Thank you!
You are the definition of coolness mann
this is excellent. No no. I don't mean this, the keyword. I mean this, the person talking. that is excellent.
Thank you!
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
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.
Should have so many more views and likes. Thanks for the content.
Thank you. Soon :)
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
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!
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!
Thank you sir, for describing the discrimination of arrow function.❤
Someone beat me to it already, but the song is "The nurse who loved me" by A Perfect Circle !
I planned to watch for a few minutes,...30 min later 'still watching', I think I'll be here for a long time. ☺
♥️
@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.
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.
He is officially the most underrated youtuber in the coding community
Great video, the only things that I can think of missing are, hoisting and how e.target behaves on event listeners.
Very good video in terms of code examples and explanation.
Congrats on the explanations! You the man!
Thank you
This video is incredibly awesome, is a master piece, full of information and deep points.😃 Thank you👍👍👍!
Your channel is top notch
Ty!
This is some top tier content
Thanks
learned something about this I did not know and great ambient sounds in the background
I'm glad!
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 👍
@@ColorCode-io Please make a full course video on react js and react native
The song: The nurse who loved me by Failure and covered by my fav band A Perfect Circle :)
at 7:27
if we type
sayHello=()=>{
console.log("Hello")
}
sayHello()
now doesn't it become that we have a named arrow function ?
Thanks Sina! This really helped a lot.
Bro, this guy is really cool!
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
please keep making videos. They're great
More coming soon
Great explanation
Thank you for taking efforts making life much easier ☺️
sir i cant,t tell this videos are helping so much please can cover some more topics
Thanks, your explanation is magnificent 👍👍👍
Next Level Bro.
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.
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.
@@ColorCode-io looking good !! impressive. thanks for the answer !! you're a legend
@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
The song is by Failure. APC covered it.
You win!
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!😅
Awesome Video! Would be great if after you finish your JavaScript series you do one one react
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
Do you have article for the topic which I can refer to, to solidify my understanding?
Great video! When can we expect the next video in the series to be released?
Mid September
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
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?
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.
3:26 what did they say??? I need to know
thanks for the tips.
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".....
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
You are amazing , real amazing
♥️
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.
waiting for next video 🔥
Already??? :)
@@ColorCode-io I mean Higher order functions 😁
Thank you Sinaaaa!!!!
You got it, Mirkooo!
Awesome video!
Thanks!
7:44 This is incorrect. Arrow functions assigned to a variable are named functions with the name being the same as the variable name. This is similar to how the object property shorthand works. The interpreter will name the function after the variable.
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.
@@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 :)
Instant like!
Instant thanks
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)})
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?
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
the song is The nurse who loved me - A Perfect Circle or by Failure :) no gift needed
That is correct :)
why music in video
Why did you said not o use setTimeout ? If it is that bad why does it exist ?
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
good stuff!
Appreciate it!
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!
Get rid of both the parentheses and the curly brackets doesn't really 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
I understand the mind stunt and I don't disagree, it took me a long time to get used to it.
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 :)
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)
The Nurse Who Loved Me by Failure (A Perfect Circle made it famous with their cover)
So, in short.
If the target is this, the arrow will miss.
If the surrounding or context pointer will fit, it's a hit?!
You should be writing for ColorCode :)
@@ColorCode-io lol, with pleasure. 😆
But your writing/teaching style, is already great.