0

Both arrow functions should return the result, but why does only the first one work?

It works:

const createUser = (name, email) => ({name, email})
const user1 = createUser("User Test", "test@test.com")
console.log(user1)

Does not work:

const createUser = (name, email) => {name, email}
const user1 = createUser("User Test", "test@test.com")
console.log(user1)
Boruto
  • 39
  • 4
  • 4
    because `{}` doesn't only define objects - it's also used for code blocks - it's documented very well that a single statement returned from an arrow function that returns an object MUST be enclosed in `()` - and the documentation states why - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions#returning_object_literals – Bravo Jun 26 '22 at 03:31

2 Answers2

0

This is because in

const createUser = (name, email) => ({name, email})
const user1 = createUser("User Test", "test@test.com")
console.log(user1)

function is returning an object. This snippet is similar to

const createUser = (name, email) => { return {name, email}}
const user1 = createUser("User Test", "test@test.com")
console.log(user1)

Whereas in the second snippet, the function is not returning anything. It is a simple arrow function with no return value which is why console.log is undefined.

const createUser = (name, email) => {name, email}
const user1 = createUser("User Test", "test@test.com")
console.log(user1)
Himanshu Singh
  • 1,803
  • 3
  • 16
-1

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions#advanced_syntax

In an arrow function, to return an object literal expression requires parentheses around expression.

Therefore, your first arrow function has the correct syntax for returning an object literal, and the second one does not.

Raymi306
  • 105
  • 8
  • Not my dv, but imo you didn't answer OP's quesiton of "why does only the first one work". They already can see that it requires parentheses for it to work correctly, but they want to know why the other option they tried didn't work. Your answer would be more complete if you mentioned that the second one is being interpreted as a function body and not an object literal, and that the comma being used is the comma-operator (so it's still valid JS and doesn't throw an error). – Nick Parsons Jun 26 '22 at 03:49
  • Thank you, I can see how a little more detail might have helped. I still find it frustrating that my answer is factually accurate with supporting documentation. The first one works because the syntax is correct. The second one, is just...not correct. Furthermore, Bravo's comment which was written while I was pulling up the docs says the exact same thing referencing the same resource and appears to be well received – Raymi306 Jun 26 '22 at 03:56
  • 1
    Yes, but the second option is still valid syntax, it is not invalid. Explaining why it is still valid syntax (ie: why it doesn't throw a syntax error) and what it is actually doing instead seems to be what OP is looking for mainly. – Nick Parsons Jun 26 '22 at 04:00
  • @Raymi306 Thanks for the answer. I wasn't the one who downvoted your answer. Now I can understand the reason for the error. – Boruto Jun 26 '22 at 04:50