Turn function in a function into an arrowfunction

JavaScript
1

Tell us what’s happening:
Describe your issue in detail here.
How can i turn the function sayHello() into an arrayfunction or it is not possible?

This is the original-code:

const person = {
  name: "Taylor",
  sayHello() {
    return `Hello! My name is ${this.name}.`;
  }
};

  **Your code so far**


const person = {
name: "Taylor",
let sayHello = () => `Hello! My name is ${this.name}.`;

};

console.log(person.sayHello());

The console complains about the word let, but i think, there is a general problem with my arrowfunction.

PS:
Its not about the actual challenge, but sometimes i “play” with the codesnippets

  **Your browser information:**

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:92.0) Gecko/20100101 Firefox/92.0

Challenge: Write Concise Declarative Functions with ES6

Link to the challenge:

2

This does not look like the correct code. You should use the object provided instead of replacing it with the object from the example.

Arrow functions should not be used for methods:

1 Like
3

My fault, i was not clear enough.

I didnt try to solve the challenge. It was more a general question, how can i take the example from the code snippet and turn it into an arrow function. Withouth changing the functionality of the code. So that " console.log(person.sayHello());" will give the output:

Hello! My name is Taylor.

Or it is not possible?

4 
const person = {
  name: "Taylor",
  sayHello() {
    return `Hello! My name is ${this.name}.`;
  }
};

Is just shorthand for

const person = {
  name: "Taylor",
  sayHello: function () {
    return `Hello! My name is ${this.name}.`;
  }
};

Does that help? It should be trivial to change it to an arrow function if you really want to do that

5

Thanks for the help :slight_smile:

I thought i can reduce the code even more, but it seems no possible.

It seems to be a “stupid task” but sometimes i do this “trivial”-things to practice and get a deeper understanding of old lectures. Or at least try it :smiley:

1 Like
6

You couldn’t have done it how you were trying to do it originally because you can’t declare variables in an object, that doesn’t make sense, makes no difference if you use an arrow function or the function keyword.

Instead would just be

{
  foo: () => doSomething
}

vs

{
  foo() { return doSomething }
}
7

Its not a stupid task, i know that moment when you are facing a challenge, but in the midst of it you discover another notion you want to tackle and thats the best way to learn new content, by observing its behavior in authentic environment.
As you have already figured out, by other responses, it wouldnt be that hard to write an object method in the form of an arrow function, but it is not recommended, because of how this behaves for arrow functions. In regular functions, this refers to the owner of the function; they “bind” their this to their owner. In the challenge case, the owner of the function is the object(which makes the function its method). Arrow functions do not have their own this(which is bound to refer to their owner), instead they inherit the this of their parent scope. In the challenge case, if we were to write an arrow function as the method of the example object, the parent scope is the “window”.

1 Like
8

Okay, i understand it is not recommended to change the recommended code into an arrow function. But if its so “easy” and “trivial” can someone do it anyway?

Just to see the hypothetical solution.

I tried it now with the pattern of DanCouper and it still doesnt work.

const person = {

  name: "Taylor",

  sayHello: () => `Hello! My name is ${this.name}.`;

  

};

Sorry i am a bit “frustrated” because you all say: its so easy change the code into an arrowfunction if you want, despite its not recommenmded. And then i try it and it just give me an error :smiley:

9

What do you mean by “it doesn’t work”?

That there, that’s an arrow function, there’s nothing more to it than that, so what isn’t working here? What does the error say? It will tell you what the issue is.

You have an object. What is the syntax for an object? Here’s an example:

{
  name: "Dan",
  occupation: "programmer",
}

What is wrong with the code you’ve written? What is there in your object that doesn’t belong in an object? It’s got nothing to do with the property being a function: properties can be any value, but the syntax you’ve used is wrong

10

well you did just what you wanted, you turned the object method into an arrow function, but like i pointed out, the this behaves differently for arrow functions compared to regular functions and since the challenge relies on this, you cant meet the challenge requirement using an arrow function. The challenge itself is based on writing a shorthand method of a regular function

11

This is the error with my proposed code:

SyntaxError: unknown: Unexpected token, expected "," (5:51)

  3 |   name: "Taylor",
  4 |
> 5 |   sayHello: () => `Hello! My name is ${this.name}.`;
    |                                                    ^
  6 |
  7 |   
  8 |

For me´ working means, that the command

console.log(person.sayHello());

gives the output:

Hello! My name is Taylor.

Like the original codesnippet. But it seems to be impossible with arrow function. Instead i always get an error. So am a bit confused, that you all say its easy to turn the original codesnippet into an arrowfunction.
Or do you mean: Yeah you can turn it easily into an arrowfunction, but then it will give you an error?

