What is “this” (JavaScript “this” simplified)

Femi Adisa
4 min readMar 12, 2021

--

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)

“this” used in a method; simba is swapped with this in the constructor method
1.1; “this” used in a method

when used in a function and alone (out of a function), this refers to the window object (basically your browser window)

“this” in a function and alone refers to the Window object
1.2; “this” in a function and alone

and in an object literal, this can refer to the object itself (see below)

“this” used in an object;
1.3; “this” used in an object

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

1.4; specifying properties by hand without the use of “this”

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!

--

--