Arrow function without curly braces

Question

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 exam

Answer 1

In your first example, the right-hand side of the arrow function shows a single expression that is enclosed by a grouping operator:

const foo = (params) => (
  <span>
    <p>Content</p>
  </span>
);

A similar comparable case would be the following:

const foo = (params) => (<span><p>Content</p></span>);

A distinction, in the above cases using single expressions, is that the right-hand side is the returned value of the function.

On the other hand, if you use curly braces, JavaScript will understand that as a statement:

const foo = (params) => {} // this is not an object being returned, it's just an empty statement 

Therefore, using statement is a good start for you to have code in it, multiple lines, and it will require the use of "return" if the function is intended to return value:

const foo = (params) => {
    let value = 1; 
    return value;
}

In case you wanted to return an empty object in the shortest form:

const foo = (params) => ({}) 

See tests

Answer 2

Actually in a briefcase when somebody uses braces in an arrow function declaration, it is equal to below:

const arrow = number => number + 1;

|||

const arrow = (number) => number + 1;

|||    

const arrow = (number) => ( number + 1 );

|||

const arrow = (number) => { return number + 1 };

Answer 3

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

Answer 4

Parenthesis are used in an arrow function to return an object.

() => ({ name: 'YourName' })  // This will return an object

That is equivalent to

() => {
   return { name : 'YourName' }
}

Answer 5

To answer a duplicate post(question posted here), just for reference for others:

  var func = x => x * x;                  
    // concise body syntax, implied "return"

    var func = (x, y) => { return x + y; }; 
    // with block body, explicit "return" needed

For reference: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions#Function_body

Also note: If you are returning an object literal as the result from a fat arrow function, then you must enclose the object in parentheses, e.g., myFunc = () => ({ data: "hello"}). You will receive an error if you omit the parentheses because the build tools will assume that the curly braces of the object literal are the start and end of a function body.

Answer 6

Parenthesis has an implicit return statement while curly braces you need an explicit return statement