What this keyword represents in Javascript - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to log the current object using this keyword.

Javascript

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

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

Aself

Bobj

Cthis

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 this keyword inside the method refers to the current object obj.

2fill in blank

medium

Complete the code to correctly bind this inside the function.

Javascript

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

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

Abind

Bcall

Capply

Dset

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 set to the given object.

3fill in blank

hard

Fix the error by completing the code to access this inside the arrow function.

Javascript

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

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

Aobj

Bthis

Cgreet

Dname

Attempts:

3 left

💡 Hint

Common Mistakes

Trying to use this as a property name.

Using obj directly inside the arrow function.

Arrow functions do not have their own this, so they use the this of the surrounding function, which is obj.

4fill in blank

hard

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

Javascript

const user = { [1]: function() { return this.[2]; }, name: 'Dave' }; console.log(user.getName());

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

AgetName

Bname

Cusername

Dget

Attempts:

3 left

💡 Hint

Common Mistakes

Using a wrong method name that does not match the call.

Accessing a property that does not exist like username.

The method getName returns the name property of the object using this.

5fill in blank

hard

Fill all three blanks to create an object with a method that uses this to return a greeting.

Javascript

const person = { [1]: 'Eve', [2]: function() { return `Hello, my name is [3].`; } }; console.log(person.greet());

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

Aname

Bgreet

Cthis.name

Dthis.greet

Attempts:

3 left

💡 Hint

Common Mistakes

Using this.greet inside the template string instead of this.name.

Mixing up property and method names.

The object has a name property and a greet method that returns a greeting using this.name.