What is “this” (JavaScript “this” simplified)
prerequisite knowledge: variables and functions
this post answers the following questions: What is “this”? Why is it helpful? How can I use it?
prologue
me: Hey little Will, let’s talk some code
will: what is this about?
me: funny you’d ask that; you know, this means an entirely different thing to me
will: yeah? what does it mean?
me: before we talk about this, let’s go over objects and their implementation
will: cool, what’s an object?
me: in JS, an object is anything that isn’t a primitive data type; JS primitive data types are string, number, bigint, boolean, undefined, symbol, and null
will: what about implementation?
me: implementation is the code that goes inside an object; think of an operating room where a surgeon opens up a part of a patient and starts working on that opened up part;
me: as developers, we put stuff (properties and methods) in objects (see image 1.1), for the sake of this convo, let’s think of implementation as all the code we put inside an object when working on it
will: what do those have to do with this?
me: this is a global variable whose default value changes based on where I am in a program, but it always references the owner object you are working in
me: for example, a surgeon might have many patients but when working on a patient, he/she can say “What is the name of this patient?” and get the name of the patient he/she is currently operating on (see image 1.3 for something similar)
will: cool! so this refers to the object I am working on?
me: in most cases, yes
what is this?
me: this can be seen as a variable that has different values based on where you access it; it usually refers to the parent object of where you’re using it. For example,
in a method (which is basically a function defined in an es6 class without the function keyword), this refers to the instance of that class (the object)
when used in a function and alone (out of a function), this refers to the window object (basically your browser window)
and in an object literal, this can refer to the object itself (see below)
why do we need this?
will: so, why do we need this?
me: very good question! the simplest answer I can give is that we need it to get some data that would be hard/impossible to get without the “this” keyword; for example, if we didn’t use this in the Animal constructor, we would have to manually specify all the attributes that simba has one by one
will: that doesn’t sound too bad
me: yeah, it doesn’t… until we realize that simba has more than a name, species, and gender — he also has a skin color, an age, etc and specifying these by hand would be a waste of time if we could specify it all at once. Also, there are other animals that need to be created, we wouldn’t want to specify their attributes all by hand now, would we?
will: yeah, doesn’t sound too much fun anymore
me: I think this actually makes working on large projects more fun than without it
How can I use this?
will: so, I guess I can use this anytime I want to access a Javascript object when working inside of it?
me: exactly, just like self in Ruby refers to the item itself, this in JS refers to that thing (object) itself
will: sounds simple enough
me: glad I could help!
Do you have any other questions? Google ’em
Got feedback? let me know in the comments below!
Happy Coding!
