JS “this” and Function References – What is it all about?

00:00:01 welcome to this video in this video I
00:00:04 want to talk about something or tackle
00:00:06 something which I saw in a lot of
00:00:07 comments and also in some of my courses
00:00:09 that it can be hard to grasp to
00:00:11 understand and that is the usage of the
00:00:14 this keyword in JavaScript and why it
00:00:17 can behave strangely in some cases and
00:00:19 it's also that when you call a function
00:00:22 or a method sometimes you omit the
00:00:25 parentheses after the function name and
00:00:28 I want to talk about that queue and
00:00:30 explain when you call a function with
00:00:32 parentheses and when you use it without
00:00:35 these so two important things which I
00:00:37 see that they can lead to a lot of
00:00:40 confusion hopefully this video can
00:00:42 clarify these things
00:00:47 now for this video we need a tiny demo
00:00:50 project to get started and you can find
00:00:52 it attached to this video so to say
00:00:54 below the video you'll find a link to a
00:00:56 github repository with this very simple
00:00:59 dummy project there we got a HTML file
00:01:02 with a html5 skeleton in the body I got
00:01:06 a button saying add name
00:01:08 I got an unordered list with no content
00:01:10 but with that ID of names and I'm
00:01:13 importing my app.js
00:01:15 script which is this script of course in
00:01:17 there we got an error which we'll fix of
00:01:19 course in this video and besides that we
00:01:22 get this code now here I'm using
00:01:24 JavaScript classes in case you're not
00:01:26 used to using classes in JavaScript you
00:01:29 probably know constructor functions
00:01:32 constructor functions are normal
00:01:34 functions which you can call to create
00:01:36 new object and initialize them with some
00:01:38 properties and methods so I'm talking
00:01:40 about object orientated JavaScript
00:01:42 development and we need objects to
00:01:45 understand and use the this keyword that
00:01:47 is why I opted for the next-gen syntax
00:01:50 using that es6 feature of classes now
00:01:53 you can also take my es6 course and all
00:01:56 my accelerated JavaScript first fewer
00:01:58 and more about constructor functions and
00:02:00 in the year six course you'll learn
00:02:01 about classes here I assume you know
00:02:04 what classes do in the end they serve as
00:02:06 blueprints for us to create new objects
00:02:09 we do that with the new keyword this
00:02:11 creates a new object in this case we
00:02:13 store it in Gen and then don't do
00:02:15 anything with that object then because
00:02:17 name generator' which is the blueprint
00:02:19 or the class for that object I'm
00:02:21 creating has a constructor which gets
00:02:23 called when I call new and then the code
00:02:25 and here basically just gets a reference
00:02:27 to my button by using the button tag as
00:02:30 a selector and then I attach the event
00:02:32 listener for the click event and then
00:02:34 we'll need to fill this blank to tell
00:02:37 JavaScript which code to execute when a
00:02:40 click occurs then I also get a method in
00:02:43 this class here a method is just a
00:02:46 function in a class you could say it's
00:02:48 called add name and in there I create a
00:02:51 new instance off the name field class so
00:02:54 I create a new object again I don't do
00:02:56 anything with that object but one thing
00:02:59 I do is I create
00:03:00 here we get a constructor and in that
00:03:03 constructor I simply create a new list
00:03:04 item I then whoops set some text to that
00:03:09 list item the text is the argument I'm
00:03:11 getting here essentially the name which
00:03:14 I want to output and the name is passed
00:03:16 here right now it's always max I'll
00:03:18 change this and then I get a reference
00:03:21 to my unordered list with that ID
00:03:24 selector using that names ID here and I
00:03:27 add that name now let's make this work
00:03:32 by first of all removing these free
00:03:34 question marks and here I obviously want
00:03:37 to call add name I want to execute that
00:03:39 add name method now for this we already
00:03:42 need to use the two things this video is
00:03:44 about this and we also need to use or
00:03:49 call a function in a special way you
00:03:51 could say because here I want to execute
00:03:54 add name and you could think we just
00:03:56 specify add name like this this would be
00:03:59 wrong due to two reasons first of all if
00:04:03 we specify like this JavaScript would
00:04:05 look for a variable called add name or a
00:04:08 function called add name in the scope of

