JavaScript this Keyword

JavaScript this Keyword

Subscribe for more videos:

Want to learn more from me? Check out my blog and courses:

[nithin]

"this" ain't stopping me from going forward in my path.

[MosheSchnitzler]

"This" was the first word I said as a baby. I can't believe that I'm still stuck here...

[nyxmediaentertainment]

" 'this' references the object that is executing the current function" ..simple, yet enlightning.. thanx!

[iLoveTurtlesHaha]

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.

[rodrigoribeiro]

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!

[ganeshbabu]

Without you, I wouldn't have learnt Angular. You're the best lecturer out there Mosh...

[oloyang]

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.

[bileljribi]

I rarely make comments on YouTube, I just want say THANK YOU, this is by far the best explanation for the "this" keyword I have found!

[swethanaik]

"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.

[prabdeepdhaliwal]

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) <- 'this' will *refer to global (window) object*
}


However,

2. When using the *'this'* keyword within a *method* (function within an object), 'this' *refers to the object* (that the method is within)
Ex. const obj = {
function Hello() {
console.log(this) <- 'this' will *refer to the object*, 'obj' as the function Hello() is within the object called 'obj'
}
}



Lastly,

3. When using 'this' keyword within a *callback function*, 'this' *refers to the global object (window)* again



Solution,

If the callback function is within an object, then:

4. You can _insert another argument/parameter_, 'this' - which will make the 'this' keyword (within the callback function) *refer to the object* instead.
This is because the 'this' keyword within the method already refers to the object containing the method.
Ex. const obj = {
names: ['Kobe', 'Lowry', 'Fred' ]

function Hello() { <- the 'this' in "this.names.forEach..." will *refer to the object*, 'obj'
*this* { <- callback function SO,
console.log( *this*, names) <- 'this' will refer to the *global object (window)*
}, *this* ) <- add 'this' keyword as another argument/parameter to the callback function, NOW
'this' - within the console.log() - *will refer to the object*, 'obj' instead.
}
}

So, in the above example, if you were to remove the additional parameter - 'this' - from the callback function... point #3 would be true

[Mattou]

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.

[siddharthmagadum]

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!

[flaviohenrique]

You explain so simples and direct that I couldn't understand why I didn't figured out this before. Thanks man, best didactic ever.

[antonmariadas]

Best explanation ever. Simple, concise and very clear.

[JeremyGalloway]

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...

[sucesssoulman]

Thank you!!!! your explanation is THE I understood the concept. There is nothing difficult when someone explains it as clear as possible.

[the_yugandharr]

Bro this stuff is insane. You're an amazing teacher. No doubts left. Thanks a lot Mosh!

[anifsayed]

This is by far the best explanation of this. I was struggling to understand the concept. Thank you very much.

[MohiyuddinShaikh]

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.

[cowabungatv]

Indeed the best tutorial on this i've seen so far