FAQ: Advanced Objects - Arrow Functions and this

Community%20FAQs%20on%20Codecademy%20Exercises

This community-built FAQ covers the “Arrow Functions and this” exercise from the lesson “Advanced Objects”.

Paths and Courses
This exercise can be found in the following Codecademy content:

Web Development

Introduction To JavaScript

FAQs on the exercise Arrow Functions and this

Join the Discussion. Help a fellow learner on their journey.

Ask or answer a question about this exercise by clicking reply (reply) below!

Agree with a comment or answer? Like (like) to up-vote the contribution!

Need broader help or resources? Head here.

Looking for motivation to keep learning? Join our wider discussions.

Learn more about how to use this guide.

Found a bug? Report it!

Have a question about your account or billing? Reach out to our customer support team!

None of the above? Find out where to ask other questions here!

Why is the normal function declaration wrong in this example like:

const robot = {
  energyLevel: 100,
  function checkEnergy() {
    console.log(`Energy is currently at ${this.energyLevel}%.`)
  }
}

robot.checkEnergy();

because your defining a method, not a function.

3 Likes

Found a very useful article explaining this: https://www.freecodecamp.org/news/learn-es6-the-dope-way-part-ii-arrow-functions-and-the-this-keyword-381ac7a32881/

I didn’t find the example on Codecademy the easiest to understand.

The TL;DR is why ‘this’ in an arrow function won’t return the value is because of a JavaScript quick and ‘this’ when used inside the arrow function is now bound to the Global Object (where your global variables are) and NOT the object where the function is.

Hope this helps others who may have been a bit confused by this.

2 Likes

Can anyone translate this into english?

Arrow functions inherently bind , or tie, an already defined this value to the function itself that is NOT the calling object. In the code snippet above, the value of this is the global object , or an object that exists in the global scope, which doesn’t have a dietType property and therefore returns undefined .

the most important thing is to understand how to property defined methods within an object:

const goat = {
  dietType: 'herbivore',
  soundType: 'baa',
  makeSound() {
    console.log(this.soundType);
    
  },
  diet: () => {
    console.log(this.dietType);
  }
};

goat.makeSound();
goat.diet(); // Prints undefined

given the makeSound method is properly used, this (of this.soundType) references the object.

when you use the the arrow syntax, this (of this.dietType) references the method itself. The method does not have a dietType property

1 Like

most relaxed chapter, lmao

The key takeaway from the example above is to avoid using arrow functions when using this in a method!

Note that arrow functions should not be used in objects. ES6 methods should be used, instead.

diet () {
    console.log(this.dietType);
}

Now this is bound to the object.

Hey everybody,

const robot = {
  energyLevel: 100,
  checkEnergy() {
    console.log(`Energy is currently at ${this.energyLevel}%.`)
  }
}

This is my code and to me it seems like the exact the same code the solution is giving me:

const robot = {
  energyLevel: 100,
  checkEnergy() {
    console.log(`Energy is currently at ${this.energyLevel}%.`)
  }
}

But it still wont accept my answer as a correct one. Any advice? Am i just blind?

1 Like

I’m having this problem too. I’ve actually had the same problem with 5+ exercises, which kinda sucks

Whenever it happens try reloading the page.