JavaScript. What is the difference between const addName = name => ({firstnmae : name}) and addName2 = (name) => { {firstname : name }}

Question

i am currently learning JavaScript and I have trouble to understand the difference between those 2 functions. I thought they would be equal, but they act completly different.

Function 1 :

const function1 = name => ({username: name}) // this is returning a object, even tho there is no 
                                             // return

Function 2 : `

const function2 = (name) => { {username : name }} // this is returning nothing as expected

Answer 1

A one liner arrow function will return the resulting value.

for instance:

const add = (a, b) => a + b;

Whereas a multiline arrow function (or one defined using { & } will not return a value:

const add = (a, b) => {
  a + b;
};

in order for the above to return a value you will need the return keyword:

const add = (a, b) => {
  return a + b;
};

The Confusing Part

Your case is a bit confusing because you're dealing with an object literal:

{ username: name }

this syntax represents an "object". Objects in javascript are similar to associative arrays in other languages - that is, they are like arrays with strings as indices. A common example you'll see is something like:

const person = { name: 'Joseph', age: 33 }

// output the name:
console.log(person.name);

// output the age:
console.log(person.age);

So by wrapping your object literal in parens in your fist example you maintain it as a one line arrow function and your object literal is returned. The second example is really a multiline definition, which will again... have no return value.

Answer 2

The second function is interesting. The second function doesn't create an object. It is a function with a block {} and a labeled statement. You can verify it by adding another property to the object literal and it will throw an error:

const function2 = (name) => { { username: name, firstname: name } }

It is interpreted like this and this is an invalid label:

const function2 = (name) => {
  {
    username: name,
    firstname: name
  }
}

---

The first is already explained in many SO questions. It is an arrow function which implicitly returns an object

• When should I use return in es6 Arrow Functions?
• ECMAScript 6 arrow function that returns an object

Answer 3

The difference is that one will not have a return statement while the other one has a short form for the return statement that can be used in arrow function to return objects without exiplicity return statement.

// invalid syntax
const foo = () => {returns: 'object'}

// valid syntax
const foo = () => ({returns: 'object'})


// long form would look like 
const foo = () => {
    return {returns: 'object'}
}

The problem is that when you write foo = () => {returns: 'object'}, how does the engine know you want to return an object and not open a function body when it sees the {} curly brackets?

To let the engine know it is supposed to be an object that should be returned, you can wrap it in parents.

Answer 4

Both the functions are arrow functions.

Function 1 is an implicit return arrow function, so even though explicit return is not used the object {username: name} will be returned.

• Function 1

const function1 = name => ({username: name})

When using implicit return arrow functions and also an object to be returned, then it should be wrapped in (). If we don't wrap it in either {...} or (...), then it'll be an invalid syntax

//Invalid syntax --> Will throw an error. Hence it should be wrapper with `()`
const function1 = name => {username: name}

But where as in Function 2 the function definition is wrapped in { ... }. Since there is no return statement in the function, nothing will be returned.

• Function 2

const function2 = (name) => { {username : name }}