Why this in functions in Javascript? - Purpose & Use Cases

The Big Idea

Discover how a single word, <code>this</code>, can make your code smarter and simpler!

The Scenario

Imagine you have many buttons on a webpage, and you want each button to show its own label when clicked. Without a way to refer to the button itself inside the click code, you'd have to write separate code for each button manually.

The Problem

Writing separate code for each button is slow and boring. If you add more buttons, you must write even more code. It's easy to make mistakes, like showing the wrong label or forgetting to update some buttons.

The Solution

The this keyword inside functions lets you refer to the object that called the function. This means one function can work for many buttons, each knowing which one was clicked, without extra code.

Before vs After

✗ Before

button1.onclick = function() { alert('Button 1'); };
button2.onclick = function() { alert('Button 2'); };

✓ After

function showLabel() { alert(this.label); }
button1.label = 'Button 1';
button2.label = 'Button 2';
button1.onclick = showLabel;
button2.onclick = showLabel;

What It Enables

Using this makes your code flexible and reusable, so one function can handle many objects easily.

Real Life Example

When you click on different items in a menu, each item can show its own details using the same function that uses this to know which item was clicked.

Key Takeaways

this helps functions know who called them.

It saves time by avoiding repeated code for similar tasks.

It makes your code easier to manage and less error-prone.

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