DEV Community

Cover image for What is "this" in javascript
Rakshith Bellare
Rakshith Bellare

Posted on

2 1

What is "this" in javascript

In this post we will explore what this keyword refers under various conditions and there by understand the keyword and how it works in javascript.

The this keyword can point to

  • The object when referenced within the obejcts method.
  • The window object - when referenced within a function.
  • The instance of the object when the new keyword is used.
  • The object when arrow function is used`

this within method of an object - no arrow function

```javascript
const obj = {
    name: "obj",
    printName() {
        console.log(this.name);
    },
    printObj() {
        console.log(this);
    }
}
obj.printName(); // obj
obj.printObj(); // {name: "obj", printName: ƒ, printObj: ƒ}
```

this within method of an object - arrow function

The value of this in an arrow function is always the value of this in the parent non arrow function.

```javascript
const obj = {
    name: "obj",
    printObj: () => {
        console.log(this); // this refers to the window
    }
}
obj.printObj() // Window {window: Window, self: Window, document: document, name: "", location: Location, …}
```

this within function body

```javascript
function greet() {
    console.log(this);  
}
greet(); // Window {window: Window, self: Window, document: document, name: "", location: Location, …}
```

this when new keyword is used

```javascript
function Game(inTitle) {
    this.title = inTitle;
    console.log(this); // Game {title: "pong"}
}

const game = new Game("pong");
```

this within callback in a method of an object - no arrow function

```javascript
const fruits = {
    name: "fruits",
    fruits: ["apple", "mango", "banana"],
    printFruits() {
        console.log(this); // {name: "fruits", fruits: Array(3), printFruits: ƒ}
        this.fruits.forEach(function(fruit) {
            console.log(this); // Window {window: Window, self: Window, document: document, name: "", location: Location, …} * 3 times
        })
    }
}

fruits.printFruits();
```

this within callback in a method of an object - arrow function

```javascript
const fruits = {
    name: "fruits",
    fruits: ["apple", "mango", "banana"],
    printFruits() {
        console.log(this); // {name: "fruits", fruits: Array(3), printFruits: ƒ}
        this.fruits.forEach((fruit) => {
            console.log(this); // {name: "fruits", fruits: Array(3), printFruits: ƒ} * 3 times
        })
    }
}

fruits.printFruits();
```

Image of Docusign

🛠️ Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more

Top comments (0)

AWS Security LIVE!

Join us for AWS Security LIVE!

Discover the future of cloud security. Tune in live for trends, tips, and solutions from AWS and AWS Partners.

Learn More