12 
{
  key: value,
  key: value,
}

Open curly bracket
Name of property
Colon
Value of property
Comma
Name of property
Colon
Value of property
Comma
…etc
Close curly bracket

It is literally highlighting the error. You are defining an object. You have to use object syntax.

How do you separate properties in an object? you do not use semicolons

You will then get the issue everyone else is talking about. But in general there is absolutely no problem using arrow functions as the values in an object, they are just a value that you can define.

It is just that in this example, it won’t work, and you need to be aware that this [deliberately] works slightly differently in arrow functions. (Edit: saying it doesn’t work would be incorrect, it will work exactly as designed, it just won’t do what you want it to do)

1 Like
13

As @kevinSmith points out, using arrow functions as object methods is not encouraged, but did you follow the reason? Arrow functions have no this. So when you refer to this.name, the arrow doesn’t have one, so it refers to the object - and the object’s this (the context in which the object exists) is not what you think.

There are ways to use them in a returned object, just not in that way. When you learn about modules or factory functions, a returned object with arrow functions accessing that scope works. But until you get this and what context means, using arrow functions in this way is going to be problematic.

14

i overlooked this line of code. As Dan wrote , you should pay more attention on the syntax within the objectbody. Initially you tried to use let to define object properties, which is wrong and now you finish a line within object with semicolons. Maybe you are confusing the arrow function and regular function syntax.

Here the semicolon marks the end of the return line and is within the function body.

Here the semicolon is outside the arrow function body, thus inside the object body

15

And to add to that

{
  example: () => {
    doSomething();
  },
}

Exactly the same thing.

It’s an object, anything can be the property value.

{
  bool: true, 
  num: 1,
  str: "Hello",
  arr: [ 1,2,3],
  fun: function () {
    console.log("hi");
  },
  funShorthand() {
    console.log("hi");
  },
  anotherFun: () => console.log("hi again"),
  yetAnotherFun: () => {
    console.log("hello");
  },
  ...etc
}

But you’re making very basic syntax errors here (trying to put a variable into it, or using semicolons to seperate properties). There’s nothing special about the value of an object property being an arrow function in terms of whether it’s possible: it’s just another value

You can define

{
  example: function () {
    doSomething
  }
}

As

{
  example() {
    doSomething
  }
}

But that’s just shorthand, added to the language syntax because it’s annoying to have to write example: function() { over and over again.

4 Likes
16

Thank you guys, i think i have to look through this thread while the next week. To be honest i understand very vaguely, that i cant use this with an arrowfunction.

The main-thing was, that i cant transform the codesnippet into an arrow function. Or i could do it, but because of the this-keyword in this specific codesnippet will give me an error after the “transformation”.

Again thanks for the big effort and sorry for my “stupidity” :smiley:

2 Likes
17

In the context of the particular lesson in question, arrow functions won’t work, no. Syntactically you can write them, and that’s what @DanCouper was showing you: that property names in an object can contain traditional functions, arrow functions, strings, other objects…whatever you like.

const person = {
  name: "Snowmonkey",
  // moodRing works, because no this keyword
  moodRing: ()=>{
    const emotions=["happy","sad","angry","silly","apathetic"];
    return emotions[ Math.floor( Math.random() * emotions.length ) ]
  }
}

// letsuse them in a sentence!
console.log( person.name + " feels "+person.moodRing() )

As i said, later you’ll find some great places to use arrow functions in objects, but the MDN disclaimer is in place because, if you don’t understand this, things can get wobbly.

18

Why is the output showing me an undefined after i invoked a function of the object? Whereas if i console.log for the “simple” keys like arr or num it its only showing the value. Or it is a very complicated reason not to understand for a beginner?

const test ={
  bool: true, 
  num: 1,
  str: "Hello",
  arr: [ 1,2,3],
  fun: function () {
    console.log("hi");
  },
  funShorthand() {
    console.log("hi");
  },
  anotherFun: () => console.log("hi again"),
  yetAnotherFun: () => {
    console.log("hello");
  },
}

console.log(test.funShorthand());
console.log(test.anotherFun());
console.log(test.arr);
console.log(test.num);

OUTPUT:
hi
undefined
hi again
undefined
[ 1, 2, 3 ]
1

19

because test.funShorthand() does not have a return statement so it returns undefined by default

and test.anotherFun() is returning a console.log which outputs undefined, so it is returning undefined

20

Also, just FYI console.log() in the browser always returns undefined.

https://console.spec.whatwg.org/#logger

console.log('test')
// test
// undefined
1 Like