00:04:11 this constructor and if it doesn't find
00:04:14 it there in the global scope in the
00:04:16 overall file you could say in the on the
00:04:18 whole window to which this script is
00:04:21 attached now we got no add name variable
00:04:24 or function in the constructor and we
00:04:26 also got anon in the overall file or
00:04:28 anywhere else in this app so this will
00:04:30 not work and I can prove this to you if
00:04:32 we save that and I open my developer
00:04:34 tools here and I reload this page we
00:04:37 already see add name is not defined
00:04:40 because it doesn't find it because a
00:04:43 method what we have here is attached to
00:04:46 this object so to this class and
00:04:48 therefore to the object we create based
00:04:50 on the class if we want to tell
00:04:52 JavaScript that I want to access
00:04:55 function that is attached to the class
00:04:57 so to say we need that special this
00:05:00 keyword this essentially refers Judah
00:05:03 object the code is in so here this line
00:05:07 of code is in this object in the name
00:05:09 generator so if you want to refer to
00:05:11 anything else that is attached to the
00:05:13 name generator like
00:05:14 at name we need to prepend this and then
00:05:17 dot because this essentially gives us
00:05:20 access to this object and that we can
00:05:22 call methods or access properties on
00:05:24 that object with the dot notation so ad
00:05:27 name now it calls dysfunction on this
00:05:30 object this is how we can use this we're
00:05:33 still not there though if I save this
00:05:36 and I reload hmm I get max here without
00:05:40 me touching that button on the other end
00:05:42 if I do click the button nothing happens
00:05:44 and we also get no error which makes
00:05:47 that super hard to debug of course now
00:05:50 the problem we got here is this function
00:05:53 gets executed immediately and why is
00:05:57 that because I have parentheses here
00:06:00 what happens is JavaScript reads that
00:06:03 code from top to bottom and it does read
00:06:06 and parse that code when the script gets
00:06:08 first executed which happens when the
00:06:11 browser parses this HTML file and
00:06:13 reaches the script import it then
00:06:15 immediately goes to the script file and
00:06:17 parses dead this is important because
00:06:19 this allows us to start our scripts when
00:06:22 the page is loaded and load everything
00:06:23 into memory and let the browser do its
00:06:26 job however as it goes through that file
00:06:30 it all defines this line and here what I
00:06:34 do is I simply execute a function this
00:06:37 is how I execute a function right I use
00:06:39 the function name and the fact that it's
00:06:41 a method here because it's attached to a
00:06:43 class it doesn't change that I use the
00:06:45 function or method name I add
00:06:47 parentheses I could pass any arguments
00:06:50 if that function would accept any and
00:06:52 we're done this executes a function the
00:06:55 problem is here I don't want to execute
00:06:58 it immediately when I wanted to in
00:06:59 status I just want to tell JavaScript
00:07:02 that it should register this event
00:07:05 listener and eventually execute this
00:07:08 function when that click occurs so not
00:07:11 immediately only when that click occurs
00:07:13 and to do that I remove these
00:07:16 parentheses so the two parentheses I had
00:07:20 after add name if I now save this and I
00:07:23 reload we don't see Mac's right from the
00:07:25 start but if I click the button
00:07:28 now I'm adding my list items now why is
00:07:31 that because my right now what I'm doing
00:07:34 is I'm just passing a reference to my
00:07:37 function so like an address you could
00:07:39 say to that event listener so I'm
00:07:42 basically just telling JavaScript hey
00:07:44 here is the address of the function or
00:07:47 method you should execute when they
00:07:50 click occurs so that you know where to
00:07:52 find it when you need to call it because
00:07:54 we don't call that function on our own
00:07:57 JavaScript does that so to say the
00:07:59 browser does that it does that when the
00:08:02 click occurs that is exactly what we're
00:08:04 setting up here so we just passed the
00:08:06 address to the function with parentheses
00:08:09 like this we would execute it
00:08:11 immediately we don't want to do that
00:08:13 therefore without parentheses we just
00:08:17 passed the reference the address of the
00:08:19 function to the code which should be
00:08:21 aware of it and which should execute it
00:08:23 when the time is used so when we click
00:08:25 this is the important concept here that

