FAQ: Advanced Objects - Arrow Functions and this

Frequently Asked Questions JavaScript FAQ
1

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!

2

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();
4 Likes
3

because your defining a method, not a function.

4 Likes
4

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.

7 Likes
5

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 .

3 Likes
6

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

3 Likes
7

most relaxed chapter, lmao

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

6 Likes
8

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.

3 Likes
9

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
10

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

11

Whenever it happens try reloading the page.

12

Hey folks,

I was wondering why this answer works even though it omits the colon ( : ) when defining the checkEnergy method in the robot object:

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

robot.checkEnergy();
1 Like
13

Hello, @betasurfer22578.

The way you’ve added checkEnergy() to your object does not require a colon. You could do it this way, and use a colon:

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

robot.checkEnergy();

Works either way.

P.S. I formatted your code for you in your post. For future posts, please review these guidelines: How do I format code in my posts?

14

From what I understand from the explanation given is that when this keyword is used in an arrow function it will call on the owner of the function which I believe is the object correct? But I dont know what is meant by object is it the object ‘robot’ in that case would it not call on robot???

15

is there a difference between a method and a function? are they not synonymous?

16

a method belongs to an object/class, and a function doesn’t

something like this:

The Object-Oriented Programming vs Functional Programming debate, in a beginner-friendly nutshell | by Sho Miyata | Medium

might be a good read.

classes/objects can be a good solution once your code base starts to grow, but first you need to learn classes/objects, and on a small program, classes/objects might not to seem to add a lot of value.

17

Slightly off topic, but is this the best course on Codecademy to go through to be able to build websites quickly?

18

well, the quickest way is a buying a pre-made template/theme.

Being able to build a website quickly takes time and practice, first you need to know the basics of html and css. Once you are proficient with these, you can choice a css framework like bootstrap to speed up development.

19

Hi Steven,

choice  =>  noun

choose  =>  verb

Cheers!
Roy

20

Should the following statement say ‘local object’ instead of ‘global 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 . In my understanding the global object is defined outside of the function declaration. In this case would be it would “goat”. Inside ‘goat’ declaration its property “diet” declared the function: () => {
console.log(this.dietType); so property ‘dietType’ is inside the declaration also. I know I am most likely wrong but it makes sense why “this” does not work here based off my statement.