this in functions in Javascript - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ Predict Output

intermediate

Output of this in a regular function call

What is the output of the following code snippet?

Javascript

function show() {
  return this.value;
}

const value = 10;
console.log(show());

A undefined

B 10

C ReferenceError

D null

💡 Hint

Think about what 'this' refers to in a regular function call in non-strict mode.

In a regular function call, 'this' refers to the global object (window in browsers). Since 'value' is declared with const and not attached to the global object, this.value is undefined.

❓ Predict Output

intermediate

this inside an arrow function

What will be logged to the console when this code runs?

Javascript

const obj = {
  value: 42,
  arrowFunc: () => this.value
};
console.log(obj.arrowFunc());

A undefined

B TypeError

C 42

D null

💡 Hint

Remember how arrow functions handle 'this' differently than regular functions.

Arrow functions do not have their own 'this'. They use 'this' from the surrounding scope, which here is the global scope. Since value is not defined on the global object, this.value is undefined.

❓ Predict Output

advanced

this in method called with call()

What is the output of this code?

Javascript

const obj1 = { value: 5 };
const obj2 = { value: 10 };

function getValue() {
  return this.value;
}

console.log(getValue.call(obj2));

A TypeError

B 10

C undefined

D 5

💡 Hint

The call() method sets 'this' explicitly.

The call() method calls the function with this set to the first argument. Here, this is obj2, so this.value is 10.

❓ Predict Output

advanced

this in nested functions

What will this code output?

Javascript

const obj = {
  value: 100,
  outer: function() {
    function inner() {
      return this.value;
    }
    return inner();
  }
};

console.log(obj.outer());

A 100

B TypeError

C undefined

D ReferenceError

💡 Hint

Consider what 'this' refers to inside the inner function.

The inner function is a regular function call, so this inside it refers to the global object, not obj. Since value is not defined globally, it returns undefined.

🧠 Conceptual

expert

Understanding this binding in event handlers

In the following code, what will be logged when the button is clicked?

Javascript

const button = document.createElement('button');
button.textContent = 'Click me';

const obj = {
  value: 50,
  handleClick: () => {
    console.log(this.value);
  }
};

button.addEventListener('click', obj.handleClick);
document.body.appendChild(button);

A null

B 50

C TypeError

D undefined

💡 Hint

Think about how arrow functions capture 'this' and what 'this' refers to in this context.

The arrow function handleClick does not have its own this. It uses this from the surrounding scope, which is the global scope here. Since value is not defined globally, it logs 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