@@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.
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 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".
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!
Notes for Arrow Function: 1. function keyword NOT needed 2. let/const variableName = (argument) => {function body} 3. short hand: curly braces and return keyword NOT needed, return result directly after => 4. brackets NOT needed in SINGLE parameter function's argument 5. do NOT bind "this" (avoid for methods) or "arguments". 6. It can NOT be used as constructors or generators (I don't know what those mean yet...) A good suggestion from developer Lars Schöning: 1. Use function in the global scope and for Object.prototype properties. 2. Use class for object constructors. 3. Use => everywhere else. Since I'm a beginner I haven't seen so many examples with errors, so I will probably understand the point 5 and 6 better when I do.
6) let sum = (a,b) => a+b; console.log(sum(2,3)); will output: 5.Here sum is variable but we still can use it as a function when we assign it parameters when running it: sum(2,3); But if you try doing: let sum2 = new sum(3,4); it will give error. cause 'sum' is variable, primitive data structure which hasn't got constructor. The usual function declaration such as: function sum3(a,b){return a+b}; in other case can become a constructor and be used as one. ex: let sum2 = new sum3(5,6); because it has constructor initialized with the same name sum3(). in JS constructors and functions declaration is similar.
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.
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 :)
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.
@@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.
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 😊
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.
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.
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!
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.
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!
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.
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.
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'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.
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.
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.
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.
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.
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!
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
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 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
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.
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.
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
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.
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!!
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().
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
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
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 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.)
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!
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!
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.
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!
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!
If everyone explained things as clearly and concisely as you, devs wouldn't waste hundreds of hours trying to understand difficult concepts! 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.
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 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❤️
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!
Notes for Arrow Function:
1. function keyword NOT needed
2. let/const variableName = (argument) => {function body}
3. short hand: curly braces and return keyword NOT needed, return result directly after =>
4. brackets NOT needed in SINGLE parameter function's argument
5. do NOT bind "this" (avoid for methods) or "arguments".
6. It can NOT be used as constructors or generators (I don't know what those mean yet...)
A good suggestion from developer Lars Schöning:
1. Use function in the global scope and for Object.prototype properties.
2. Use class for object constructors.
3. Use => everywhere else.
Since I'm a beginner I haven't seen so many examples with errors, so I will probably understand the point 5 and 6 better when I do.
Thank you for these notes. Aggregated and concise knowledge like this is invaluable.
tech moves so fast...
es7 = Added exponential operator (**).
Added Array.prototype.includes.
es8 = Added string padding.
Added new Object properties.
Added Async functions.
Added Shared Memory.
es9 = Added rest / spread properties.
Added Asynchronous iteration.
Added Promise.finally().
Additions to RegExp.
6) let sum = (a,b) => a+b; console.log(sum(2,3)); will output: 5.Here sum is variable but we still can use it as a function when we assign it parameters when running it: sum(2,3); But if you try doing: let sum2 = new sum(3,4); it will give error. cause 'sum' is variable, primitive data structure which hasn't got constructor. The usual function declaration such as: function sum3(a,b){return a+b}; in other case can become a constructor and be used as one. ex: let sum2 = new sum3(5,6); because it has constructor initialized with the same name sum3(). in JS constructors and functions declaration is similar.
marry me Annie, and thank you
@@ulanb7584 Thankx what about generators ?
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.
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
OH my god. Finally -- a good, simple explanation, with simple examples, _without_ a bunch of joking around about it.
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.
anytime im stuck on something i always search for your channel to break it down into something i can digest, thank you!!
"this does get this to this and this"
Great explanation
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.
Without arrow functions I would have done nothing. They have saved my life and my projects. !!!!
I love how organised your videos are. No distractions and stuttering like on a lecture. You're making people's lifes so much easier
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.
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.
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.
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.
You explained it than many of the senior Coding TH-camrs.
I'm a big fan of cleaner, concise code syntax.
This is awesome. Thanks you!
I couldn't get this after hours of other people explaining them, and I understand your explanation literally within 2 minutes. 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?
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.
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!
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.
"This is defined where the function is called" finally made me understand why this.name didn't work in ES5.
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.
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.
Confidence oozes from this dude! And his tutorials are unparalleled!
Thank you!
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'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.
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.
He pretty much untangled the "this" myth for me in 9 minutes.... Legend!
Thank you so much for the video!
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.
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.
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.
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.
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!
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
"This" is such a confusing topic, but thanks to your explanation I think I'm getting it now. Thanks a lot!
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
I have just learned about => but only your video discussed scoping, which is by far the most important to use it. Thanks for 'this' . :)
Great explanation and examples 👍🤓
Thanks!
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
'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
I was struggling with this arrow function thing, seriously the comparison use really changed the game for me thanks!!
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.
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!
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.
Great explanation, not only did i understand the arrow function as also making it easier to compreend the 'this' keyword
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
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!!
I swear TH-cam algorithms can read minds.
After studying from different sources and this video, I started to get it. Thank you very much. Best teacher!
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...
Crystal clear explanation as is the norm on this channel.
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.
nobody is like you brother .. you are just gifted ;)
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)
this video is pure gold
someone give this guy a medal !!!
"The scoping of the this." Hah
Thank you so much for the explanation! I've been confused for like hours until your video showed up. Definitely subscribing.
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
your explanations was the only one that made me really understand the use of it . thanks man
Challenge:
Take a shot everytime he says "function"
Great job Kyle, your explanations are clear and you didn't even punch any holes in drywall!
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.
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!!
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().
Finally, after years of searching through these kinds of vids, someone who explains well. Jesus christ.
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
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
i know how 'this' keyword works but when i see it in an actual code, i have no idea what's going on 😟
Subscribed so fast. Thank you for a clear and concise explanation. Emphasis on EXPLANATION. Thanks mate!
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 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.)
"This" is very useful. Been coding JS for some time and never understood the real difference
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?
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!
Finally an explanation that I understood and successfully ran! Thank you so much!
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.
I finally understand the concepts of arrow functions. Thank you.!!
Thanks for explaining the scoping for "this"! Now I want to use arrow functions every chance I get!
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.
Tons of videos I've seen but your video Really simplified this❤️❤️❤️❤️👍
I like the simplicity of this video tutorial.
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.
oh man, your videos are so straight forward and easy to understand. Thank you so much
Nice and simple non-convoluted explanation … Thanks
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!
If everyone explained things as clearly and concisely as you, devs wouldn't waste hundreds of hours trying to understand difficult concepts! THANK YOU!
I'm really glad that I am able to help
Great Tutorial...
also enjoyed your exceptional BLINKING skills!!!
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!
Man this was the best video on the subject I've found so far! thanks a million!
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.
U r the best tutoriel for web frontend, buddy. Thank you buddy!
straight to the point with clear concise examples = new subscriber
This explaination is much easier to understand. Thank you so much!