For example in redux actions, I've seen in someone's code:

export const updateMessage = text => {
   return (dispatch) => {
     dispatch(updateChatMessage(text))
   }
}

and:

const updateChatMessage = text => ({
   type: types.someActionType,
   text
})

it seems to function as an imply a return but I thought that was already implied in an arrow functions brackets following the fat arrow.

What do the parenthesis ({...}) do? are they necessary? Is there an alternate way to acplish the same thing?

For example in redux actions, I've seen in someone's code:

export const updateMessage = text => {
   return (dispatch) => {
     dispatch(updateChatMessage(text))
   }
}

and:

const updateChatMessage = text => ({
   type: types.someActionType,
   text
})

it seems to function as an imply a return but I thought that was already implied in an arrow functions brackets following the fat arrow.

What do the parenthesis ({...}) do? are they necessary? Is there an alternate way to acplish the same thing?

• javascript
• ecmascript-6
• arrow-functions

• it's how you return an object in arrow functions with a concise body - see docs look for Returning object literals – Bravo Commented Oct 11, 2019 at 3:54

4 Answers 4

when you write myFunction = value => ({prop: value}) it return the object {prop: value}, in this case {} are object delimiter and not 'function delimiter'

const updateChatMessage = text => ({
   type: types.someActionType,
   text
})

another eg :

when you want to multiply by two each elem of an array you can write :

array.map(elem => {return elem * 2})

or

array.map(elem => elem * 2) //same result

and if you want an eg with () that wrap an object litteral :

let array = [{val: 2},
             {val: 4},
             {val: 8},
             {val: 16}];
             
let output = array.map( ({val}) => ({val: val*2}) );

console.log(output);

If you wrap the brackets with parenthesis you are making your function return an object literal (thus you don't need the return keyword). If you don't use parenthesis you have to use the return keyword.

As per the arrow function docs,

// Parenthesize the body of a function to return an object literal expression:

params => ({foo: bar})

That means if you want to return an object implicitly you have to wrap it in parentheses.

Without this, code inside braces will be considered as function body and not an object (as you'd want)

Following are equivalent:

params => { return {foo: bar}} // Explicitly return an object (from function body)
params => ({foo: bar}) // Implicitly return an object by wrapping it with parentheses

In the first example, the {} are used to identify multiple lines of code, which is why the return is required in order to obtain something other than undefined.

In the second example, the {} are used to create an object.