00:08:28 we're just passing the reference that
00:08:30 we're just passing the address to the
00:08:32 function and this is perfectly valid and
00:08:34 normal JavaScript code this is no
00:08:36 workaround or trick or a hack or
00:08:37 anything like that this is a normal way
00:08:39 of doing that now this is working
00:08:43 now let's tweak that code a little bit
00:08:45 because this can actually behave
00:08:47 strangely right now it doesn't but it
00:08:49 can let's say that in this class here we
00:08:53 want to manage a list of names and cycle
00:08:57 through these names so we could have
00:08:59 something like names and that is an
00:09:02 array let's say and in there i got max I
00:09:06 got my colleague menu and I got an ax so
00:09:09 I got these three names and my idea is
00:09:11 that for every click I want to output a
00:09:13 different name now to do that I need to
00:09:16 get access to my name's an add name
00:09:18 because that is ultimately where I pass
00:09:20 the name – name field now obviously one
00:09:24 easy workaround would be to simply move
00:09:25 that constant down there but let's
00:09:28 pretend we need that in other places of
00:09:30 this name generator class – in that case
00:09:34 I want to manage it globally simply like
00:09:37 that method is available from anywhere
00:09:39 in this class – with this
00:09:41 I want to make my name's available from
00:09:44 anywhere in this class and therefore I
00:09:46 can create a property of field named
00:09:50 names and I do this by adding this dot
00:09:52 at the beginning and what this does is
00:09:54 it's now not a constant or variable
00:09:57 anymore instead you could say it's a
00:09:59 variable attached to this class a so
00:10:02 called property or field so now this
00:10:05 names can be used from anywhere inside
00:10:08 this class and by the way although only
00:10:11 instantiated object there we can call
00:10:14 add name because it's part of the class
00:10:17 and we can access names because it's
00:10:19 part of that class due to that this
00:10:21 keyword so this really combines or
00:10:25 attaches things to the entire class and
00:10:27 therefore to the entire object which
00:10:29 gets created and what this allows me to
00:10:31 do is I can now access this names down
00:10:35 there and now here an add name I'm
00:10:38 referring to my array of names which I'm
00:10:40 setting up in a constructor and this is
00:10:42 how we initialize a property or field in
00:10:45 a constructor and how we then use it
00:10:46 somewhere else
00:10:47 however I of course don't just want to
00:10:50 use the entire array down there I want
00:10:52 to cycle through my names so add another
00:10:54 property and I'll name it current name
00:10:56 the names of these properties are of
00:10:59 course up to you and I'll set this equal
00:11:01 to a number zero because index starts at
00:11:05 index zero and I want to start with name
00:11:07 first because now what I can do is I can
00:11:09 access the first element with this
00:11:11 current name so current name is null is
00:11:14 zero initially so I access the first
00:11:17 element in my array here down there
00:11:19 first array element is Max and I passed
00:11:22 that name field now of course I want to
00:11:24 change current name with every click so
00:11:27 after creating the name field I can set
00:11:30 current name to current name plus one
00:11:33 with that plus plus shortcut we only got
00:11:36 three elements in the array so what I
00:11:38 want to check here is if this current
00:11:42 name is greater than this names length
00:11:47 then I need to reset it because then we
00:11:51 exceeded the array now actually this is
00:11:54 not
00:11:55 correct check because the length of this
00:11:58 array will be free and I actually
00:12:00 already exceeded or exhausted the entire
00:12:03 array if current name is two because the
00:12:06 index starts at zero if current name is
00:12:08 two will have extracted the name Ana so
00:12:11 therefore I actually want to convert
00:12:13 this to greater than or equal to length
00:12:15 length is free and if we incremented
00:12:18 current name to free we know we don't
00:12:20 have a element for that
00:12:21 so let's reset it now let's see if that
00:12:25 works if I reload and I click add name
00:12:28 hmm I get an error and the error is that
00:12:31 I cannot read the property and the find
00:12:33 of undefined and it occurs in line 19
00:12:37 now line 19 is this line where I try to
00:12:40 use names and current name and do you
00:12:43 have any idea what's the issue here now
00:12:47 in theory that code should work but now

