this in objects in Javascript - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to access the object's name using this.

Javascript

const person = {
  name: 'Alice',
  getName: function() {
    return [1].name;
  }
};
console.log(person.getName());

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

Athis

Bperson

Cself

Dwindow

Attempts:

3 left

💡 Hint

Common Mistakes

Using the object name directly instead of this inside the method.

Using window which refers to the global object, not the current object.

The keyword this inside the method refers to the object person itself, so this.name accesses the name property.

2fill in blank

medium

Complete the code to correctly call the method and print the age using this.

Javascript

const user = {
  age: 30,
  showAge() {
    console.log([1].age);
  }
};
user.showAge();

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

Auser

Bwindow

Cself

Dthis

Attempts:

3 left

💡 Hint

Common Mistakes

Using the object name user inside the method instead of this.

Using window which is the global object, not the current object.

Inside the method, this refers to the user object, so this.age accesses the age property.

3fill in blank

hard

Fix the error in the method to correctly return the full name using this.

Javascript

const employee = {
  firstName: 'John',
  lastName: 'Doe',
  getFullName: function() {
    return [1].firstName + ' ' + [1].lastName;
  }
};
console.log(employee.getFullName());

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

Athis

Bemployee

Cself

Dwindow

Attempts:

3 left

💡 Hint

Common Mistakes

Using the object name employee inside the method which can cause issues if the object name changes.

Using window or self which do not refer to the object.

Using this inside the method refers to the employee object, so this.firstName and this.lastName access the correct properties.

4fill in blank

hard

Fill both blanks to create a method that returns the object's city in uppercase using this.

Javascript

const location = {
  city: 'Paris',
  getCityUpper() {
    return [1].city.[2]();
  }
};
console.log(location.getCityUpper());

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

Athis

Blocation

CtoUpperCase

DtoLowerCase

Attempts:

3 left

💡 Hint

Common Mistakes

Using the object name location inside the method instead of this.

Using toLowerCase instead of toUpperCase.

this.city accesses the city property, and toUpperCase() converts it to uppercase.

5fill in blank

hard

Fill all four blanks to create a method that returns a greeting with the object's name and age using this.

Javascript

const user = {
  name: 'Emma',
  age: 25,
  greet() {
    return `Hello, my name is [3] and I am [4] years old.`.replace('[3]', [1]).replace('[4]', [2]);
  }
};
console.log(user.greet());

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

Athis.name

Bthis.age

Cname

Dage

Attempts:

3 left

💡 Hint

Common Mistakes

Using the object name user inside the method instead of this.

Mixing up the placeholders in the string and the keys in replace.

this.name and this.age access the object's properties. The string uses placeholders to insert these values.

Practice

1. What does this refer to inside a regular method of an object in JavaScript?

easy

A. The object itself

B. The global window object

C. Undefined

D. The method's name

Solution

1. Step 1: Understand this in object methods

   Inside a regular function defined as a method of an object, this refers to the object that owns the method.

2. Step 2: Compare with other contexts

   Unlike arrow functions or global functions, regular methods bind this to the object itself.

3. Final Answer:

   The object itself -> Option A

4. Quick Check:

   this in object method = object [OK]

Hint: Remember: regular methods use this as the object [OK]

Common Mistakes:

• Thinking this is always global
• Confusing arrow functions with regular functions
• Assuming this is the method name

2. Which of the following is the correct way to define a method that uses this inside an object?

easy

A. const obj = { greet: () => console.log(this.name) };

B. const obj = { greet: function() => console.log(this.name) };

C. const obj = { greet() { console.log(this.name); } };

D. const obj = { greet: function => console.log(this.name) };

Solution

1. Step 1: Identify correct method syntax

   const obj = { greet() { console.log(this.name); } }; uses the concise method syntax with a regular function, which correctly binds this to the object.

2. Step 2: Check other options for errors

   const obj = { greet: () => console.log(this.name) }; uses an arrow function, which does not bind this to the object. Options B and D have invalid syntax for function definitions.

3. Final Answer:

   const obj = { greet() { console.log(this.name); } }; -> Option C

4. Quick Check:

   Regular method syntax = const obj = { greet() { console.log(this.name); } }; [OK]

Hint: Use regular functions, not arrow functions, for methods [OK]

Common Mistakes:

• Using arrow functions for methods
• Incorrect function syntax inside objects
• Confusing method shorthand with arrow functions

3. What will be the output of the following code?

const person = {
  name: 'Alice',
  greet() {
    console.log(this.name);
  }
};
person.greet();

medium

A. Alice

B. undefined

C. Error

D. person

Solution

1. Step 1: Identify this inside greet method

   The method greet is a regular function inside the person object, so this refers to person.

2. Step 2: Access the name property

   Since this is person, this.name is 'Alice'. The console logs 'Alice'.

3. Final Answer:

   Alice -> Option A

4. Quick Check:

   this.name = 'Alice' [OK]

Hint: Regular method this points to the object [OK]

Common Mistakes:

• Expecting undefined because of arrow function confusion
• Thinking this is global
• Assuming method returns error

4. Find the error in this code and fix it:

const car = {
  brand: 'Toyota',
  showBrand: () => {
    console.log(this.brand);
  }
};
car.showBrand();

medium

A. No error, code works fine

B. Add .bind(car) to arrow function

C. Replace this.brand with car.brand

D. Change arrow function to regular function: showBrand() { console.log(this.brand); }

Solution

1. Step 1: Identify arrow function issue

   Arrow functions do not have their own this. Here, this.brand is undefined because this is not bound to car.

2. Step 2: Fix by using regular function

   Changing showBrand to a regular method binds this to car, so this.brand correctly accesses 'Toyota'.

3. Final Answer:

   Change arrow function to regular function: showBrand() { console.log(this.brand); } -> Option D

4. Quick Check:

   Regular function binds this correctly [OK]

Hint: Avoid arrow functions for object methods needing this [OK]

Common Mistakes:

• Using arrow functions for methods
• Trying to bind this on arrow functions
• Ignoring this context rules

5. You want to create an object with a method that returns a greeting using the object's name. Which code correctly uses this to achieve this?

const user = {
  name: 'Bob',
  greet: ???
};
console.log(user.greet());

hard

A. greet: () => `Hello, ${this.name}!`

B. greet() { return `Hello, ${this.name}!`; }

C. greet: function() => `Hello, ${this.name}!`

D. greet: function { return `Hello, ${this.name}!`; }

Solution

1. Step 1: Check method syntax and this binding

   greet() { return `Hello, ${this.name}!`; } uses a regular method syntax, so this correctly refers to the user object.

2. Step 2: Validate other options

   greet: () => `Hello, ${this.name}!` uses an arrow function, which does not bind this to the user object. Options B and C have invalid syntax for function definitions.

3. Final Answer:

   greet() { return `Hello, ${this.name}!`; } -> Option B

4. Quick Check:

   Regular method with this = greet() { return `Hello, ${this.name}!`; } [OK]

Hint: Use regular methods for this access in objects [OK]

Common Mistakes:

• Using arrow functions for methods
• Incorrect function syntax
• Expecting this to work in arrow functions