Function declaration of ES6 syntax

Question

Suppose we have a function using ES6 syntax like this:

const AccountOverview = (props) => {
  const overviewVisible = props.overviewVisible;
  const accountNumber = props.accountNumber;
  const toggleAccountOverview = props.toggleAccountOverview;

  const onClick = (e) => {
    e.preventDefault();
    toggleAccountOverview(!overviewVisible, accountNumber);
  };
  // FIXME: eslint WHY??????
  /* eslint-disable */
  return (
    <div
      className={props.overviewVisible ? 'acc-block open' : 'acc-block'}
    >
        <div>
)
}

and a function like this:

const AccountDetails = props => (
  <div className="tabInner">
          </div>
)

Why the first function is declared using {} and the second function is declared using just ()?

BTW: Functions are not valid, you need to surround html with backticks — n00dl3, Sep 12 '17 at 10:35
Read the documentation for arrow functions. Pay attention to the notion of "concise body". — , Sep 12 '17 at 10:39

score 1 · Answer 1 · answered Sep 12 '17 at 10:33

1

{} means the body of the arrow function, which can contain multiple statements. In this case you need to use return explicitly to return data from your function.

Without {}, your arrow function must have a single statement body which result will be returned implicitly without return statement.

The () is in that situations where you need to return an object within single statement body. Like

const getObject = () => ({ name: 'Test' });

Without () it will consider {} of the object the function body and give you an error.

answered Sep 12 '17 at 10:33

Suren Srapyan

66,568
14
114
112

Probably because you should've closed this as a duplicate, instead of answering. – Cerbrus Sep 12 '17 at 10:45
Probably because this information is already front and center in every single explanation of arrow functions in the world. Plus, it's wrong. The form without `{}` does not take a "single statement body"; it takes an **expression**. If you do choose to regurgitate such readily available information as an "answer", then in addition to making sure it's correct, at a minimum introduce the proper terminology, which in this case is "concise body form". And provide links to documentation and further information. – Sep 12 '17 at 13:34
it's a good and short answer for using arrow functions without `return`. – Luis Martins Jan 24 '18 at 18:10

Function declaration of ES6 syntax

1 Answers1