What this keyword represents in Javascript - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ Predict Output

intermediate

Output of this in a regular function

What is the output of the following code when calling obj.show()?

Javascript

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

A "Alice"

B undefined

C ReferenceError

D "obj"

💡 Hint

Inside an object method, this refers to the object itself.

When a function is called as a method of an object, this refers to that object. So this.name is obj.name, which is "Alice".

❓ Predict Output

intermediate

Value of this in arrow function inside object

What will be logged when calling obj.show() in this code?

Javascript

const obj = {
  name: 'Bob',
  show: () => {
    console.log(this.name);
  }
};
obj.show();

A "obj"

B "Bob"

C undefined

D ReferenceError

💡 Hint

Arrow functions do not have their own this.

Arrow functions inherit this from their surrounding scope. Here, this is not obj, so this.name is undefined.

❓ Predict Output

advanced

this inside event listener function

What does this refer to inside the event listener function in this code?

Javascript

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

button.addEventListener('click', function() {
  console.log(this);
});

A The button element that was clicked

B The global window object

C undefined

D The document object

💡 Hint

In event listeners, this refers to the element the listener is attached to.

In a regular function used as an event listener, this points to the element that received the event, here the button.

❓ Predict Output

advanced

this in class method with setTimeout

What will be logged when calling obj.delayedShow()?

Javascript

class Person {
  constructor(name) {
    this.name = name;
  }
  delayedShow() {
    setTimeout(function() {
      console.log(this.name);
    }, 100);
  }
}
const obj = new Person('Carol');
obj.delayedShow();

A ReferenceError

B undefined

C "Carol"

D TypeError

💡 Hint

Regular functions inside setTimeout have this as the global object or undefined in strict mode.

The function inside setTimeout is a regular function, so this is not the class instance. It is undefined in strict mode, so this.name is undefined.

🧠 Conceptual

expert

Understanding this binding with call, apply, and bind

Given the code below, which option correctly shows the output of greet.call(person, 'Hello')?

Javascript

function greet(greeting) {
  return `${greeting}, my name is ${this.name}`;
}
const person = { name: 'Dave' };

A TypeError

B "Hello, my name is greet"

C "Hello, my name is undefined"

D "Hello, my name is Dave"

💡 Hint

call sets this explicitly to the first argument.

The call method calls the function with this set to person. So this.name is "Dave".