对箭头 function 中的返回值感到困惑？

Question

I found this code in one a tutorial.

const renderApp = (Component) =>
  render(
    <Provider store={store}>
        <AppContainer>
          <Component />
        </AppContainer>
    </Provider>,
    document.getElementById('root')
  );

My question is shouldnt the return value be wrapped in braces? because arrow functions return whats next to => if nothing is metnioned?

const renderApp = (Component) => (
  render(
    <Provider store={store}>
        <AppContainer>
          <Component />
        </AppContainer>
    </Provider>,
    document.getElementById('root')
  );
)

shouldn't it have braces to wrap contents?

Answer 1

The right hand side of an arrow function can be either:

• A block
  • delimited with { and } (which are braces)
  • which returns whatever the return statement in the block says
• An expression
  • which returns whatever the result of evaluating the expression is

You need to wrap the expression with parenthesis ( ( and ) ) if it is an object literal because object literals are delimited with braces.

() => { foo: 123, bar: 456 }; // This is an error

If you wrote the above, the { and } would be interpreted as a block and not an expression to create an object.

() => ({ foo: 123, bar: 456 });

Adding parenthesis tells the JS parser that it is an expression and not a block.

Since your expression doesn't start with a { , it won't be treated as a block so there is no need for parenthesis.

---

The first code snippet, after "=>" its empty, wont JS compiler insert; and end it there?

No. Automatic semi-colon insertion only occurs in places which could be the end of something. It won't happen in after => because there must be something on the right-hand side of => .

Answer 2

There's no need to wrap it within braces because a single line statement gets returned implicitly. You however can do it yourself, it isn't incorrect, just that it's a bit of syntactic sugar