Understanding the "this" keyword as a newbie!
Tags: javascript, codenewbie, this, conceptblogs
Published: 2020-05-05 10:43:10

---
title: Understanding the "this" keyword as a newbie!
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/polgab14ddh2f42vx9po.jpg
published: true
description: I hope you'll have a clear understanding of "this" keyword after reading this article.
tags: JavaScript, CodeNewbies, this, Concept Blogs
series: Concept Blogs
---
Hey curious people👋, this is a short article about some concepts related to OOP: the <code>this</code> 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](buymeacoff.ee/ProCode) so that I can continue to do this😊.

```
Let's Start!
```

# <code>this</code> == 👉

<code>it is used for referring to specific Object of a Class</code>. We'll see what that means but before that you should know that <code>this</code> can be used in many ways in JavaScript, it's a bit different than <code>this</code> keyword in other languages. Usually in JavaScript the value of <code>this</code> 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:

{% codepen https://codepen.io/procode1/pen/xxwpXGx default-tab=js %}

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 <code>this.variables</code>. Why are we writing the <code>this.</code> before every variable? Can't we write only the variables? 
Well the answer is we use <code>this.</code> when we want some variables to be object specific, for example in the <code>person</code> class we have member variables like <code> name , age , height</code>. We want every object of the class to have their specific/individual heights, age and names. That's why we use <code>this.</code> before these member variables.
It simply means that these variables are used to define unique properties of unique objects/Instances of the class, and <code>this.</code> 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](https://dev-to-uploads.s3.amazonaws.com/i/7o8onk7gs0q9m3rmqhcc.jpg)

#<code>this</code> 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 <code>window</code> object. So <code>this == window</code> is expected to be <code>true</code>. And in <code>Node</code> it should be equal to <code>global</code>.

#binding <code>this</code> with objects with <code>call() and apply()</code>

{% codepen https://codepen.io/procode1/pen/xxwpXqw 
 default-tab=js %}

If you run this code you'll observe that in the first call of <code>returnValue()</code> it prints the contents of the global <code>value</code>, but in the next two calls it will log the object specific content in the console. Remember, I told you where <code>this</code> 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](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/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😊](buymeacoff.ee/ProCode) or support me in [patreon](https://www.patreon.com/Procoder1?fan_landing=true) 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 <code>this</code>
{% twitter 1247147737247657986 %}

<b>See you in the next one!</b>