DEV Community

Roshan Kumar Badola
Roshan Kumar Badola

Posted on • Updated on

this in JavaScript.

this can be a confusing topic for a lot of us when it comes to JavaScript. And I am going to try to make it a bit more easier of understand and work with this in JavaScript for you.

this

Ok, lets start with this itself. In JavaScript, this is a keyword refers to the context of the code. Now, that context is defined based on what we are calling this and their execution context.

Execution Context refers to an environment in which JavaScript code is executed.

There are several ways to use this, So, let's look at what we get when call this by itself.

console.log(this)

when we run this line of code we get the Window object as output, but it will be global object in Node.js.

Window {window: Window, self: Window, document: document, name: '', location: Location, …}
this window object contains our window methods. We get this as output because in this case context for this is global.

this in function

this when called inside a function it refers to the global object by default even though function creates it's own execution context so,

function this_in_a_function() {
    console.log('this in a function', this);
}

this_in_a_function()

Enter fullscreen mode Exit fullscreen mode

Output:

Window {window: Window, self: Window, document: document, name: '', location: Location, …}

However, if strict mode "use strict" is used it will output undefined.

this in object

When used with object we will see that this will no longer refer to Window Object. That is because the value for this in function also depends on how it's called.

const person ={
    firstName: "John",
    lastName : "Doe",
    id       : 1234,
    getThis : function() {
      return this;
    }
};

console.log(person.getThis());
Enter fullscreen mode Exit fullscreen mode

Output:

{
  firstName: 'John',
  lastName: 'Doe',
  id: 1234,
  getThis: [Function: getThis]
}
Enter fullscreen mode Exit fullscreen mode

and because of that we can also use this to access object properties and methods.

const person = {
    firstName: "John",
    lastName : "Doe",
    id       : 1234,
    getFullName : function() {
      return this.firstName + ' ' + this.lastName;
    }
};

console.log(person.getFullName());
Enter fullscreen mode Exit fullscreen mode

Output:
John Doe

this in arrow functions

In arrow functions, this is set lexically. That's because the arrow function dose not make it's own execution context but rather inherits it from outer functions.

Generally it will mean that this also refers to Window Object if arrow function is defined in global scope and global object in Node.js.

const this_in_arrow = () => this

console.log(this_in_arrow())
Enter fullscreen mode Exit fullscreen mode

Output:
Window {window: Window, self: Window, document: document, name: '', location: Location, …}

but a more accurate example would be

function person(){
    name= 'Jhon'
    surname= 'doe'
    return (() => this.name)()

}

console.log(person());
Enter fullscreen mode Exit fullscreen mode

Output:
Jhon

In this example this is scoped to the function person hence the output.

Let's see what happens if we do this same thing with a objects.

const person = {
    firstName: 'Jhon',
    lastName: 'Doe',
    sayName: () => this.firstName
}

console.log(person.sayName());
Enter fullscreen mode Exit fullscreen mode

Output:
undefined

We get undefined. Now, that's because object does not have it's own execution context and arrow function define this based on their environment. To fix this we can wrap our arrow function in another regular function and use that to pass on the context for this to our arrow function. Also this in an arrow function within an object refers to the global context.

const person = {
    firstName: 'Jhon',
    lastName: 'Doe',
    sayName:function(){ 
            return () => this.firstName
                      }
}

console.log(person.sayName()());
Enter fullscreen mode Exit fullscreen mode

Jhon

I hope this cleared your doubts about this in JavaScript and helps you in journey to learn JavaScript.

Top comments (1)

Collapse
 
nautyy9 profile image
NITIN NAUTIYAL

great article