the 'this' in javascript it's been the hardest thing to grasp correctly for me, thankfully we now have arrow functions. But it's also super important to know how the 'this' behave because there is a tons of legacy code out there
"Mind yoga" - I love it and it means you really are a Guru. Thanks for these videos. I got here backwards - I'm taking some of your Udemy courses and was so impressed that I came to RUclips to see more.
Every time when I watch your videos I make sure, that your explanation style is the best for me and I am sure not only for me. Thank you and much success in your work.
It honestly makes me happy to read such awesome comments Vahe! I try my best to explain as understandable as possible and it's just fantastic to see that this explanation style works for you and others :)
This is the most clearest (yes i know that's not grammatically correct) video that explains both "this" and arrow function. Thank you for making this video, I finally get this solved. Thank you so so so so so much.
when my company told to me to do certification from this guy on udemy I used to hate him. but now totaly depend on him to grab any type of knowledge.I have bought 4 courses of him.
Wow!! What an amazing lesson!! I would eventually spend some 5h googling this thing around and still don't understand it well, if I hadn't watched this video. Thank you!!
I am now able to see why => functions help to resolve the problem with 'this'. I was reading it in theory and now it is with practical example. I really appreciate for the help Max.
That's what happens when you try to do multi paradigms(OOP/FUNCTIONAL) with a single language. A whole package of exceptions, yet beautiful. Nice video.
Hi Max, I like the way you think and explain the content. i usually have a lot questions when follow a course but very little when I following your course as it is well explained. Keep up the good work.
You're my hero Max. At last i understood how the binding works! Working with React i always had this doubt of why i could use arrow functions without binding them in the constructor ☺
Great explanation! I remember there was another workaround before arrow functions appeared in ES6. You could say var that = this; within the constructor and then call that.addName() within button`s eventListener callback. I know, I know in 2022 probably no one use that dirt trick anymore :)
This is freaky. I was specifically having the exact problem with arrow functions vs. normal functions and how 'this' behaves differently today. And then this video appears when I get home.
Perfect explanation Max! Like always... Just wanted to add something to the tutorial : my favorite way to deal with this-binding. If we include babel then we can declare the addName method in the NameGenerator class like this : " addName = () => {.....}". I like this approach because it looks so clean to me.
Yes, another way would be do var self = this ;and pass self to the anonymous function. You can use self wherever you used this earlier in that scenario
Max, your rock! If I don't become web developer with you, I don't know how else. I used the arrow function on line 20, with the addName function, it is another way that works just fine. class NameField { constructor(name) { const field = document.createElement('li'); field.textContent = name; const nameListHook = document.querySelector('#names'); nameListHook.appendChild(field); } } class NameGenerator { constructor() { const btn = document.querySelector('button'); this.names = ["Max", "Anna", "Berny"]; this.currentName = 0; btn.addEventListener('click', this.addName); } addName = () => { const name = new NameField(this.names[this.currentName]); this.currentName ++; if (this.currentName >= this.names.length) { this.currentName = 0; } } } const gen = new NameGenerator();
Key sentence: The "this" keyword will not always reference directly to the class itself, where the "this" keyword is used. Rather in some cases, particular in javaScript, the 'this' keyword will reference "to the thing that calls/executes your code". A good example was the NameGenerator Class and the Constructor (inside the constructor was the 'this' keyword used. The constructor function gets called by the Class 'itself' so the 'this' keyword will reference to ....? Exactly the Class itself. Thanks ...
Awesome Video!!! Really appreciate your efforts. Because of you, I have got confidence in coding and have started my own channel . Thanks a lot Max!! Looking forward to learn a lot from you.. :)
Academind thanks for responding! You are my JavaScript hero lol. Are you available on any chat applications? I have a question I’d love to ask you. I been watching your Angular Material + firebase course on udemy. I am making an inventory management system and I am having a really hard time structuring my data. Could you give me some tips or maybe speak with me about it? Or should I ask my question on udemy?
Thanks for the video, very informative and closed some gaps :) I did have some problems with it before I even touched ES6 and didn't really know what's going on. One question. How would we go about passing something into the function we're only referencing, since adding parentheses would execute it immediately when the class instance is created? One thing that comes to mind is to call that function inside an anonymous function like what you actually did in your last example, is there any other way of doing it with less code?
Great description of both 'this' and arrow (or I've heard it also called a 'rocket' => in Ruby ;) ). I certainly would have been confused to see that notation. Is there any way to make that arrow function as a one liner?
Uff, few people I've known, who can explain things so clearly and easily. Thanks for the video, it's awesome!
Awesome to read that Ernesto, thanks a lot!
Normally I don't make comments in videos. But I totally recommend Max's courses. It's the best way of improving your development skills.
Max, THANK You very much, only now I understood what for bind() is
Happy to read that the video made things clearer for you Yurii, thank you very much for your comment!
At what point in the video does he cover the empty parthesis?
*parenthesis
the 'this' in javascript it's been the hardest thing to grasp correctly for me, thankfully we now have arrow functions. But it's also super important to know how the 'this' behave because there is a tons of legacy code out there
"Mind yoga" - I love it and it means you really are a Guru. Thanks for these videos. I got here backwards - I'm taking some of your Udemy courses and was so impressed that I came to RUclips to see more.
Thanks so much for both your fantastic feedback and your support here and on Udemy James! This honestly means a lot to me!
Every time when I watch your videos I make sure, that your explanation style is the best for me and I am sure not only for me.
Thank you and much success in your work.
It honestly makes me happy to read such awesome comments Vahe! I try my best to explain as understandable as possible and it's just fantastic to see that this explanation style works for you and others :)
You're the one of my great teachers. Still I need your videos to watch everyday or memorizing what I've learned from you before.
I really learned a lot of things by watching this video. the things I did before without knowing its reason.
Thanks a lot, Max
This is the most clearest (yes i know that's not grammatically correct) video that explains both "this" and arrow function. Thank you for making this video, I finally get this solved. Thank you so so so so so much.
I simply LOVE the way you teach and the way you explain things. Huge thank you!!!
Feedback like yours means so much to me, thanks a lot :)
I just want to appreciate this content which is extremely helpful for every Javascript Developer.
Definitely the best explanation of 'this' I have come across. Thank you.
This is this !! Very happy you have made this video Max nobody explain programming as you!!
Thanks so much Pablo, just great to get such an awesome feedback!
No one could have explained this any better. you are the best!!
best explanation of this keyword found on internet.
Awesome explanation! There are many tutorials trying to explain this concept but found this tutorial very helpful and easy. Thanks!
That's just fantastic to read, thanks so much Vugar!
when my company told to me to do certification from this guy on udemy I used to hate him. but now totaly depend on him to grab any type of knowledge.I have bought 4 courses of him.
Finally! I am finally beginning to "wrap my brain" around "this". Thank you Max. You are awesome
YOU are awesome David, thanks a lot for sharing this great feedback!
Came from the React - The Complete Guide. Awesome instructor.
Wow!! What an amazing lesson!! I would eventually spend some 5h googling this thing around and still don't understand it well, if I hadn't watched this video. Thank you!!
Happy to read that the video was helpful for you Gustavo, thanks a lot for your comment!
Thank you Max for clarifying this
Happy to read that the video was helpful for you, thank you very much for your comment!
Adding this to my favorite videos. Thank you very much Max! 'this' starts to make more sense.
well done Max，this is the reason why in react component class you should bind method to allow it can be executed by the jsx
I am now able to see why => functions help to resolve the problem with 'this'. I was reading it in theory and now it is with practical example. I really appreciate for the help Max.
Just great to read that the video made things clearer for you, thank you very much for your comment!
Great explanation. I really love Your courses. All the step by step explanation really helped me. Thank you.
That's what happens when you try to do multi paradigms(OOP/FUNCTIONAL) with a single language. A whole package of exceptions, yet beautiful. Nice video.
The best explanation of this keyword. thank's a lot, max
I was confused this topic before but now it totally makes sense. Great video!
Awesome, now i understand the basics of this thanks to you. Thank so much Academind
Finally, I got "this"! Thanks you very much!
I'm sooooooooooo amaze how you explain things man, you are fricking amazing.
Thanks, Max, Manu. Your video was a really nice refresher on 'this' keyword. Very clearly explained, as always in your videos.
Awesome Video! Really helped a lot to clear the confusion around this. Good work Max!
great explanation Max.
I fought a couple of times against “this” word but finally everything is much cleaner
Awesome to read that the video helped to make things a bit clearer, "this" can indeed be confusing :)
Hi Max, I like the way you think and explain the content. i usually have a lot questions when follow a course but very little when I following your course as it is well explained. Keep up the good work.
this.video = 'awesome' ;
Thank you Robert :)
Or maybe () => { this.video = 'awasome'} to be on a safe side :(
TypeError: Cannot read property 'undefined' of undefined at yt-formatted-string.video
@@ahmedanalattack Yeah. That's what i do.
You're my hero Max. At last i understood how the binding works! Working with React i always had this doubt of why i could use arrow functions without binding them in the constructor ☺
Thanks so much Mauricio, so happy to read that :)
One of the best explanations out there. Thank you
Max - I saved this video to tutorials I'm sure I will get back to in the future. Thanks !
Very nicely explained the "THIS" keyword......:)
A lot of mind yoga here. Great one, Max
Amazing video!
Best explanation I've found so far on this subject.
Everything makes sense now.
Wow, what an awesome feedback, thanks so much for that!
Great content. function versus function() -- a gold nugget. I'll have to rewatch 16:00 forward.
Awesome to read that you like the video Alfred, thank you very much for your comment!
Great explanation! I remember there was another workaround before arrow functions appeared in ES6. You could say var that = this; within the constructor and then call that.addName() within button`s eventListener callback. I know, I know in 2022 probably no one use that dirt trick anymore :)
A good refresher and great explanation! Thank you, Max!
Great to read that you like it, thank you for your comment!
I counted 138 x 'this' in this. :)
Great explanation, thanks Maximilian!
Max you are bloody awesome! Thanks for explaining this SO clearly and in-depth
Thank you for this and all of your other videos! Incredibly helpful!
This is really great to read, thank you very much!
This is freaky. I was specifically having the exact problem with arrow functions vs. normal functions and how 'this' behaves differently today. And then this video appears when I get home.
Guess that was kind of a good timing then, happy to read that Patrick :)
Thank you - great explanation. Long live arrow functions!!
as Kudvenkat is the best instructor on BE, you are the best on FE I guess. Keep going!
Wow..really really great explanation about this keyword
this is GOLD! thank you so much for this great explanation, and for free! really unbelievable!
Awesome explanation like always, Max!
Great explanation Max you're a savior thank you
Awesome explanation, Max!
Coming from React js Course on Udemy
Best explanation of this. Thank you!
Best explanation ever. Thanks, dude!
This is gold. Thanks you, Max!
THANK YOU VERY MUCH MAX!! I was hung up on this specific concept.
Happy to read that the topic is interesting for you Joe :)
Best this keyword explanation. Thank you very much
whoever is responsible for calling the function will be referred as this. great!!! This hint nailed this concept inside my head.
Awesome to read that Mohiuddin, thank you very much!
my brain is breaking but this helps out sooo much. Thank you kind sir 'this'
finally I know binding 'this', Thank you.Max.
Happy to read that Brenda, thank you!
Perfect explanation Max! Like always... Just wanted to add something to the tutorial : my favorite way to deal with this-binding. If we include babel then we can declare the addName method in the NameGenerator class like this : " addName = () => {.....}". I like this approach because it looks so clean to me.
Yes, another way would be do var self = this ;and pass self to the anonymous function. You can use self wherever you used this earlier in that scenario
those 8 people who disliked this video are the tutors jealous of your teaching skills.
for anyone wondering, addName = ( ) => { . . . } also works
Can we have a "this" counter on this video please.
This video cleared the "this" concept. Thanks
Max, your rock! If I don't become web developer with you, I don't know how else.
I used the arrow function on line 20, with the addName function, it is another way that works just fine.
class NameField {
constructor(name) {
const field = document.createElement('li');
field.textContent = name;
const nameListHook = document.querySelector('#names');
nameListHook.appendChild(field);
}
}
class NameGenerator {
constructor() {
const btn = document.querySelector('button');
this.names = ["Max", "Anna", "Berny"];
this.currentName = 0;
btn.addEventListener('click', this.addName);
}
addName = () => {
const name = new NameField(this.names[this.currentName]);
this.currentName ++;
if (this.currentName >= this.names.length) {
this.currentName = 0;
}
}
}
const gen = new NameGenerator();
Very helpful but challenging.
Thank U.
Key sentence: The "this" keyword will not always reference directly to the class itself, where the "this" keyword is used. Rather in some cases, particular in javaScript, the 'this' keyword will reference "to the thing that calls/executes your code". A good example was the NameGenerator Class and the Constructor (inside the constructor was the 'this' keyword used. The constructor function gets called by the Class 'itself' so the 'this' keyword will reference to ....? Exactly the Class itself. Thanks ...
Thanks Max! Quality content as usual!!
So great to read that, thank you for your support!
Very good and clear explanation, thanks!
Thanks a lot for your awesome feedback!
Awesome Video!!! Really appreciate your efforts. Because of you, I have got confidence in coding and have started my own channel . Thanks a lot Max!! Looking forward to learn a lot from you.. :)
What an excellent explanation! Thank you!
Just awesome to read that you like the video Jessie, thanks a lot for your comment!
this.currentName = ++this.currentName % this.names.length; :)) Nicely explained Max!
Thanks max finally I understand this
Excellent explanation.
such a good teacher
Amazing explanation!
Amazing, informative content like always Max :)
Thanks a lot William, happy to read that you like the video!
Academind thanks for responding! You are my JavaScript hero lol. Are you available on any chat applications? I have a question I’d love to ask you. I been watching your Angular Material + firebase course on udemy. I am making an inventory management system and I am having a really hard time structuring my data. Could you give me some tips or maybe speak with me about it? Or should I ask my question on udemy?
Hi Max I am ur big fan. I have purchased ur react native course . I Suggest u please update ur course . It would be beneficial for every one.
Great explination! But, can you pass arguments by reference?
great video and I appreciate the various solutions
Top notch video, Max
Thank you David :)
HOLY FUCKING SHIT. Finally managed to understand it. Thank you Max!
Awesome awesome stuff Max!
Thank you :)
"this" is a great tutorial! Get it? Huh? Get it guys?
Super explanation!!
very informative. my question is, do arrow functions not contain their own `this`, like normal function do ?
Thanks for the video, very informative and closed some gaps :) I did have some problems with it before I even touched ES6 and didn't really know what's going on.
One question. How would we go about passing something into the function we're only referencing, since adding parentheses would execute it immediately when the class instance is created? One thing that comes to mind is to call that function inside an anonymous function like what you actually did in your last example, is there any other way of doing it with less code?
Could also use class properties or apply a decorator that auto-resolves this.
You're the man... Thanks!
with the code as it is @16:51 , lets say addName() took parameters how would the addEventListener call look like ?
good question... i think in that case, either you write an anonymous function that takes a param, or use that arrow syntax maybe ?
Great description of both 'this' and arrow (or I've heard it also called a 'rocket' => in Ruby ;) ). I certainly would have been confused to see that notation.
Is there any way to make that arrow function as a one liner?
great lesson! thanks!
Wow complicated topic but superb explanation. I used to store this in a variable like let that = this; and then I would call that.addName
Simply Awesome Max :)
Thanks a lot Pabon!
Thanks sir !!!
I got it
Great explaination