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());

Leave a Comment