DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 963,503 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Cover image for Learn 'this' Like Never before in JavaScriptβš™οΈ
Archit Sharma
Archit Sharma

Posted on

Learn 'this' Like Never before in JavaScriptβš™οΈ

If you've been using JavaScript, I'm sure you might have faced problems while using 'this' as well.
Everyone, from junior to senior developers, has had problems with the 'this' keyword at some point.

So, in this article, I'll explain the 'this' keyword in JavaScript so you never get confused again.

Before you learn about 'this' keyword, you should know about the "use strict" in JavaScript.

What is "use strict" in JavaScript?πŸ€”

It's a literal expression which is used to execute the code in "strict mode".

To Declare Strict Mode:

Strict mode is declared by including "use strict"; at the start of a script or function.

"use strict";
x = 5.47;       // This will cause an error because x was not declared
Enter fullscreen mode Exit fullscreen mode

I hope that you got an idea of what "use strict" is used for. If you want to learn more about strict mode you can read this.

Fact: React and other frameworks "use strict" mode By default

Now lets get back to this keyword.
In JavaScript, the 'this' keyword behaves slightly differently than in other languages. It also differs between strict and non-strict modes.
This is the reason I first introduced you to the strict mode.

Now, this keyword refers an object.

Global Context

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

In the global execution context (outside of any function), this refers to the global object in the Node.js and to the windows object for the Browser regardless of whether it is in strict mode or not.

Function context

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

showThis();
Enter fullscreen mode Exit fullscreen mode

For non strict mode, Inside a function this refers to the global object in the Node.js and to the windows object in the Browser.
For strict mode, this refers to the undefined as its default value.

When Function is inside Object

let obj = {
    name: 'myName',
    fun: function(){
        console.log(this);
    }
}

obj.fun();
Enter fullscreen mode Exit fullscreen mode

When you use this inside a function which is inside an object, this refers to the object itself. So you'll be able to access all the key-value in that object using this.
It's same for both strict and non-strict mode.

When Function is inside a Function which is inside an Object

let obj = {
    name: 'myName',
    fun: function(){
        function sec(){
            console.log(this);
        }
        sec();
    }
}

obj.fun();
Enter fullscreen mode Exit fullscreen mode

For non strict mode, this refers to the global object in the Node.js and to the windows object in the Browser.
For strict mode, this refers to the undefined as its default value.

Class context

Because classes are functions under the hood, the behaviour of this in both classes and functions is same. However, there are certain distinctions and limitations.

class Car {
  constructor(name) {
    this.myCar = name;
  }
}

x = new Car("Ford");
console.log(x.myCar);
Enter fullscreen mode Exit fullscreen mode

this is a regular object within a class function.

Here's a quick rundown of what we learned.

this Keyword in JavaScript

Thanks for reading this article, follow for more

Top comments (3)

Collapse
 
lukeshiru profile image
Luke Shiru

Pro-tip: Avoid this in the code you write, and be a happier developer while making people using the code you wrote happier as well.

Collapse
 
iarchitsharma profile image
Archit Sharma Author

haha nice tip, but at some point you have to use this

Collapse
 
lukeshiru profile image
Luke Shiru

Yup, is useful to know how to deal with this, but is also important to avoid it yourself, so you only use it when you have to deal with somebody else's code, while yours is better and easier to maintain.

Visualizing Promises and Async/Await 🀯

async await

☝️ Check out this all-time classic DEV post