this with arrow functions in Javascript - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to log the value of this inside the arrow function.

Javascript

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

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

Athis.name

Bname

Cobj.name

Dthis

Attempts:

3 left

💡 Hint

Common Mistakes

Using obj.name inside the arrow function expecting it to refer to the object.

Using this.name which doesn't work as arrow functions don't bind their own this.

Arrow functions do not have their own this. They use the this from the surrounding scope, which here is the global or module scope.

2fill in blank

medium

Complete the code to correctly access the object's name property inside a regular function.

Javascript

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

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

A['name']

B.name

C.Name

Dname

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'name' without dot or brackets after this.

Using incorrect capitalization like .Name.

Inside a regular function, this refers to the object calling the function. Use .name to access the property.

3fill in blank

hard

Fix the error in the code to make this inside the arrow function refer to the object.

Javascript

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

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

A.name

B['name']

C.Name

Dname

Attempts:

3 left

💡 Hint

Common Mistakes

Using incorrect capitalization like .Name.

Trying to use this.name without understanding arrow function context.

The arrow function inherits this from the greet method, which refers to obj. Use .name to access the property.

4fill in blank

hard

Fill both blanks to create an object method using an arrow function that logs a property of the global this and the object's name property.

Javascript

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

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

A.location

B.name

C['name']

D['location']

Attempts:

3 left

💡 Hint

Common Mistakes

Trying to use this.name inside the arrow function expecting it to refer to the object.

Using bracket notation incorrectly.

The arrow function's this refers to the global object, which has a location property. To get the object's name, access obj.name.

5fill in blank

hard

Fill the blanks to create a method that uses a regular function and an arrow function to log the object's name property from both.

Javascript

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

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

A.name

B.location

C['name']

D['location']

Attempts:

3 left

💡 Hint

Common Mistakes

Confusing which this refers to the object or global scope.

Using bracket notation inconsistently.

The greet regular function has this referring to obj, so this.name logs 'Eve'. The nested arrow function inherits this same this from its lexical environment, also logging 'Eve'.