DEV Community

Cover image for Understanding the "this" keyword as a newbie!
ProCode
ProCode

Posted on

Understanding the "this" keyword as a newbie!

Hey curious people👋, this is a short article about some concepts related to OOP: the this keyword, I hope this will be helpful to you.

Few days ago I posted a poll on twitter about some topics I should write next, 2 out of 5 people wanted an article on this topic, if it's helping 2 people I'll still write it!😄. If you like my articles, consider buying me a coffee so that I can continue to do this😊.

Let's Start!

this == 👉

it is used for referring to specific Object of a Class. We'll see what that means but before that you should know that this can be used in many ways in JavaScript, it's a bit different than this keyword in other languages. Usually in JavaScript the value of this is determined by how the function in which it is, called. Yeah I know Welcome to the weired an wonderful world of JavaScript!😅.

You'll see use of this keyword in classes, for example:

The above code is a typical example of writing a class and creating objects from it. Run this code in your IDE to see how it works. But our focus today is on the this.variables. Why are we writing the this. before every variable? Can't we write only the variables?
Well the answer is we use this. when we want some variables to be object specific, for example in the person class we have member variables like name , age , height. We want every object of the class to have their specific/individual heights, age and names. That's why we use this. before these member variables.
It simply means that these variables are used to define unique properties of unique objects/Instances of the class, and this. helps us to tell the computer that these properties belongs to "this" particular object. That's why I like to think of it as an equivalent to 👉 emoji.

illustration for this keyword

this in general

In general, it is used to refer to the global object, (when we are not manually making it refer to something else. So in a browser it should refer to the global window object. So this == window is expected to be true. And in Node it should be equal to global.

binding this with objects with call() and apply()

If you run this code you'll observe that in the first call of returnValue() it prints the contents of the global value, but in the next two calls it will log the object specific content in the console. Remember, I told you where this will point to depends on how the function it is in, is called. There is actually a lot more you can do with this, if you wanna explore more I would suggest you take a look at the MDN docs for this. I hope you understand the basics of it by now.

Who am I?

I am a self-taught coder, Coding my life.
If you like my educational blogs Consider buying me a coffee😊 or support me in patreon so that I can continue spreading education for free.

I post random, stupid and fun analogies about coding concepts on twitter. Here's one of them about this

See you in the next one!

Top comments (0)