dkimot dkimot - 1 year ago 113
Javascript Question

Arrow function without curly braces

I'm new to both ES6 and React and I keep seeing arrow functions. Why is it that some arrow functions use curly braces after the fat arrow and some use parentheses?
For example:

const foo = (params) => (


const handleBar = (e) => {

Thanks for any help!

Answer Source

The parenthesis are returning a single value, the curly braces are executing multiple lines of code.

Your example looks confusing because it's using JSX which looks like multiple "lines" but really just gets compiled to a single "element."

Here are some more examples that all do the same thing:

const a = (who) => "hello " + who + "!";
const b = (who) => (
    "hello " + 
    who + 
const c = (who) => {
  return "hello " + who + "!";

You will also often see parenthesis around object literals because that's a way to avoid the parser treating it as a code block:

const x = () => {} // Does nothing
const y = () => ({}) // returns an object
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download