DEV Community

Cover image for What is 'this' ? 😳
Mayank Kumar
Mayank Kumar

Posted on

What is 'this' ? 😳

This 😭

The this keyword can lead to some headaches in JavaScript - this blog hopefully acts as a remedy.

hi

this refers to different things, depending on where it's used and how (if used in a function) a function is called !

Generally, this refers to the "thing" which called a function. That can be the global context, an object or some bound data/ object (e.g. when the browser binds this to the button that triggered a click event).

1) this in Global Context (i.e. outside of any function)

function something() { ... }

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

// logs global object (window in browser) - ALWAYS (also in strict mode)! 🙌

2) this in a Function (non-Arrow) - Called in the global context

function something() { 
    console.log(this);
}

something(); 
Enter fullscreen mode Exit fullscreen mode

// logs global object (window in browser) in non-strict mode, undefined in strict mode 🙌

3) this in an Arrow-Function - Called in the global context

const something = () => { 
    console.log(this);
}

something(); 
Enter fullscreen mode Exit fullscreen mode

// logs global object (window in browser) - ALWAYS (also in strict mode)! 🙌

4) this in a Method (non-Arrow) - Called on an object

const person = { 
    name: 'Mayank',
    greet: function() { // or use method shorthand: greet() { ... }
        console.log(this.name);
    }
};

person.greet(); 
Enter fullscreen mode Exit fullscreen mode

// logs 'Max', "this" refers to the person object 🙌

5) this in a Method (Arrow Function) - Called on an object

const person = { 
    name: 'Max',
    greet: () => {
        console.log(this.name);
    }
};

person.greet();
Enter fullscreen mode Exit fullscreen mode

// logs nothing (or some global name on window object), "this" refers to global (window) object, even in strict mode 🙌

If in doubt, a console.log(this); can always help you find out what this is referring to at the moment!

image

HAPPY CODING 👨‍💻

Discussion (2)

Collapse
blackjyn profile image
ZVHR El Ekhsaan

thats why we should NEVER use plain JS for Enterprise Apps.
Use proven JS frameworks with TypeScript instead

Collapse
mayank0508 profile image
Mayank Kumar Author

I agree 😭🙌