CODEWITHSUNDEEP
javascriptreactjsecmascript-6
Max Wolfen
Max Wolfen

Reputation: 2033

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

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>
)

Upvotes: 66

Views: 22639

Answers (2)

Chriss Hd
Chriss Hd

Reputation: 643

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.

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.

Upvotes: 34

Shubham Khatri
Shubham Khatri

Reputation: 281676

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 })

Upvotes: 91

Related Questions