this in functions in Javascript - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to log the value of this.name inside the function.

Javascript

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

Drag options to blanks, or click blank then click option'

A.

B->

C::

D,

Attempts:

3 left

💡 Hint

Common Mistakes

Using arrow (->) or double colon (::) instead of dot.

Forgetting to use any operator between this and name.

The dot operator (.) is used to access properties on an object via this inside a function.

2fill in blank

medium

Complete the code to correctly bind this inside the function using bind.

Javascript

const obj = { value: 42 };
function show() { console.log(this.value); }
const boundShow = show[1](obj);
boundShow();

Drag options to blanks, or click blank then click option'

A.set

B.call

C.bind

D.apply

Attempts:

3 left

💡 Hint

Common Mistakes

Using call or apply which invoke the function immediately.

Using a non-existent method like set.

The bind method creates a new function with this permanently set to the provided object.

3fill in blank

hard

Fix the error in the arrow function to correctly log this.name from the object.

Javascript

const person = {
  name: 'Bob',
  greet: () => { console.log(this[1]name); }
};
person.greet();

Drag options to blanks, or click blank then click option'

A,

B->

C::

D.

Attempts:

3 left

💡 Hint

Common Mistakes

Using arrow functions when needing object this.

Using wrong operators instead of dot.

Arrow functions do not have their own this. Here, this refers to the outer scope, not the object. Using dot is correct syntax but the function should not be arrow to access object this.

4fill in blank

hard

Fill both blanks to create a method that returns a function which logs this.count correctly.

Javascript

const counter = {
  count: 0,
  getIncrementer: function() {
    return function() { console.log(this[1]count); }.[2](this);
  }
};
const inc = counter.getIncrementer();
inc();

Drag options to blanks, or click blank then click option'

A.

B.call

C.bind

D.apply

Attempts:

3 left

💡 Hint

Common Mistakes

Using bind which returns a new function instead of invoking immediately.

Forgetting to bind or call this so this.count is undefined.

Inside the returned function, this.count accesses the count property. Using call(this) sets this correctly to the counter object.

5fill in blank

hard

Fill all three blanks to create an object method that uses an arrow function to log this.message after 1 second.

Javascript

const notifier = {
  message: 'Hello!',
  notify: function() {
    setTimeout(() => { console.log(this[1]message); }, [2]);
  },
  delay: [3]
};
notifier.notify();

Drag options to blanks, or click blank then click option'

A.

B1000

C500

D2000

Attempts:

3 left

💡 Hint

Common Mistakes

Using a regular function inside setTimeout which changes this.

Using wrong delay time or forgetting the dot operator.

The dot operator accesses the message property. The arrow function keeps this from the surrounding method. The delay time is set to 1000 milliseconds (1 second). The delay property is 500 but not used here.

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