Understanding the Keyword THIS in JavaScript

"this" is a special keyword in JavaScript. It is intended to be used inside of functions to point at the context of who and why the function was called.
Event listeners will trigger functions to run. When they do, the object that has the event listener will be the context for the function being called.
It is important to note that ES6 Arrow functions will change the meaning of the keyword "this".
It is also important to note that the "use strict" pragma can change the value of the keyword "this".
Code GIST: gist.github.com/prof3ssorSt3v...

[@rotrose7531]

After giving up understanding this for many times, finally the concept becomes a little clearer, if not 100%, to me. Still, nobody else teaches JS as thoroughly as you, god-sent gift to me.Thank you very much.

[@amgdeg4897]

how are you right now you were at the same place as me right now take a moment to reflect on how far you came

[@andreiconstantinescu9830]

Thanks Steve, great content! I like it that you don't rush through the topic and keep it at a good pace, even for a ’newbie’. It takes empathy to do that. I’ll stick around :). Cheers, Andrei, RO

[@aprilformosa]

Hi, Steve, I've been trying to understand this keyword and studying numerous times, but still couldn't totally understand it. Your explanation is so easy to understand. I can't thank you enough.

[@xiaosage]

comprehensive and explicit explanation !

[@web-dev01]

thanks Steve for your great work

[@RajeshSahu-qp6cc]

Great video on 'this' keyword and so simple to understand. Thanks for this video Steve.

[@SteveGriffith-Prof3ssorSt3v3]

Thanks. You might like this video too - kzbin.info/www/bejne/m4iniZqpfsyHfc0

[@mkamalkayani]

Thanks. I really liked your way of explanation.

[@chesterxp508]

Another very cool tutorial !!!

[@howydasayed470]

thanks , great video as usual !

[@TrendRain]

If I encounter any concept(s) which are hard to understand, the first thing i search in youtube is "..... by steve griffith" and if I don't find anything, my first thought is, "Dammit, now I have to spend more time searching and understanding on my own." Great video as always.

[@seanduignan294]

Just as ya think you know it all; you learn something new! Great vid!!!

[@SteveGriffith-Prof3ssorSt3v3]

You got that right!

[@ocxigin9220]

Good job

[@zunairullah]

Einstein said If you can't explain it simply, you don't understand it well enough. This keyword is not hard but it is the poor teaching skills of people who claim they know it but they dont even know it really. I ve gone through many tutorials but no one is able to explain as steve did it in a very simple, to the point and concise way

[@dyvaagna]

I think this is the best explanation about 'this' in the entire internet, good job! You're an amazing teacher, hands down. just wanna ask, if we change the setTimeout(()=>{...}) to setTimeout(function(){....}), 'this' will log Window object. Is it because of setTimeout is part of Window object so it changed the context of 'this'? Thankyou.

[@sashaikevich]

And at the end of the video, if you change line 10 to a normal function declaration, will the 'this' on line 11 refer to myFunc?

[@SteveGriffith-Prof3ssorSt3v3]

It will be referring to the window/global object. setTimeout( function( ){ console.log(this); }, 1000); In this bit of code, the function is being called asynchronously. The regular, non-arrow, function does not care where it was declared it cares how it was called. In what context was it called? Global / window. Now consider this version: setTimeout( (function(){ console.log(this) }).bind( box ), 1000 ); Here, we are providing a context for the function. "box" is the "this" context. The console will log out the box.

[@jasbindarsingh1640]

Hi steve, Can I bind fun2 'this' to 'a' context? bind inst working let a = { fun1: function(){ console.log(this); }, fun2: () => { console.log(this); } }

[@SteveGriffith-Prof3ssorSt3v3]

Arrow functions will not let you change the binding

[@jasbindarsingh1640]

@@SteveGriffith-Prof3ssorSt3v3 so is this a major disadvantage of using arrow functions

[@unboundborders]

Hi Steve, For some reason I am having trouble just getting the page to run with lite-server. Do you have a tutorial that explains what commands you need to use to get a HTML page up and running? I checked the HTML playlist and the JavaScript from the Start Playlist and I didn't see how you are launching the page. Thank you!

[@SteveGriffith-Prof3ssorSt3v3]

Here is a video I did on VSCode tips - kzbin.info/www/bejne/fKm1c52dicyomtk It includes one discussing the Live Server extension. This is how I launch pages

[@unboundborders]

Thanks!

[@elminaiusifova4852]

You are passing the context with "call", can we pass the context without call? Ex: myFunc(box) or myFunc(window)? Will the function see the passing context this way?

[@SteveGriffith-Prof3ssorSt3v3]

func.call( context ) and func.apply( context ) are the two ways to officially pass the context to the function. You can always pass any value to the function through a normal parameter. "the context" could be something that you are passing to the function to be used. HOWEVER, what you don't get is the ability to use the keyword "this" inside the function to refer to that context.

[@elminaiusifova4852]

Will THIS in arrow function always point to the global context? Are there any cases where it will point to the Who called this function ? What if that arrow function is super nested?

[@SteveGriffith-Prof3ssorSt3v3]

Arrow functions will always use the lexical scope. The scope of their surrounds, where the function was written. gist.github.com/prof3ssorSt3v3/a42ee8ba1cad64e08a503df43a4a8dc0 This GIST has an object with a bunch of methods being called with functions, arrow functions, and es6 shorthand method syntax. Then I am using a forEach loop to call an inner function to show were `this` points to the obj or to the global/window object. try running it either in the browser console or in the terminal with NodeJS to see the differences in action.

[@Red00022]

This is a bit like classes and subclasses

[@maitran1764]

I ran the following example codes from the MDN and everything worked fine: var obj = {a: 'Custom'}; var a = 'Global'; function whatsThis() { return this.a; } whatsThis(); // 'Global' whatsThis.call(obj); //'Custom' But when I change var a = 'Global' to let a = 'Global', whatsThis() becomes undefined in the console. Does changing var into let somehow affect the function's ability to access global variables?

[@SteveGriffith-Prof3ssorSt3v3]

The difference is that var not only creates a variable it also adds a property of the same name to the window/global object. So var a is also creating window.a.

[@maitran1764]

@@SteveGriffith-Prof3ssorSt3v3 Oh I see. Thank you very much!