this in functions in Javascript

Introduction

The this keyword helps you access the object that owns the current function. It lets functions know who called them.

When you want a function to work with the object that called it.

When you write methods inside objects and want to use object properties.

When you want to reuse the same function for different objects.

When you want to understand how JavaScript decides the context inside functions.

Syntax

Javascript

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

Inside a regular function, this usually refers to the object that called the function.

In the global scope or simple function calls, this can be undefined in strict mode or the global object otherwise.

Examples

Here, this inside greet refers to obj, so it prints 'Alice'.

Javascript

const obj = {
  name: 'Alice',
  greet: function() {
    console.log(this.name);
  }
};
obj.greet();

Calling showThis as a simple function prints undefined in strict mode or the global object otherwise.

Javascript

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

Here, greetFunc is called without an object, so this is undefined and this.name is undefined.

Javascript

const person = {
  name: 'Bob',
  greet() {
    console.log(`Hello, ${this.name}`);
  }
};

const greetFunc = person.greet;
greetFunc();

Sample Program

This program shows how this inside sayName refers to the user object, so it prints the user's name.

Javascript

const user = {
  name: 'Emma',
  sayName: function() {
    console.log(`My name is ${this.name}`);
  }
};

user.sayName();

Important Notes

Arrow functions do not have their own this. They use this from the surrounding code.

Using this inside event handlers or callbacks can behave differently depending on how the function is called.

Summary

this points to the object that calls the function.

Inside object methods, this helps access object properties.

Be careful: calling a function without an object can make this undefined.

Practice

1. What does this refer to inside a regular function called as obj.method()?

easy

A. The function itself

B. The global object (like window)

C. Undefined

D. The object obj that calls the method

Solution

1. Step 1: Understand how this works in method calls

   When a function is called as a method of an object, this points to that object.

2. Step 2: Apply to the example obj.method()

   Since method is called by obj, this inside method refers to obj.

3. Final Answer:

   The object obj that calls the method -> Option D

4. Quick Check:

   obj.method() means this = obj [OK]

Hint: Remember: this is the caller object in method calls [OK]

Common Mistakes:

• Thinking this is always global
• Confusing this with the function itself
• Assuming this is undefined in method calls

2. Which of the following is the correct way to define a method inside an object so that this refers to the object?

easy

A. const obj = { method: () => { console.log(this); } };

B. const obj = { method() => { console.log(this); } };

C. const obj = { method() { console.log(this); } };

D. const obj = { method: function() => { console.log(this); } };

Solution

1. Step 1: Understand function types and this

   Arrow functions do not have their own this; they inherit from the outer scope. Regular functions have their own this.

2. Step 2: Check each option

   A uses arrow function, so this is inherited from outer scope (global), not the object. B uses concise method syntax, which binds this to the object. C uses invalid syntax (cannot define concise method with arrow). D uses invalid syntax (function() => not valid).

3. Final Answer:

   const obj = { method() { console.log(this); } }; -> Option C

4. Quick Check:

   Use concise method syntax for object methods [OK]

Hint: Use concise method syntax for correct this in objects [OK]

Common Mistakes:

• Using arrow functions for object methods expecting this as object
• Attempting invalid concise arrow syntax like method() => {}
• Using invalid syntax like function() => {} inside object

3. What will be the output of the following code?

const obj = {
  name: 'Alice',
  greet() {
    function inner() {
      console.log(this.name);
    }
    inner();
  }
};
obj.greet();

medium

A. undefined

B. Error

C. Alice

D. null

Solution

1. Step 1: Analyze this inside inner function

   The function inner is a regular function called without an object, so this inside it is undefined in strict mode (or global object in non-strict).

2. Step 2: Check what this.name prints

   Since this is undefined, this.name is undefined, so console.log prints undefined.

3. Final Answer:

   undefined -> Option A

4. Quick Check:

   Inner function called alone: this = undefined [OK]

Hint: Inner functions called alone have this undefined [OK]

Common Mistakes:

• Assuming this inside inner function is the object
• Expecting 'Alice' to print
• Confusing arrow functions with regular functions

4. Identify the error in the following code and fix it so that this.name inside inner refers to obj.

const obj = {
  name: 'Bob',
  greet() {
    function inner() {
      console.log(this.name);
    }
    inner();
  }
};
obj.greet();

medium

A. Bind inner to this using inner.bind(this)()

B. All of the above

C. Assign const self = this and use self.name inside inner

D. Change inner to an arrow function

Solution

1. Step 1: Understand why this is wrong inside inner

   Because inner is a regular function called alone, this is undefined, not obj.

2. Step 2: Explore fixes to bind this correctly

   Change inner to an arrow function: Using arrow function for inner inherits this from greet, which is obj. Bind inner to this using inner.bind(this)(): Using inner.bind(this)() explicitly sets this to obj. Assign const self = this and use self.name inside inner: Saving this in self and using self.name works because self is accessible inside inner.

3. Step 3: Conclusion

   All three methods correctly fix the problem.

4. Final Answer:

   All of the above -> Option B

5. Quick Check:

   Bind or arrow or self variable fixes this [OK]

Hint: Use arrow, bind, or self variable to fix this in inner functions [OK]

Common Mistakes:

• Only trying one fix and missing others
• Not understanding arrow functions inherit this
• Forgetting to call bind method

5. You want to create an object counter with a method count that increases a number every second and logs it using this.value. Which code correctly keeps this referring to counter inside setInterval callback?

const counter = {
  value: 0,
  count() {
    setInterval(function() {
      this.value++;
      console.log(this.value);
    }, 1000);
  }
};
counter.count();

hard

A. All of the above

B. Bind this to the callback: setInterval(function() { ... }.bind(this), 1000);

C. Save const self = this before setInterval and use self.value inside callback

D. Replace the callback with an arrow function: setInterval(() => { this.value++; console.log(this.value); }, 1000);

Solution

1. Step 1: Identify the problem with this in setInterval

   The callback function is a regular function, so this inside it is not counter but undefined or global object.

2. Step 2: Explore solutions to keep this as counter

   Replace the callback with an arrow function: setInterval(() => { this.value++; console.log(this.value); }, 1000);: Arrow functions inherit this from count, so this.value works. Bind this to the callback: setInterval(function() { ... }.bind(this), 1000);: Using bind(this) explicitly sets this inside callback. Save const self = this before setInterval and use self.value inside callback: Saving this in self and using self.value works because self is accessible inside callback.

3. Step 3: Conclusion

   All three methods correctly keep this referring to counter.

4. Final Answer:

   All of the above -> Option A

5. Quick Check:

   Arrow, bind, or self variable all fix this in callbacks [OK]

Hint: Use arrow, bind, or self variable to keep this in callbacks [OK]

Common Mistakes:

• Using regular function without binding this
• Expecting this to be counter automatically
• Not saving this before callback