Understanding the Keyword THIS in JavaScript

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

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

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

[@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

[@xiaosage]

comprehensive and explicit explanation !

[@ambientbackdrops9532]

Thank you, you have a gift for teaching.

[@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!

[@mkamalkayani]

Thanks. I really liked your way of explanation.

[@seanduignan294]

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

[@SteveGriffith-Prof3ssorSt3v3]

You got that right!

[@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

[@chesterxp508]

Another very cool tutorial !!!

[@web-dev01]

thanks Steve for your great work

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

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

[@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

[@howydasayed470]

thanks , great video as usual !

[@ocxigin9220]

Good job

[@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!

[@Red00022]

This is a bit like classes and subclasses