00:12:49 we got a special thing of the this
00:12:52 keyword this does not always refer to
00:12:57 the surrounding object so to say to the
00:13:00 class it's generally what it refers to
00:13:04 you could say in most cases but actually
00:13:07 this is to find a bit differently in
00:13:08 JavaScript this refers to whoever called
00:13:14 the function in which you use this so an
00:13:18 add name we're using this and now who
00:13:21 did call or what's responsible for
00:13:23 executing this function this is not this
00:13:26 class indirectly it is but not directly
00:13:29 directly the responsible thing is our
00:13:33 button event here and we can show this
00:13:36 by console logging this let's look into
00:13:39 this let's see what this is when we
00:13:41 execute add name if I click here we see
00:13:44 it's the button so the button is this
00:13:48 here and that is the case because this
00:13:52 event listener and therefore the button
00:13:55 is executing our function when we click
00:13:58 we pass the address to the function to
00:14:01 the button or to the event listener and
00:14:03 we say execute the function for us when
00:14:06 a click occurs and then this simple
00:14:09 first to the button this is how it works
00:14:10 in JavaScript it's not always the object
00:14:13 in which you write your code it's the
00:14:15 thing which calls your code which
00:14:16 executes your code you could say and
00:14:18 that method gets executed by the button
00:14:20 when a click occurs just to prove this
00:14:24 if I console.log this in a constructor
00:14:27 here then we see there it's referring to
00:14:31 the name generator object to the class
00:14:33 to the constructor function and that is
00:14:36 the case because this code here is not
00:14:39 executed by the button or anything like
00:14:41 that it's simply parsed by JavaScript
00:14:43 from top to bottom and therefore this
00:14:45 then refers to the class to the object
00:14:47 that surrounds it this can be hard to
00:14:50 understand and the end it is just
00:14:52 something you can memorize this refers
00:14:54 to what's executing the code and here
00:14:57 the so here in the constructor the what
00:14:59 is executing the code is simply just
00:15:02 well here this line in the end this is
00:15:04 calling the constructor and therefore
00:15:06 here we call the code and this in here
00:15:10 refers to the constructor now for add
00:15:14 name the button calls add name and this
00:15:16 then refers to the button and not to
00:15:19 this class anymore on the other hand if
00:15:21 we would call add name here directly and
00:15:24 not wait for a button click so we
00:15:26 executed the constructor here and I
00:15:29 reload then you see it works and this
00:15:31 actually also refers to the name
00:15:33 generator the reason for this is that we
00:15:34 again execute the code in the scope of
00:15:37 this constructor therefore the
00:15:39 constructor and therefore the class is
00:15:41 executing this line so this refers to
00:15:43 who executed it and that is our
00:15:46 constructor and therefore the class this
00:15:48 is how this works now how can we change
00:15:51 that behavior one way of changing it is
00:15:55 to use a special method we can call and
00:15:58 that is a method we can call on any
00:16:00 function it's the bind function bind
00:16:04 actually allows us to tell JavaScript
00:16:06 what this should be referring to in the
00:16:10 function that will eventually get
00:16:12 executed so born still does not
00:16:14 immediately execute the function we keep
00:16:17 that behavior of just passing the
00:16:18 address but we configured a function for
00:16:21 the time when it
00:16:22 we'll get executed so to say and we do
00:16:24 so with the first argument by telling it
00:16:26 what should this refer to in the
00:16:30 function when it gets executed in the
00:16:32 future no matter who executes it
00:16:34 and if I find this year I'm telling
00:16:37 JavaScript that this incite this method
00:16:40 should refer to the same thing this
00:16:43 refers to in a constructor and as we
00:16:46 just saw with console.log in the
00:16:48 constructor this refers to the class and
00:16:51 not to the button so here I'm telling
00:16:54 JavaScript no matter who executes this
00:16:57 add name this inside of that name should
00:17:01 always refer to this in the constructor
00:17:05 to whatever this is and this and the
00:17:07 constructor simply is our class because
00:17:09 we're calling our constructor down there
00:17:12 this is one way of ensuring that this
00:17:15 code down there will work if I now save
00:17:18 this and I reload you see I can cycle

