@@BM4Dayz69I know I'm replying late but for anyone else confused- I believe he was pointing out that functions and methods are different and when calling a function (even within a method of a class) it will not work to refer to object variables (e.g. this.name) because the function acts as a completely separate block of code than the class and you must either provide the function the variables you're referring to via parameters OR you must be using global variables. Class variables are usable only within a class I think. Whereas if you use => notation then it stays within the class and thus you may use those local class variables.
I find still hard to grasp this "this" because of this so much "this" in this guy's speech. Hard to keep track of this. Yet, not this Bob's fault, he does the best to explain this "this".
Glad I stuck around for the climactic ending where he explains that arrow functions aren't just syntactic sugar but a fix for the scoping issues with regular functions.
I appreciate that you have your words together ahead of time and can demonstrate while speaking. I get so frustrated at the content providers that sound like they didn't bother rehearsing and doing multiple takes until the script flows naturally, clearly, and concisely. Thank you!
Kyle, you seriously have a gift for teaching. Everything is so concise and well explained. It's very evident you take a lot of care in planning out your lesson plan. Having been a dev for over 20 yrs and consuming tons of material, you're my go to person when I need to learn or review something. Thanks so much!
Dude, I have to admit, this is the first and ONLY video that has helped me understand arrow functions. I've never understood WHY I wrote it the way I did... and you simplified it beautifully. The fact you said "Well, because it's this... you can delete this..." and "And because this... you can get rid of that" was so much easier than people saying stuff like "Okay, just do it like this" Okay, but WHY? So thank you, so much for doing this video.
I was learning React, then confused about the this keyword; I read the MDN Documentation, then w3 schools, stack overflow and everywhere but this video was where I was enlightened. Thanks Kyle, you're awesome.
Read Mozilla JavaScript documentation. Yes, Mozilla browser now fails to provide compliance at the level of Chromium, but its documentation is very good.
This channel is seriously overrated. So much of a failure to get into the essence of things and to promote good practices. People, don't waste time on it, read original documentation and use your own head.
@@Micro-Moo hey bro.. Didn't u attend any classes or any videos regarding web ?...one thing I wish to tell that if someone helps to understand any concept it makes us to Learn quicker.this is smart work... I accept your words but we can't follow this in every time... If we get some knowledge on any concept .we can easily dig the documentation.
Subscribed, I've been trying to wrap my head around arrow functions and your the first person who has explained it clearly. The examples were really helpful, thank you. I'm going to check out your other videos.
@@AlThePal78 No way. Const is nothing but const. Moreover, it is a constant declaration only for a variable, not for the properties of an object this variable refers to.
Oh man… the variety of examples, the pace, the clarity… It gives me so much pleasure to finally understand certain concepts in such an easy way. Thanks!
Arrow functions..."fixing" something that wasn't broken, while making code harder to learn and read. Edit: Good job on the video despite my adverseness :)
Your content is amazing. I am always trying to make my learning more efficient, and I always come to your channel for clear, well taught lessons. They always make sense to me right off of the bat. You're doing great dude!
Kyle @Web Dev Simplified -- Thank you so much for your excellent presentation on understanding the syntax of arrow functions vs. traditionally written functions, and the reasons why, beyond cleaner looking code, they should be used! Your explanation of "this" in the old way of writing functions vs using arrow functions answered that.
Great video, you really explain arrow functions well. I agree that the "this" scoping is the best reason to use arrow functions. I don't agree with making your code more concise as it frankly makes the code harder to understand for novices and lazy developers. From what I've seen, working in medium to large companies, most developers are lazy and don't want to learn new things. To avoid people constantly asking me how my code works because they don't understand it, I've opted to make my code as readable as possible. I add comments wherever there is conditional logic and I always add method/function comments (JavaDoc style). I won't make my code as verbose as possible, but I'll avoid one-liners when a couple extra lines containing curly-braces and return statements will help someone else understand the code better. In the end, code that is going to be maintained by multiple people, should be written with readability in mind. If you're working with code which is negatively affected by nano-second delays introduced by not 100% optimized code, then don't let shitty developers touch that code :p But this it about JavaScript, and I've never seen a scenario where JavaScript code is used where such optimization is needed.
I like how you explain arrow functions in a simple way, always return to this video whenever I want to refresh arrow function and the 'this' binding concepts.
can't count how many bloody times i've watched other vids trying to explain this concept and walked away in a cloud of WTH. you cleared this up for me in a straightforward way. brilliant. thank you. i learned JS waaaay back and rarely used it until recently. this scoping confusion has haunted the hell out of me until today. you cannot know the relief, because now it jives with the other languages i use regularly.
I was watching some tutorials about javascript then i keep seeing this arrow function(which is i don’t know what it’s called) used by the dev. I was curious about it but I didn’t search or type anything about it. After watching I took a break left my mobile in my bed when I came back open youtube app then this video recommended. TH-cam algorithms are awesome. Sorry for my bad english btw. Not my native language 😊
Really appreciate your efforts Kyle. Some points I wanted to make- 'this' is defined where function is called, and so the place where function is called i.e. person.printFunction(), 'this' must be pointing to person object as it's invoked with person.printFunction(), it's not pointing to global object. The fact that inside setTimeout another anonymous function is defined which takes us to concept of closure and it is a known behavior in javascript that 'this' inside closure points to global(many say its a bug in language but that's how language designer chose it to be). We get a workaround for it where we take another reference like: var self = this, and use 'self' everywhere instead of 'this'. Hopefully, they corrected this behavior in arrow function which was always desired. So the point which I want to make is - 'this' inside printFunction() is still pointing to person object(because function was invoked with person.), but 'this' inside anonymous function(closure) of setTimeout is pointing to global object which was a known behavior in javascript.
I'm glad you said this. I've been trying to understand the differences with 'this' in the different functions and people saying 'this' is defined where you call the function from just doesn't appear to be true. If he used a console.log(this) in his person.printFunction() function then it would print the person object, not the global window object.
I've been doing various tutorials on web design for three months now and didn't fully understand arrow functions till now, thank you so much!!! I will be checking out more videos of yours
@@mohammedalmukhtar8949 the exam was all about JSON manipulation. Really had a hard time I was doing the exam for about 6 hours. Some mobile responsive designs as well was asked. all should be in plain javascript no frameworks.
The portion of the video where you speak about the different usage of this in arrow syntax versus what was standard function syntax was worth its weight in gold. I wrote it in my notes twice. Thank you so much.
I am in a bootcamp and this topic has been kicking my butt thank you SO MUCH for making this make sense. Wow. This has been stopping me getting my homework done.
The rules of JavaScript Automatic Semicolon Insertion: flaviocopes.com/javascript-automatic-semicolon-insertion/#the-rules-of-javascript-automatic-semicolon-insertion has examples of what can go wrong when you forget to put a semicolon, too.
You should also add to the description of the video "How to understand "this"" because I've looked for so many videos explaining and finally I get it xD
Thank you very much for this amazing tutorial. You're really good at explaining stuffs. Great job! I just want to let you know you forgot the parenthesis in "random()" in the third function, otherwise it won't return a number between 0 and 1
You earned a subscribe from this video. Great explanation. As a programmer from a past life who has been getting back into JavaScript for fun, I never understood what the arrow function was used for, until now. Thank you!
ah....this finally makes sense to me...(coming from another language and recently learning JS I couldn't understand why my method similar to 2 didn't work. Cheers.
Another difference is that functions obey to hoisting, when arrow functions do not : This works : console.log(triple(10)); function triple(x) { return 3*x } This doesn't : console.log(triple(10)) let triple = x=>3*x;
@@dreamyrhodes From what I understand, function declarations get hoisted but function expressions do not. Also "let" does not get hoisted I believe, so it creates an initialization error. If it was "var" you still get an error (a different one) since function expressions do not get hoisted. That's what I think, but please let me know if I forgot something or if I'm wrong.
Second one is a function expression right? So even if you don’t use arrow function you still wouldn’t be able to log the second one. Let keyword would give you “triple is not defined” error, while var would give you undefined.
But that is a feature of anonymous functions. Hoisting is a strange, irrelevant term. Let fn = function(x) { return x * 3; } // notice the semicolon, required by any good lint rule
As someone who learned other languages first it was much harder to envision how regular functions work than how arrow functions work, which would have been what I would have expected from regular functions.
Thank you. I've been a programmer for a while now, but since I had little to do with JavaScript before, these Arrow Functions confused the heck outta me.
First time I get to watch this guy and been watching all of his videos about "If you don't know what this means I have a video for that", hope I get to the point that I don't have to click that video in the corner 😂😂. Thank you!!
5:22 That code is not exactly the same - first one has no return statement, and though in this example it doesn't matter, you should always make sure that what your function returns is not going to break things in you code. So, just blindly replacing all classic functions with arrow functions might even break things. You might also break things if you rely on function this context (e.g. in event handlers).
true. the last function is specifically used to perform a side effect, but not return a value. airbnb's style guide recommends keeping the curly braces to signify that there's a side effect
Very well explained, my friend. Thanks a lot. So "this" in normal functions refers to where the function is called, whereas "this" in arrow functions refers to where the function is defined. Gotcha.
It's hard to understand when you dont know much of programming, but I must admit that, even beign from another country, after seeing this like 5 times, I have completely understood everything, Nice video!!
Could you make your es6 videos with ’react hooks’ specially those where you use ’this’ keyword and ’class’ ? Or simply write it in comments, i really like your videos
so when you use 'this' in the function, since its being called directly from the document. The 'this' would refer to the document? and The document doesn't have a name property so thats why it returns " ", did I understand correctly? 😂
No, this is not correct. Test it for yourself by defining this.name outside of the class definition. The most important point about the issue (which is completely glossed over in the video) is that the this is being referenced in an anonymous function passed as a callback to setTimeout().
this is what I've been looking for. Thanks a lot! (1 thing that I feel scared is that I posted about this question in facebook, and youtube algorithm finds what I've been looking for...i've never searched about this concept in google.)
Sorry it was confusing. Essentially all I was trying to say is that the this keyword inside an arrow function is going to be the same as it would be right before the function is defined while the this keyword in a standard function is the same as it would be directly before the place where the function is called.
@@WebDevSimplified Nah it wasn't confusing, the way you explained was great. The dude who asked might not be in his best state or simply coding isn't for him. Keep up the good work.
As a developer who jumps into different languages and technologies based on what my current project demands, I ALWAYS forget how arrow function works after some time of not using JS. This video is a nice refresher!
This video has been so enlightening for this topic! I used to think it was just a syntax thing, but even I as a beginner could see the power of arrow functions! Thanks so much, the 8:00 - 8:30 mark really hit home for me!
Just discovered your channel and subscribed. My teacher is really bad and has a horrible accent, I really couldn't understand him or his weird French notes. Reading super long texts from developer sites is not for me either. Your video was concise, your explanations easy to understand and your English impeccable (I immediately close any video with an Indian accent). Thank you. I left a like and will be following you.
man ur rly great for make this content for us, i didn't know the context of "this" in js and as an oop dev i have been having problems for long time.. ty a lot
Clear and concise explanation. Have been trying to understand since I started learning JS what the difference was and haven't come across an explanation like this. Finally get it now! Definitely subbed to your channel. Thank you!
Great explanation, I was having trouble understanding how arrow functions work. I ended up watching around 5-6 videos, and this was the one that finally made it 'click'. Thank you!
Good explanation, I now understand "this" in Javascript. I still don't agree with arrow functions, but I need them and this video helped me. Thank you!
This guy knows how to explain the basics down from the highly abstracted explanations to a very simple one everyone can understand. Great teacher!
Absolutely. He's the best
Absolutely! I'm not religiosu but whenever he explains to me somethign I've been struggling with am always like "god bless this mf"
im actually really confused around 7:45 when he starts to explain this this or that this
@@BM4Dayz69I know I'm replying late but for anyone else confused- I believe he was pointing out that functions and methods are different and when calling a function (even within a method of a class) it will not work to refer to object variables (e.g. this.name) because the function acts as a completely separate block of code than the class and you must either provide the function the variables you're referring to via parameters OR you must be using global variables. Class variables are usable only within a class I think. Whereas if you use => notation then it stays within the class and thus you may use those local class variables.
I finally understand how arrow functions use the “this” keyword differently. Thank you.
I'm glad I could help!
I find still hard to grasp this "this" because of this so much "this" in this guy's speech. Hard to keep track of this. Yet, not this Bob's fault, he does the best to explain this "this".
haha!!! same here .....8 months JS and REACT .....I finally get it !!! thank you so much!!!
@Geno Thank you for explaining this... ba dum ts, very helpful... and confusing...
@@WebDevSimplified love u brother..no homo❤️
Glad I stuck around for the climactic ending where he explains that arrow functions aren't just syntactic sugar but a fix for the scoping issues with regular functions.
Yeah but that's a language choice - the anonymous function could have had scope... If anything, this creates a mess.
I appreciate that you have your words together ahead of time and can demonstrate while speaking. I get so frustrated at the content providers that sound like they didn't bother rehearsing and doing multiple takes until the script flows naturally, clearly, and concisely. Thank you!
Kyle, you seriously have a gift for teaching. Everything is so concise and well explained. It's very evident you take a lot of care in planning out your lesson plan. Having been a dev for over 20 yrs and consuming tons of material, you're my go to person when I need to learn or review something. Thanks so much!
Could not agree more! Excellent work. Thank you!
Dude, I have to admit, this is the first and ONLY video that has helped me understand arrow functions. I've never understood WHY I wrote it the way I did... and you simplified it beautifully. The fact you said "Well, because it's this... you can delete this..." and "And because this... you can get rid of that" was so much easier than people saying stuff like "Okay, just do it like this" Okay, but WHY?
So thank you, so much for doing this video.
I was learning React, then confused about the this keyword;
I read the MDN Documentation, then w3 schools, stack overflow and everywhere
but this video was where I was enlightened.
Thanks Kyle, you're awesome.
same here
Read Mozilla JavaScript documentation. Yes, Mozilla browser now fails to provide compliance at the level of Chromium, but its documentation is very good.
This channel is seriously underrated. Thanks Kyle-- you're clear and straight to the point. I subscribed!
I'm really glad I could help!
This channel is seriously overrated. So much of a failure to get into the essence of things and to promote good practices. People, don't waste time on it, read original documentation and use your own head.
@@Micro-Moo hey bro..
Didn't u attend any classes or any videos regarding web ?...one thing I wish to tell that if someone helps to understand any concept it makes us to Learn quicker.this is smart work...
I accept your words but we can't follow this in every time...
If we get some knowledge on any concept .we can easily dig the documentation.
I love how organised your videos are. No distractions and stuttering like on a lecture. You're making people's lifes so much easier
Subscribed, I've been trying to wrap my head around arrow functions and your the first person who has explained it clearly. The examples were really helpful, thank you. I'm going to check out your other videos.
Tip: 99% of the time you can use const over let in JavaScript. Functions can always be assigned to a const since the function code does not change.
Correct
Nice
will using const make the this inside the function inherit the constructors this?
Perfectly correct. There are more fallacies in this video, I listed them (or some of them) in my other comment.
@@AlThePal78 No way. Const is nothing but const. Moreover, it is a constant declaration only for a variable, not for the properties of an object this variable refers to.
anytime im stuck on something i always search for your channel to break it down into something i can digest, thank you!!
Oh man… the variety of examples, the pace, the clarity… It gives me so much pleasure to finally understand certain concepts in such an easy way. Thanks!
BFTs!
@@spondoolie6450 what does that mean?
Arrow functions..."fixing" something that wasn't broken, while making code harder to learn and read. Edit: Good job on the video despite my adverseness :)
Agreed
Your explanation of how arrow functions change the usage of the "this" keyword is the best I've seen on TH-cam. Thank you.
You are very welcome. I'm glad my video was able to resonate with you.
Your content is amazing. I am always trying to make my learning more efficient, and I always come to your channel for clear, well taught lessons. They always make sense to me right off of the bat. You're doing great dude!
Kyle @Web Dev Simplified -- Thank you so much for your excellent presentation on understanding the syntax of arrow functions vs. traditionally written functions, and the reasons why, beyond cleaner looking code, they should be used! Your explanation of "this" in the old way of writing functions vs using arrow functions answered that.
Great video, you really explain arrow functions well.
I agree that the "this" scoping is the best reason to use arrow functions.
I don't agree with making your code more concise as it frankly makes the code harder to understand for novices and lazy developers.
From what I've seen, working in medium to large companies, most developers are lazy and don't want to learn new things.
To avoid people constantly asking me how my code works because they don't understand it, I've opted to make my code as readable as possible.
I add comments wherever there is conditional logic and I always add method/function comments (JavaDoc style).
I won't make my code as verbose as possible, but I'll avoid one-liners when a couple extra lines containing curly-braces and return statements will help someone else understand the code better.
In the end, code that is going to be maintained by multiple people, should be written with readability in mind.
If you're working with code which is negatively affected by nano-second delays introduced by not 100% optimized code, then don't let shitty developers touch that code :p
But this it about JavaScript, and I've never seen a scenario where JavaScript code is used where such optimization is needed.
This is a good point. When I was a jr one liners seriously confused the hell out of me.
Completely agree!
I like how you explain arrow functions in a simple way, always return to this video whenever I want to refresh arrow function and the 'this' binding concepts.
Dude keep it up! you deserve way more subcribers!
Thanks! I only just started TH-cam, so I am really happy with where I am so far.
I heard you.. I just subscribed.. this was a joy and informative to watch.
can't count how many bloody times i've watched other vids trying to explain this concept and walked away in a cloud of WTH. you cleared this up for me in a straightforward way. brilliant. thank you. i learned JS waaaay back and rarely used it until recently. this scoping confusion has haunted the hell out of me until today. you cannot know the relief, because now it jives with the other languages i use regularly.
That is awesome. I am really glad I was able to help.
I'm a big fan of cleaner, concise code syntax.
This is awesome. Thanks you!
OH my god. Finally -- a good, simple explanation, with simple examples, _without_ a bunch of joking around about it.
I was watching some tutorials about javascript then i keep seeing this arrow function(which is i don’t know what it’s called) used by the dev. I was curious about it but I didn’t search or type anything about it. After watching I took a break left my mobile in my bed when I came back open youtube app then this video recommended. TH-cam algorithms are awesome.
Sorry for my bad english btw. Not my native language 😊
That is awesome! I'm glad this video was able to help you understand arrow functions, because they truly are amazing.
Confidence oozes from this dude! And his tutorials are unparalleled!
Thank you!
This is the first time I've seen the arrow functions. I'm going to definitely have to dive nose deep into this.
They are super nice when trying to write code that utilizes the new ES6 array methods as well as promises. It makes the code so much cleaner.
Really appreciate your efforts Kyle. Some points I wanted to make-
'this' is defined where function is called, and so the place where function is called i.e. person.printFunction(), 'this' must be pointing to person object as it's invoked with person.printFunction(), it's not pointing to global object. The fact that inside setTimeout another anonymous function is defined which takes us to concept of closure and it is a known behavior in javascript that 'this' inside closure points to global(many say its a bug in language but that's how language designer chose it to be). We get a workaround for it where we take another reference like: var self = this, and use 'self' everywhere instead of 'this'.
Hopefully, they corrected this behavior in arrow function which was always desired. So the point which I want to make is - 'this' inside printFunction() is still pointing to person object(because function was invoked with person.), but 'this' inside anonymous function(closure) of setTimeout is pointing to global object which was a known behavior in javascript.
I'm glad you said this. I've been trying to understand the differences with 'this' in the different functions and people saying 'this' is defined where you call the function from just doesn't appear to be true. If he used a console.log(this) in his person.printFunction() function then it would print the person object, not the global window object.
"this does get this to this and this"
Great explanation
"This is defined where the function is called" finally made me understand why this.name didn't work in ES5.
I've been doing various tutorials on web design for three months now and didn't fully understand arrow functions till now, thank you so much!!! I will be checking out more videos of yours
just reviewing arrow functions for my tomorrow interview. wish me luck!
You got this!
How did it go?
@@mohammedalmukhtar8949 the exam was all about JSON manipulation. Really had a hard time I was doing the exam for about 6 hours. Some mobile responsive designs as well was asked. all should be in plain javascript no frameworks.
The portion of the video where you speak about the different usage of this in arrow syntax versus what was standard function syntax was worth its weight in gold. I wrote it in my notes twice. Thank you so much.
Great explanation and examples 👍🤓
Thanks!
I am in a bootcamp and this topic has been kicking my butt thank you SO MUCH for making this make sense. Wow. This has been stopping me getting my homework done.
Doesn't use semicolon Me: "I too like to live dangerously "
semicolon done by prettier
Doesn't use semicolon;
Me: "I don't like to live dangerously.";
Looks way cleaner, not?
@@anonymanonym9004 I actually started using semicolons in normal non-programming texts because of the habbit :D
Bruh I actually got ticked off
The rules of JavaScript Automatic Semicolon Insertion:
flaviocopes.com/javascript-automatic-semicolon-insertion/#the-rules-of-javascript-automatic-semicolon-insertion
has examples of what can go wrong when you forget to put a semicolon, too.
You should also add to the description of the video "How to understand "this"" because I've looked for so many videos explaining and finally I get it xD
Thank you very much for this amazing tutorial. You're really good at explaining stuffs. Great job! I just want to let you know you forgot the parenthesis in "random()" in the third function, otherwise it won't return a number between 0 and 1
it would in fact return the Math.random function itself right?
@@lostware6458 yeah, it would.
const randomNumber2 = () => Math.random(); // personally not what i'd do.
const randomNumber2 = Math.random // way better
You earned a subscribe from this video. Great explanation. As a programmer from a past life who has been getting back into JavaScript for fun, I never understood what the arrow function was used for, until now. Thank you!
I'm glad I could help!
ah....this finally makes sense to me...(coming from another language and recently learning JS I couldn't understand why my method similar to 2 didn't work. Cheers.
I couldn't get this after hours of other people explaining them, and I understand your explanation literally within 2 minutes. Thank you,
He pretty much untangled the "this" myth for me in 9 minutes.... Legend!
Thank you so much for the video!
I have just learned about => but only your video discussed scoping, which is by far the most important to use it. Thanks for 'this' . :)
Another difference is that functions obey to hoisting, when arrow functions do not :
This works :
console.log(triple(10));
function triple(x) { return 3*x }
This doesn't :
console.log(triple(10))
let triple = x=>3*x;
huh? Why doesn't the second work?
@@dreamyrhodes From what I understand, function declarations get hoisted but function expressions do not. Also "let" does not get hoisted I believe, so it creates an initialization error. If it was "var" you still get an error (a different one) since function expressions do not get hoisted. That's what I think, but please let me know if I forgot something or if I'm wrong.
Second one is a function expression right? So even if you don’t use arrow function you still wouldn’t be able to log the second one. Let keyword would give you “triple is not defined” error, while var would give you undefined.
ohhhh
But that is a feature of anonymous functions. Hoisting is a strange, irrelevant term. Let fn = function(x) { return x * 3; } // notice the semicolon, required by any good lint rule
Without arrow functions I would have done nothing. They have saved my life and my projects. !!!!
'This' just confused me.
LMAO, how sweet comment 😁
Do you mean 'this' the parent scope (youtube video), or, 'this' your own comment 🤣
@@ClintDavis86 I'll let the reader of the comment decide. 🤔😊
Completely normal to be confused by it. Think of 'this' as just another property that comes with objects, but it refers to scope.
Instructions unclear, this pointing to afterlife
Thank you so much for the explanation! I've been confused for like hours until your video showed up. Definitely subscribing.
As someone who learned other languages first it was much harder to envision how regular functions work than how arrow functions work, which would have been what I would have expected from regular functions.
Thank you. I've been a programmer for a while now, but since I had little to do with JavaScript before, these Arrow Functions confused the heck outta me.
I swear TH-cam algorithms can read minds.
I'd suggest dropping the two bytes indentation and use a 4 bytes indentation. I don't believe I need to explain why. Kudos for the excellent channel.
can someone tell me when we use the {} braces with arrow function ? do we use it when we have to return multiple line of code ?
yes. no brackets needed is single line that returns something (called implicit return)
Subscribed so fast. Thank you for a clear and concise explanation. Emphasis on EXPLANATION. Thanks mate!
This this this this this this this. This is so confusing to hear 😂, great video tho!
It was just as confusing to say lol. I was so worried I would mess up saying a this at some point.
First time I get to watch this guy and been watching all of his videos about "If you don't know what this means I have a video for that", hope I get to the point that I don't have to click that video in the corner 😂😂. Thank you!!
How many people were screaming 'SEMICOLON' at the screen?!?!
In JS semicolons are not necessary.
@@ErrorDebug neither are indentations or separating lines of code!
I was yelling "PARENTHESES!" at the Math.random line.
My prettier does it for me lol
Everyone who teaches code does this -.-
even proffesional teachers do
3rd video in a row made me subscribe.
Clear and straight to the point. I'm enjoying your channel so far.
Keep it up (Y)
Thank you!
The fact that he doesn't end every statement with a semi-colon disturbs me.
Thank you! I thought it was just me.
I was thinking the same. It gave me some anxiety ahahah and it's just a tutorial ahahah
Automatic Semicolon Insertion, check it out...
@@evil1717 If you're teaching people to code you should teach it with proper syntax. The automatic stuff comes after you've learned how coding works.
I know...
Great explanation, not only did i understand the arrow function as also making it easier to compreend the 'this' keyword
5:22 That code is not exactly the same - first one has no return statement, and though in this example it doesn't matter, you should always make sure that what your function returns is not going to break things in you code. So, just blindly replacing all classic functions with arrow functions might even break things. You might also break things if you rely on function this context (e.g. in event handlers).
true. the last function is specifically used to perform a side effect, but not return a value. airbnb's style guide recommends keeping the curly braces to signify that there's a side effect
Very well explained, my friend. Thanks a lot. So "this" in normal functions refers to where the function is called, whereas "this" in arrow functions refers to where the function is defined. Gotcha.
"The scoping of the this." Hah
It's hard to understand when you dont know much of programming, but I must admit that, even beign from another country, after seeing this like 5 times, I have completely understood everything, Nice video!!
Challenge:
Take a shot everytime he says "function"
I was struggling with this arrow function thing, seriously the comparison use really changed the game for me thanks!!
Could you make your es6 videos with ’react hooks’ specially those where you use ’this’ keyword and ’class’ ? Or simply write it in comments, i really like your videos
I was trying erase a button after a few seconds and stumble upon this, was able to do it but had no idea what I was doing, now I understand tnx!
so when you use 'this' in the function, since its being called directly from the document. The 'this' would refer to the document? and The document doesn't have a name property so thats why it returns " ", did I understand correctly? 😂
This is correct.
No, this is not correct. Test it for yourself by defining this.name outside of the class definition. The most important point about the issue (which is completely glossed over in the video) is that the this is being referenced in an anonymous function passed as a callback to setTimeout().
this is what I've been looking for. Thanks a lot!
(1 thing that I feel scared is that I posted about this question in facebook, and youtube algorithm finds what I've been looking for...i've never searched about this concept in google.)
First part is very good. Could be improved by demonstrating the code in execution though.
The second part, explaining "this" totally lost me though.
Sorry it was confusing. Essentially all I was trying to say is that the this keyword inside an arrow function is going to be the same as it would be right before the function is defined while the this keyword in a standard function is the same as it would be directly before the place where the function is called.
@@WebDevSimplified Nah it wasn't confusing, the way you explained was great. The dude who asked might not be in his best state or simply coding isn't for him. Keep up the good work.
I like your no-nonsense approach to your vids. 9:32 worth of good, easy to understand content. Thanks!
Thanks! I'm glad you enjoyed it.
i know how 'this' keyword works but when i see it in an actual code, i have no idea what's going on 😟
As a developer who jumps into different languages and technologies based on what my current project demands, I ALWAYS forget how arrow function works after some time of not using JS. This video is a nice refresher!
Yep JS sucks if you already know programming, JS is unpredictable most of the time
"This" is very useful. Been coding JS for some time and never understood the real difference
This video has been so enlightening for this topic! I used to think it was just a syntax thing, but even I as a beginner could see the power of arrow functions! Thanks so much, the 8:00 - 8:30 mark really hit home for me!
Just discovered your channel and subscribed. My teacher is really bad and has a horrible accent, I really couldn't understand him or his weird French notes. Reading super long texts from developer sites is not for me either.
Your video was concise, your explanations easy to understand and your English impeccable (I immediately close any video with an Indian accent). Thank you. I left a like and will be following you.
Thanks. I'm glad you enjoyed my videos
You explained it than many of the senior Coding TH-camrs.
Great Tutorial...
also enjoyed your exceptional BLINKING skills!!!
man ur rly great for make this content for us, i didn't know the context of "this" in js and as an oop dev i have been having problems for long time.. ty a lot
Clear and concise explanation. Have been trying to understand since I started learning JS what the difference was and haven't come across an explanation like this. Finally get it now! Definitely subbed to your channel. Thank you!
After studying from different sources and this video, I started to get it. Thank you very much. Best teacher!
Great job Kyle, your explanations are clear and you didn't even punch any holes in drywall!
Tons of videos I've seen but your video Really simplified this❤️❤️❤️❤️👍
Great explanation, I was having trouble understanding how arrow functions work. I ended up watching around 5-6 videos, and this was the one that finally made it 'click'. Thank you!
So two years later, where are you at now?
Crystal clear explanation as is the norm on this channel.
your explanations was the only one that made me really understand the use of it . thanks man
So glad that I found this Channel!
"This" is such a confusing topic, but thanks to your explanation I think I'm getting it now. Thanks a lot!
oh man, your videos are so straight forward and easy to understand. Thank you so much
nobody is like you brother .. you are just gifted ;)
Thanks for explaining the scoping for "this"! Now I want to use arrow functions every chance I get!
This is amazing. Your tutorials are the most helpful I've come across. Thank you so much.
Man this was the best video on the subject I've found so far! thanks a million!
Good explanation, I now understand "this" in Javascript. I still don't agree with arrow functions, but I need them and this video helped me. Thank you!
Arrow functions don't agree with you. :-)
Maybe because the explanation is really bad.
I absolutely love your videos. You explain everything so calmly and clear. Thanks a lot Kyle!
Finally an explanation that I understood and successfully ran! Thank you so much!
Great tutorial! I really enjoyed the explanation of the scope of "this" I'm finally seeing the power of arrow functions. Subed!
I finally understand the concepts of arrow functions. Thank you.!!
Nice! With this video you explained me an error I had weeks ago and did not find out what happened. :D
Thanks! The latter half of this was spot on what I was looking for!!
Wow. Great Video. I was always afraid of 'this' keyword. You really simplified it. Great content , samples and explanation. Keep it up !
I'm really glad my video was able to help