Curly Brackets in Arrow Functions

Curly Brackets in Arrow Functions

case 'toggleTodo' :
    return (
        state.map( (one) => 
            oneTodo( one, action )
        )
    );

is equal to:

case 'toggleTodo' :
    return (
        state.map( (one) => {
            return oneTodo( one, action )
        })
    );

see the return statement

Arrow function syntax with parentheses instead of curly braces?

Yes, it's also an arrow function. The only difference, is that if you don't use braces, it forces a return:

const App = () => { return true; } // with braces you've to use the return statement

const App = () => true; // without braces it forces the return statement automatically

The MDN arrow function expression documentation says the following about this:

Function body

Arrow functions can have either a "concise body" or the usual "block
body".

In a concise body, only an expression is specified, which becomes the
implicit return value. In a block body, you must use an explicit
return statement.

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

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

Furthermore, with regard to the parentheses: the arrow function in this case returns a JSX expression, which is considered a single object.
Parentheses are mostly used for multi-line JSX code. See more information here: https://reactjs.org/docs/introducing-jsx.html
and also the other similar question on Stack overflow.

Does adding curly braces to an arrow function improve performance?

It's not going to make a difference you could detect, not even on a very, very large array. But if you're curious, you could always profile it on the JavaScript engines you care about and using your real code (since synthetic code gives synthetic results).

In specification terms, evaluating function code that completes with a return (including an arrow's implicit return) vs. just "falling off" the end of the code results in two different kinds of completion, and then the process of calling that function differentiates between the return and the non-return and supplies undefined in the non-return case. forEach's code doesn't use the result, of course, but theoretically there could be different code paths within the JavaScript engine to get there, so theoretically they could have slightly different performance.

In practice, though, I think you can safely assume JavaScript engines optimize this quite well and the difference isn't apparent.

In general, don't optimize in advance. Respond to a performance problem in a given bit of code when you have a performance problem in a given bit of code. (That said, I totally understand being interested in this sort of thing in the abstract...)

Just for fun I did a jsPerf, don't see any sigificant difference in that synthetic test on Chrome (V8) or Firefox (SpiderMonkey):

But again, synthetic tests give synthetic results.

Arrow function without curly braces

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) => (
  "hello " + who + "!"
);
const d = (who) => (
  "hello "
    + who
    + "!"
);
const e = (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

Why does adding/removing curly braces in this arrow function cause the text to not display for a ReactJS component?

Curly braces are used to delimit the function body, therefore you need a return statement for return a value:

tasks.map((task) => {
  return <h3>{task.text}</h3>
})

Why Curly braces while handling a Promise object provides undefined data?

When you are using an arrow function, you can omit the curly braces for very simple functions. This will implicitly return the result of the expression following the arrow. This is best explained by example. Let's start with a simple function:

var foo = () => {
  return 'bar';
}

This can be shortened to this:

var foo = () => { return 'bar' }

Which can be further shortened to this:

var foo = () => 'bar';

In your case, you can think of the code you posted like this:

.then(res => {
  res.json()
})

The above function doesn't return anything, which is the source of your problem. What your really want is this:

.then(res => {
  return res.json()
})

Which can be shortened to this:

.then(res => { return res.json() }) // with curlys
.then(res => res.json())            // without curlys

In other words, if the curly braces are present, you must explicitly return the value for that function.

Meaning of curly braces in array.map()

That’s the behavior of arrow function. Arrow function syntax is designed to be terse.

(arg) => [single expression]

If what follows the arrow is one single expression without curly braces, it implies returning the value of that expression. The return keyword is omitted.

If wrapping curly braces follows the arrow, then what goes inside the braces are treated as normal function body, and return keyword must be used if you mean to return a value.

So (x) => x + 1 is translated to:

function (x) {
  return x + 1;
}

And (x) => { x + 1 } is translated to:

function (x) {
  x + 1;
}

I must also add that (x) => ({ x }) is translated to:

function (x) {
  return { x: x };
}

Curly brace {...} can mean an object literal, a function body or a code block.

In order to disambiguate, you need to put parenthesis around the braces to tell the parser to interpret {...} as an “object literal expression”.

---

Related Topics