00:17:22 through my names and output them there
00:17:24 and now this works as intended and I
00:17:26 know that this can be hard to wrap your
00:17:28 head around it's a special thing and in
00:17:30 the end if you encounter any issues with
00:17:33 you using this and suddenly it doesn't
00:17:35 work check if your may be calling your
00:17:39 function indirectly through some event
00:17:41 listener or anything like that and
00:17:43 therefore this and a function that gets
00:17:45 executed might not be referring to your
00:17:47 object anymore now when our way of
00:17:51 solving this by the way is that you pass
00:17:53 an anonymous function here and that
00:17:56 anonymous function has to be an arrow
00:17:57 function let's first of all use a normal
00:17:59 anonymous function so I have I define a
00:18:02 function in place this function here is
00:18:05 not executed immediately it's just a
00:18:08 find and it will still be executed by
00:18:10 the click listener and in there I can of
00:18:12 course call add name this add name like
00:18:16 this now this line again will not be
00:18:18 executed immediately
00:18:19 because this is executed immediately but
00:18:22 the code in this function is not instead
00:18:24 this code being executed immediately
00:18:26 just registers the function in memory
00:18:28 and passes it to the event listener so
00:18:31 if I save this you see nothing gets
00:18:33 rendered so this add name is not
00:18:36 executed immediately but clicking on add
00:18:38 name gives us another issue that add
00:18:42 name this add name is not a function and
00:18:44 the reason for this is that again this
00:18:46 in here in this anonymous function will
00:18:49 not refer to or class but to the button
00:18:53 because essentially we just did the same
00:18:55 with that before before using bind now
00:18:58 when using an anonymous arrow function
00:19:01 which is all the next generation
00:19:03 JavaScript syntax introduced with es6
00:19:05 then this changes now if I save this in
00:19:08 a reload it works
00:19:11 and the reason for that is that arrow
00:19:13 functions specifically solve that
00:19:16 problem of this behaving differently
00:19:19 because often you don't want it to
00:19:21 behave differently and therefore arrow
00:19:23 functions were introduced to basically
00:19:25 keep the context of this or the
00:19:28 reference of this so if you use an arrow
00:19:31 function here this will refer to the
00:19:34 exact same thing it would refer to if it
00:19:36 were used outside of that arrow function
00:19:38 this is the idea behind them and
00:19:40 therefore now this and here refers to
00:19:42 the constructor now we call ad name on
00:19:45 this so on our constructor and therefore
00:19:48 in the function in ad name this refers
00:19:51 to called it who called it well
00:19:53 our constructor so this inside here
00:19:56 still refers to our constructor to our
00:19:58 class a lot of mind yoga here I guess
00:20:02 but really something which helps you a
00:20:04 lot once you wrap your head around and
00:20:06 really something I also encourage you to
00:20:08 just play around with you got the code
00:20:10 you got the finished code to below the
00:20:12 video and I hope that this was helpful
00:20:13 see you in future videos hopefully bye

You may also like