Arrow functions and the use of parentheses () or {} or ({})

Question

I cannot understand why in the arrow functions we do not need to wrap the literal of arrow function in the ({}) braces, instead of in this example the literal just wrapped in the single () braces. Why? I had surfed the internet to find an answer on it, but it failed.

And also why we put the arguments in double braces ({}), instead of just ()?

const FilterLink = ({ filter, children }) => (
   <NavLink
       to={filter === 'SHOW_ALL' ? '/' : `/${ filter }`}
       activeStyle={ {
       textDecoration: 'none',
           color: 'black'
       }}
   >
       {children}
   </NavLink>
)

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment and https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions — Tom Fenech, Mar 22 '18 at 10:17

Shubham Khatri · Accepted Answer · 2018-03-22T10:19:48.333

81

Using ({}) is to destructure the arguments and => () is an implicit return equivalent to => { return ()} and ( only serves to disambiguate between the start of an object and the opening braces of a function body and would generally be used when you have a multiline return value. You could simply avoid using ( and have the NavLink in the same line as the arrow =>

const FilterLink = ({ filter, children }) => ( // <-- implicit return 
  <NavLink
    to={filter === 'SHOW_ALL' ? '/' : `/${ filter }`}
    activeStyle={ {
      textDecoration: 'none',
      color: 'black'
    }}
  >
    {children}
  </NavLink>
)

is equivalent to

const FilterLink = ({ filter, children }) => {
   return (
      <NavLink
        to={filter === 'SHOW_ALL' ? '/' : `/${ filter }`}
        activeStyle={ {
          textDecoration: 'none',
          color: 'black'
        }}
      >
        {children}
      </NavLink>
    )
}

Check this answer for more details on the usage of destructuring in ({ filter, children })

edited Mar 22 '18 at 10:19

answered Mar 22 '18 at 10:09

Shubham Khatri

270,417
55
406
400

@ShubhamKhatri so and what in my case `=> ()` do? You have give in your answer two separate point of views: 1. is an implicit return equivalent to `=> { return ()} ` 2. `(` only serves to disambiguate between the start of an object and the opening braces of a function body. – Max Wolfen Mar 22 '18 at 10:16
@MaxWolfen, both are one and the same thing you can always write `const FilterLink = ({ filter, children }) => ( – Shubham Khatri Mar 22 '18 at 10:17
@TomFenech That's not fully correct either. There is only an implicit return when it's single line. When curly brackets are used (multi line) an explicit return can be set. So, in other words, it's not an implicit return because the `=>` sign but because it's single line. – GuyT Mar 22 '18 at 10:18
@GuyT to put my pedant hat on, that's not fully correct either, since we're talking about a single _expression_, not a line :^) – Tom Fenech Mar 22 '18 at 10:22
@Shubham rather than talk about "lines", maybe you should edit your answer to talk about "expressions". – Tom Fenech Mar 22 '18 at 10:31
@TomFenech Oops, I misinterpreted your previous comment, which is 100 percent correct. I will delete my 'reply' on it. – GuyT Mar 22 '18 at 10:47
Is there any chance that this behavior get fixed? For example, I spent my last 5 minutes panicked because I remove parenthesis in `el => ({ a: 1 })`. Is there any obstacle to doing this? – Minh Nghĩa Aug 20 '20 at 18:43

score 28 · Answer 2 · edited Jun 09 '23 at 08:59

28

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

Is equivalent to

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

When you use the () after your => it just automatically returns the values inside.

Edit: you can also omit the () after => entirely when its just a single line of return code, (thanks to Tom Fenesh) as () is only needed with return code spanning across multiple lines.

edited Jun 09 '23 at 08:59

redfox05

3,354
1
34
39

answered Mar 22 '18 at 10:12

Chriss Hd

584
4
15

5

No, the `(` after `=>` doesn't do anything in this case. – Tom Fenech Mar 22 '18 at 10:13
@TomFenech indeed, it's the same as `=> a + b`. He should have placed `a + b` on next line to get the point across – softcode May 07 '21 at 22:24
To clarify even more for others: The above comments are talking about the `(` on the first line, because `const add = ( a, b ) => ( a + b )` can be written simply as `const add = ( a, b ) => a + b `. The `()` brackets are only really needed in a multi-line return, as @softcode said this could be better shown with a multi-line example. Updated the answer to reflect this. – redfox05 Jun 09 '23 at 08:55

Arrow functions and the use of parentheses () or {} or ({})

2 Answers2

Linked

Related