Why use parentheses when returning in JavaScript?

Using parentheses when returning is necessary if you want to write your return statement over several lines.

React.js offers a useful example. In the return statement of the render property in a component you usually want to spread the JSX you return over several lines for readability reasons, e.g.:

render: function() {
    return (
        <div className="foo">
            <h1>Headline</h1>
            <MyComponent data={this.state.data} />
        </div>
    );
}

Without parentheses it results in an error!


More generally, not using parentheses when spreading a return statement over several lines will result in an error. The following example will execute properly:

var foo = function() {
  var x = 3;
  return (
    x 
    + 
    1
  );
};
console.log(foo());

Whereas the following (without the parentheses) will throw errors:

var foo = function() {
  var x = 3;
  return 
    x 
    + 
    1
  ;
};
console.log(foo());

Parenthesis are used for two purposes in a return statement.

  • To support multi-line expression as mentioned in @Andru Answer.
  • To allow returning object in arrow function like the below:

() => ({ name: 'Amanda' }) // Shorthand to return an object

This is equivalent to

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

For more information, please check this article. https://medium.com/@leannezhang/curly-braces-versus-parenthesis-in-reactjs-4d3ffd33128f


It doesn't need to be that way, but it's valid JavaScript code. Actually it's quite uncommon to see such syntax. I guess it's a personal preference of the author.

Tags:

Javascript