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.