This Keyword In Javascript with 3 Easy Examples

“It will please some of you to know that I almost titled this article ‘WTF is this keyword?’

It will please the rest of you more to know that I had also struggled with this keyword.

By the time you make it through this article, this keyword will be one part of JavaScript you will never have to worry about again.

What is this keyword?

The JavaScript this keyword points to the object it belongs to

It has different values depending on where it is sitting in:

Concept #1– When it is sitting Inside a function or variable, this will point to the global object (Note- this keyword will be undefined in strict Mode)

Let’s understand it clearly by solving example-

Example #1 What happens if you try to access this keyword Outside of Function a()?

// this keyword here will refer to global window object

function a() {
    this.newvariable = 'hello developers';
    console.log(this);
}
// can we access this Outside of Function a()

console.log(newvariable); 

// Expected Output = hello developers

Yes, we can because function a() is pointing to the global object.

Concept #2– When it is sitting inside a method, this will point to the Object it is created inside.

Let’s understand it clearly by solving 2nd example-

Example #2 – What happens if we try to change the value of the object c from inside of methodx.

var c = {
       name: "i'm a property inside c object",
       methodx: function() {
       this.name = 'changed from inside of methodx'
       console.log(this)
}};

// Check if we have succesfully changed the value of the object from inside of method.

c.methodx(); 

// Expected output = 'changed from inside of methodx'

Concept #3– When it is sitting inside a method (Which is inside another method), this will point to the global object

Let’s understand it clearly by solving 3rd example-

Example #3- What happens if we try to the change c object name from methody which is inside methodx which is inside object c.

var c = {
       name: "i'm a property inside c object",
       methodx: function () {
       this.name = 'changed'
       console.log(this)
       
// Creating another methody inside methodx
         
       var methody = function() {
       this.name = 'setNewName';
       console.log(this);
       }}};   
// Now lets check if we are able to change it or not

console.log(this.name)
// No we weren't, Expected Output is 'global window object'

I know this example was confusing but remember that JavaScript is a programming language created by people like us.

They have decided how things should work, so we are tied to it.

Concept #4 (Bonus)

In HTML event handlers, this Points to the HTML element that received the event:

Let’s understand it by Example #4

<button onclick="this.style.display='none'">
  Click to Remove Me!
</button>
Upcoming Plan-

In the last week of 2019, I’ll start 10X your JS tutorial series.

But, before that, I Want to make sure I have published tutorials on each and every difficult and confusing JS Concepts.

Closing Notes- Memorize these 4 Important this keyword concepts:-

1- Inside a method, this points to the owner object.

2- Inside a function and variable, this points to the global object.

3- Inside an event, this points to the element that received the event.

4- call() and apply() can points this to any object. (Explained in my Next Blog)

Thanks for reading, If you still didn’t understand this keyword after reading this blog post, please ask questions in the comments below.

I will personally answer all the questions, or alternatively, you can Dm me on Facebook too.

If this post was helpful, help me back by clicking the Share button.

More Articles:-

The Ultimate Guide to become a full stack web developer in 3 easy step

7 Amazing Array Methods to Boost your Javascript Skills Today

3 weird ways to create javascript objects (Learn my tricks Now)

Who Else Wants to Clear confusion about Javascript Hoisting [Step-by-Step]

Read More About this here

Tanisk jha

Mission-Driven Self taught Software Developer with a passion for thoughtful UI Design, collaboration and writing.
Tanisk jha

Leave a Reply

Your email address will not be published. Required fields are marked *