this in objects in Javascript - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ Predict Output

intermediate

What is the output of this code?

Consider the following JavaScript code. What will be logged to the console?

Javascript

const obj = {
  value: 42,
  getValue: function() {
    return this.value;
  }
};
console.log(obj.getValue());

A 42

B undefined

C TypeError

D null

💡 Hint

Remember, inside a method, 'this' refers to the object before the dot.

The method getValue is called on obj, so 'this' inside getValue refers to obj. obj.value is 42, so 42 is returned and logged.

❓ Predict Output

intermediate

What does this code output?

Look at this code snippet. What will it print?

Javascript

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

A 10

B undefined

C TypeError

D 0

💡 Hint

Arrow functions do not have their own 'this'.

Arrow functions inherit 'this' from their surrounding scope, which is the global scope here. Since 'value' is not defined globally, it returns undefined.

❓ Predict Output

advanced

What is the output of this code?

What will this code print to the console?

Javascript

const obj = {
  value: 5,
  getValue: function() {
    const inner = function() {
      return this.value;
    };
    return inner();
  }
};
console.log(obj.getValue());

A undefined

B 5

C TypeError

D ReferenceError

💡 Hint

Regular functions have their own 'this' depending on how they are called.

The inner function is called without an object, so 'this' inside inner refers to the global object (or undefined in strict mode). Since global.value is undefined, the result is undefined.

❓ Predict Output

advanced

What will this code output?

Analyze the following code and select the correct output.

Javascript

const obj = {
  value: 7,
  getValue: function() {
    const inner = () => this.value;
    return inner();
  }
};
console.log(obj.getValue());

A undefined

B null

C TypeError

D 7

💡 Hint

Arrow functions inherit 'this' from their surrounding context.

The arrow function inner inherits 'this' from getValue, which is called on obj. So 'this.value' is 7.

🧠 Conceptual

expert

Which option causes a TypeError when accessing 'this.value'?

Which of the following code snippets will cause a TypeError when trying to access 'this.value'?

A

const obj = { value: 1 };
const getValue = obj.getValue;
getValue();

B

const obj = { value: 1, getValue() { return this.value; } };
const getValue = obj.getValue.bind(obj);
getValue();

C

const obj = { value: 1, getValue() { return this.value; } };
const getValue = obj.getValue.bind(null);
getValue();

D

const obj = { value: 1, getValue() { return this.value; } };
obj.getValue();

💡 Hint

Binding 'this' to null in strict mode can cause errors.

Binding 'this' to null means inside getValue, 'this' is null. Accessing 'this.value' causes a TypeError because you can't read properties of null.