i think the "this" issue on javascrpt may just a historicol probrem from the source code,on me case,when i learn python code,i never have any kind of probrem like this
So from my understanding: NOTE: A *method* is a function within an object. A *callback function* is a function passed as an argument/parameter within another function. ============================================================================== 1. The *'this'* keyword *refers to the global object* (window) when using 'this' *within* a *function* Ex. function Hello() { console.log(this)
It's a myth that content creators keep copying. An object does not own a function, it just has a reference to a function no matter where we declare the function inside the object or outside. The "this" binding is due to 'the dot notation' which is described by ECMAScript standard "13.3.2 Property Accessors" "theObject.theProperty". function Hello() { console.log(this) } const obj = { hello : Hello } obj.hello() // this is obj const myHello = obj.hello; myHello() "this" will be undefined if it's 'use strict' or global object depends on host environment (node.js , browser, ect.) example with forEach just special case of no dot notation, arrow functions fix that because that kind of functions use parent environment which was called with dot notation)
Honestly, this makes so much sense to me. When people were telling me the 'this' in JavaScript is complicated I was worried that I would struggle to learn it but it makes so much sense if you stick to the rules for methods, functions, and constructor functions.
Trying to summarize 'this' after watching this video for at least 5th time: For fns inside Objects: 'this' refers to the object calling the function. For fns not called by objects - Eg call back functions - 'this' refers to the global object. For fns defined using arrow functions - 'this' simple refers to the object that is executing the arrow function - Irrespective of object's scope. Meaning: if the arrow function is called from a global scope? 'this' will refer to the global object. If the arrow function is called with in a function which belongs to an object?'this' will refer to the calling function's scope and in this case the object itself.
I think it means that in the last example, if instead of: 1) this.tags.forEach(function (tag) {console.log(this.title, tag}, this) 2) this.tags.forEach((tag)=>{console.log(this.title, tag)} he could get the same result by using an arrow function instead because it would inherit the _this_ from above, calling the Object itself
0:25 hands down best "this" definiton I've come across. There is an entire "You Don't Know JavaScript" book dedicated to this exact topic, yet the entire book could not explain it as well as you just did in one sentence...
This might sound over-the-top but I almost feel like crying! I can now understand what my Javascript: The Comprehensive Guide, is talking about!!!! Because of this video, I now understand. I wound not give up. Your video blew the doors open for my understanding. I can literally breathe easier now. I am preparing to freelance! Thank you and God bless you :)
THIS is an incredible explanation... not only about the reserverd word 'this' but also about the behaviour of structures that uses 'this' such as constructor functions. It cleared my mind. Thanks!
One thing you forgot to mention is that if you use an arrow function instead regular function when using a forEach() method in your example the keyword "this" actually refers to the object, and not the global window. So basically, "this" acts differently depending on whether you're using a regular function or an arrow function.
"This" is so well explained. Such an eye opener since I have always been confused with the "this" keyword in Javascript since it can mean different things depending on its placement unlike in Java which is pretty straightforward.
You are a very good teacher. now i understand the basics of this thanks to you. I love your Javascript videos I've learned a lot of things thanks to you. Thanks a lot for sharing your knowledges.
I heard this channel a lot. By watching THIS first video, I got to know THIS is an awesome channel . Crystal clear explanation. Thanks a lot. Subscribed!
Excellent video. By using arrow function ie this.tags.forEach(tag => console.log(this, tag)) works. This is because an arrow function doesn't have its own this value. Instead, it uses this value of the enclosing lexical scope.
when is in a fat arrow function, this, takes the value of the class where it belongs. In case we haven't given a class it automatically takes class as document class.
Note: this video is in the context of non-strict mode. This in a top level function will be undefined if in strict mode. However, i the function is called as a method of the window/global object it refers to window/object respectively.
The first part of your video is th goal for every tutorial out there. And when you made those claims in the begining that you would have the best way to explain it and understand, that inherently put a lot of pressure on you from me, since this video was a quick search to go over it for a different bigger part of my learning, and this is something thats been confusing me.. Well, tbh with you. You succeeded. Well Done man. You did amazing explaining it, and I am in your debt.
tl;dr: case 1: `this` in an object method -- referencing the object. case 2: `this` in a regular function -- referencing `window` (`global` in node.js) case 3 - a special case inferred from case 1: function Video() {console.log(this);} new Video; referencing a new `Video` object, because `new` creates an empty object `{ }` and `Video` serves as a constructor method of the object. case 4 - a special case inferred from case 2: `this` in a regular function in an obj method -- referencing `window` because `this` is in a regular function. case 1 at 1:00 case 2 at 2:13 case 3 at 2:33 case 4 at 4:35 Note: all the four cases above are based on the assumption that nothing is tampered with by things like `call`, `apply` and `bind`.
a special case that the lecture does not mention: based on the code in case 3, function Video() {this.a = 1;} Video.prototype = {f: function() {console.log(this);} Video.prototype.f(); // print out the `prototype` with `f` inside. var v = new Video; v.f(); // print out the `v` with `a` inside.
I don't know what exactly he was going to include in that lecture, however, for those curious to find out a way to solve that problem, from what I know, you could simply use arrow function instead of normal function, arrow function treats this differently than normal functions, that's the main reason arrow functions of ES6 are so cool, one advice I have in order to avoid errors in complicated codes is to use classes for object constructors, functions in the global scope and for object.prototype properties and use arrow functions everywhere else.
Great tutorial! Maybe an example (in a news agency) const news { title: "A dog run away", subtitle: "The family is worried", toBlog() { console.log(this); }, toTwit(){ console.log(this); } }; The object is the news if you blog it or twit it. I'am a music teacher but I tried to understand and explain 😁
Very simple rule of thumb if that function is part of an object we call that function and method right so if that function is a method in an object this references that object itself otherwise if that function is a regular function which means it's not part of an object this reference is the global object which is the window object in browsers and global in node.
At 3:08 in constructor function we are neither calling the object nor the constant V ...so how we are getting that object in console ?? i am kinda confused ...pls elaborate sir...
In javascript , creating a new object from function constructor means execution that function , create an empty object , set up properties of that empty object by looking at this ( this.title in this example ) and return that object.Thats why we are seeing that console log statement.
Mosh, damet garm. Hichwaght fekr nemikardam ke behtarin moalleme donya ye Hamwatan bashe. Merci. Zemanan man ta hala 2 ta az coursato kharidam. I wish you could create a course about JavaScript Debugging for a real world project. There is nothing like this any where on the web.
the `forEach` can easily rebind the `this` context behind your back.. we assume `forEach` call the callback as a floating function.. what happen is our assumption is wrong.. maybe `forEach` call the callback using something like `callback.call(somerandomobj)` .. clearly `this` is referring to somerandomobj
try adding type="module" to the source of your index html and try to run with console log (this) in your javascript file that would be resulted in undefined.
" 'this' references the object that is executing the current function" ..simple, yet enlightning.. thanx!
Thanks! This saved me from a lot of confusion
Me too commotion solved
“this” is a very useful keyword, I didn’t know it until now I wrote 5 lines of code to do its job.
instead I could use “this” one keyword, lol.
This simple line explains the entire concept
It's not that simple you have to know it's properties where to implement it..
"this" ain't stopping me from going forward in my path.
THIS is where I quit programming.
I can feel you. Not really noob friendly but you can do it!
first watch this, It will help you ua-cam.com/video/n_9oUP1GQz0/v-deo.html
How are you on every single video I watch?
😂😂nice comment
i think the "this" issue on javascrpt may just a historicol probrem from the source code,on me case,when i learn python code,i never have any kind of probrem like this
"This" was the first word I said as a baby. I can't believe that I'm still stuck here...
lol
Did figure it out what exactly is it?? Plaeseeeeeee explain me in simple words😭😭
@@sohailaali2081 The keyword ''this'' is basically an object that is binded to the function that is being executed.
@@CapeSkill yeah thanks but I already had figured it out last month😂😂❤️
@@sohailaali2081 It's not really as difficult as people make it seem to be.
So from my understanding:
NOTE:
A *method* is a function within an object.
A *callback function* is a function passed as an argument/parameter within another function.
==============================================================================
1. The *'this'* keyword *refers to the global object* (window) when using 'this' *within* a *function*
Ex. function Hello() {
console.log(this)
honestly, just use an arrow function instead of inserting "this"
@@DS-rv2fc hi, where is the next lecture of 'this' topic? i searched on YT list but I see nothing to be continue of 'this' lecture...
It's a myth that content creators keep copying. An object does not own a function, it just has a reference to a function no matter where we declare the function inside the object or outside. The "this" binding is due to 'the dot notation' which is described by ECMAScript standard "13.3.2 Property Accessors" "theObject.theProperty".
function Hello() {
console.log(this)
}
const obj = {
hello : Hello
}
obj.hello() // this is obj
const myHello = obj.hello;
myHello() "this" will be undefined if it's 'use strict' or global object depends on host environment (node.js , browser, ect.)
example with forEach just special case of no dot notation, arrow functions fix that because that kind of functions use parent environment which was called with dot notation)
Honestly, this makes so much sense to me. When people were telling me the 'this' in JavaScript is complicated I was worried that I would struggle to learn it but it makes so much sense if you stick to the rules for methods, functions, and constructor functions.
Trying to summarize 'this' after watching this video for at least 5th time:
For fns inside Objects: 'this' refers to the object calling the function.
For fns not called by objects - Eg call back functions - 'this' refers to the global object.
For fns defined using arrow functions - 'this' simple refers to the object that is executing the arrow function - Irrespective of object's scope. Meaning: if the arrow function is called from a global scope? 'this' will refer to the global object. If the arrow function is called with in a function which belongs to an object?'this' will refer to the calling function's scope and in this case the object itself.
you confused about what i had learnt till now, thanks to me for reading your comment.
Can somebody summarize this comment further for me plss
I think it means that in the last example, if instead of:
1) this.tags.forEach(function (tag) {console.log(this.title, tag}, this)
2) this.tags.forEach((tag)=>{console.log(this.title, tag)}
he could get the same result by using an arrow function instead because it would inherit the _this_ from above, calling the Object itself
"THIS" is all summary that I want for enlightened myself. Thank you!
thanks
I rarely make comments on UA-cam, I just want say THANK YOU, this is by far the best explanation for the "this" keyword I have found!
this!
I totally second this! New sub here!
0:25 hands down best "this" definiton I've come across. There is an entire "You Don't Know JavaScript" book dedicated to this exact topic, yet the entire book could not explain it as well as you just did in one sentence...
How about the (this & Object prototypes) portion of "You Don't Know Javascript"?
Till that part stands Great. What is your opinion?
@@1998charan dai ala
@@Jimmy-vx7mk you came to see 'this' it seems :)
Intha mottaiyan nalla solluvan
@@1998charan, my dumb ass still can't understand it.
Yeap! I felt it too! Very well put!
Without you, I wouldn't have learnt Angular. You're the best lecturer out there Mosh...
still could not manage to explain to my 7 yrs old brother.
hahaha
i don't know about your brother but I'm 24 and I'm fucked
@@mohammaddh8655 same hhhhhhhhhhhhhhhhhh
What a dumbass. A 7 year old struggling to understand this.
i tried to explain this to my 7 year old brother, then i realized i don't have one.
This might sound over-the-top but I almost feel like crying! I can now understand what my Javascript: The Comprehensive Guide, is talking about!!!! Because of this video, I now understand. I wound not give up. Your video blew the doors open for my understanding. I can literally breathe easier now. I am preparing to freelance! Thank you and God bless you :)
THIS is an incredible explanation... not only about the reserverd word 'this' but also about the behaviour of structures that uses 'this' such as constructor functions. It cleared my mind. Thanks!
One thing you forgot to mention is that if you use an arrow function instead regular function when using a forEach() method in your example the keyword "this" actually refers to the object, and not the global window. So basically, "this" acts differently depending on whether you're using a regular function or an arrow function.
because arrow function creates a closure, it's similar to
var that = this
this.tags.forEach(function(tag) {
console.log(that.title, tag)
})
@@marvinalone man your keywords tags that this really confused me
😢😢
Best explanation ever. Simple, concise and very clear.
I've been trying to understand this for over 48 hours and I finally get it!! Thanks :)
Hi, from which sourse are you learning java script? 😊
@@alcestabyss3305 mainly the Odin project and published books
"This" is so well explained. Such an eye opener since I have always been confused with the "this" keyword in Javascript since it can mean different things depending on its placement unlike in Java which is pretty straightforward.
AWESOMELY EXPLAINED - EVEN PAID COURSES CANNOT COME NO WAY NEAR THIS KIND OF EXPLANATION LIKE THIS
You are a very good teacher. now i understand the basics of this thanks to you. I love your Javascript videos I've learned a lot of things thanks to you. Thanks a lot for sharing your knowledges.
I heard this channel a lot. By watching THIS first video, I got to know THIS is an awesome channel . Crystal clear explanation. Thanks a lot. Subscribed!
Thank you!!!! your explanation is THE BEST!!!!! I understood the concept. There is nothing difficult when someone explains it as clear as possible.
Excellent video. By using arrow function ie this.tags.forEach(tag => console.log(this, tag)) works. This is because an arrow function doesn't have its own this value. Instead, it uses this value of the enclosing lexical scope.
This is by far the best and the simplest video on 'This'
This was one of the most beautiful explanation on "this" topic. Heading out to solve some quizzes based on this concept to solidify my learning.
I loved this video. It untied the “this” knot in my head. MANY THANKS !!!!
This is by far the best explanation of this. I was struggling to understand the concept. Thank you very much.
Mosh, literally i was laughing while the console.log logged this keyword inside the call back.... A great 8 and half minutes spent.. Thank you...
so basically this references the parent of wherever its called unless its called in an ordinary function then it references window
with many MANY exceptions, such as with callbacks, anonymous function expressions, arrow syntax etc etc... still very complicated
Cleanest "this" explanation in youtube, thanks for sharing.
This is complicated
No it really is not. Learn more basic stuff. Then make some things. Then come back again, you'll see ;)
explained to my 7 year old nephew. he died
nice pun
@@Anniek62 LMFAO :D :D :D
@@Anniek62 LMFAOOO
Bravo. I've watched several videos on the this keyword and this is the best one yet
I am trying to write the points he said about this this is helping me to understand try this guys Hope you all understand in sha Allah
Have you even noticed that "this" is also different if you build a function using the arrow syntax vs the "function" keyword? Great video BTW.
this keyword doesn’t work on arrow function
when is in a fat arrow function, this, takes the value of the class where it belongs. In case we haven't given a class it automatically takes class as document class.
ONE MINUTE IN AND HE ALREADY CLEARED UP SO MUCH
Note: this video is in the context of non-strict mode. This in a top level function will be undefined if in strict mode. However, i the function is called as a method of the window/global object it refers to window/object respectively.
The first part of your video is th goal for every tutorial out there. And when you made those claims in the begining that you would have the best way to explain it and understand, that inherently put a lot of pressure on you from me, since this video was a quick search to go over it for a different bigger part of my learning, and this is something thats been confusing me..
Well, tbh with you.
You succeeded.
Well Done man. You did amazing explaining it, and I am in your debt.
tl;dr:
case 1:
`this` in an object method -- referencing the object.
case 2:
`this` in a regular function -- referencing `window` (`global` in node.js)
case 3 - a special case inferred from case 1:
function Video() {console.log(this);}
new Video;
referencing a new `Video` object, because `new` creates an empty object `{ }` and `Video` serves as a constructor method of the object.
case 4 - a special case inferred from case 2:
`this` in a regular function in an obj method -- referencing `window` because `this` is in a regular function.
case 1 at 1:00
case 2 at 2:13
case 3 at 2:33
case 4 at 4:35
Note: all the four cases above are based on the assumption that nothing is tampered with by things like `call`, `apply` and `bind`.
a special case that the lecture does not mention:
based on the code in case 3,
function Video() {this.a = 1;}
Video.prototype = {f: function() {console.log(this);}
Video.prototype.f(); // print out the `prototype` with `f` inside.
var v = new Video;
v.f(); // print out the `v` with `a` inside.
7:20 you've mentioned that's topic for next lecture. Please clarify where can I find "next lecture" ?
I don't know what exactly he was going to include in that lecture, however, for those curious to find out a way to solve that problem, from what I know, you could simply use arrow function instead of normal function, arrow function treats this differently than normal functions, that's the main reason arrow functions of ES6 are so cool, one advice I have in order to avoid errors in complicated codes is to use classes for object constructors, functions in the global scope and for object.prototype properties and use arrow functions everywhere else.
Indeed the best tutorial on this i've seen so far
I finally understand the part where you add this after callback funtion
Says it’s complicated from poor teaching material then minute one of his explanation and I’ve got it. Top sh#t mate, thanx
Wow, I watched only the first minute and it makes so much sense now than trying to read articles about it!
LMAO, I was trying to read a stupid article as well before leaving it and coming here. XD
so true.
even with your brilliant teaching and demonstration, its just so confusing.
This is the best explain for This keyword i've ever seen :) Thank you so much ....
Thank you so much for this explanation. it makes the concept of the "this" keyword very clear
The best so far... clearly understood.
You explain so simples and direct that I couldn't understand why I didn't figured out this before. Thanks man, best didactic ever.
Only video in you tube that clears the "this" keyword concept💥
Thank you for the last part with the foreach, I didn't know that callback functions behave like that I didn't know how to fix it until now
Great tutorial!
Maybe an example (in a news agency)
const news {
title: "A dog run away",
subtitle: "The family is worried",
toBlog() {
console.log(this);
},
toTwit(){
console.log(this);
}
};
The object is the news if you blog it or twit it.
I'am a music teacher but I tried to understand and explain 😁
hello.. i am from India. thanks for such a great explanation.
Very thanks for a CLEAR explain about 'this'. Love Mosh from Korea
Thanks for making it more complicated man
Bro this stuff is insane. You're an amazing teacher. No doubts left. Thanks a lot Mosh!
maaann, I can't explain how much you helped me with this video. congrats for your didactics and thanks a lot!!!!
This is where I actually I learnt about this!!! thank you so much none in my college explained like this about this!
if you use arrow function this will refer to video object not the window object so no need to use forEach
Great explanation!!! Learning Typescript here and needed a clear explanation like this one!
Very simple rule of thumb if that function is part of an object we call that function and method right so if that function is a method in an object this references that object itself otherwise if that function is a regular function which means it's not part of an object this reference is the global object which is the window object in browsers and global in node.
Finally, I know this in Javascript,
Thanks. Had to watch twice but now I understand.
Now "this" is what I came for! Thanks Mosh!
superclass, this explanation of this is the best the world has ever seen.
Finally! My question has been answered! Thanks Mosh!
Programming with Mosh Maybe make a video about best practices in writing Javascript code :)
my instructor sucks in class, so thank you for explaining!!!
At 3:08 in constructor function we are neither calling the object nor the constant V ...so how we are getting that object in console ?? i am kinda confused ...pls elaborate sir...
In javascript , creating a new object from function constructor means execution that function , create an empty object , set up properties of that empty object by looking at this ( this.title in this example ) and return that object.Thats why we are seeing that console log statement.
Mosh! your explanation is clear and concise.
Now I really get it omg...also with the 'new' keyword, many thanks!
A small, yet complex, topic made easy through this simple video. Thanks!
thanks for great content, to avoid confusion 3:41 it would be better not to call the constructor function Video to not mix it with object video above.
holy macaroni, thanks for the video!! wonderfully explained.
Thanks for this simple and understandable video.
I learned something new today. I haven't idea that the second param of the forEach function could add the this keyword!
Great video. I fully undertand "this" now
Thanks man! I understood after 3 minutes of ur video
Thank you so much for this. One simple sentence and it somewhat clicked for me.
I can't express how valuable this was for me. Chrystal clear
Mosh, damet garm. Hichwaght fekr nemikardam ke behtarin moalleme donya ye Hamwatan bashe. Merci. Zemanan man ta hala 2 ta az coursato kharidam.
I wish you could create a course about JavaScript Debugging for a real world project. There is nothing like this any where on the web.
To me, you're like Forrest Gumps' momma. You always have a way of explaining things so I can understand them. THANK YOU
First Time I really understood the this keyword! Thanks Mosh,you are a 🌟
I need to watch and re-watch this a few times. to get and remember it.
Favorite tutor mentor in programming
the `forEach` can easily rebind the `this` context behind your back.. we assume `forEach` call the callback as a floating function.. what happen is our assumption is wrong.. maybe `forEach` call the callback using something like `callback.call(somerandomobj)` .. clearly `this` is referring to somerandomobj
Mr. Mosh you are really great sir, your teaching style, explanation and your knowledge helped me a lot to clear my ideas
I finally understood how this keyword works!
at 4:54 why u used tag in the call back function does the tags.forEach method passes the array into the argument in the call back function.
1:35 we need not write like function play( ) { } ? jusst play ( ) is enough?
THIS was driving me crazy until I watched your video. Thanks!!!
Thanks for the clear explanation. You really explain complex topics easily understandable. Thank you so much!!!
Amazing! Thank you MOSH! and.... may i know where the next lecture is?
Thanks. A very easy to understand and abundantly clear video.
This is the best explanation of 'this' keyword. Thanks a lot mosh 🙂
Wow! You just taught me in first 1 min which I needed the most. Thanks a ton!
I really loved it mosh!!! very confused before now got clear understanding of how this works with practical knowledge
try adding type="module" to the source of your index html and try to run with console log (this) in your javascript file that would be resulted in undefined.
Mosh is always a good teacher!!
Simple, concise and to the point explanation shown! Thanks for sharing.
at 5:10 you will not get undefined if you just use the arrow function
this.tags.forEach(tag => {...
Thank You. You literally saved me
Best explanation so far