'Why use parentheses when returning in JavaScript?

In the Restify framework code I found this function:

function queryParser(options) {

    function parseQueryString(req, res, next) {
        // Some code goes there
        return (next());
    }
    return (parseQueryString);
}

Why would the author write return (next()); and return (parseQueryString);? Does it need parentheses there and if so, why?

javascriptc++tensorflowtensorflow-c++


Solution 1:[1]

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

Solution 2:[2]

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

Solution 3:[3]

// Create a component named MessageComponent
var MessageComponent = React.createClass({
  render: function() {
    return (
      <div>{this.props.message}</div>
    );
  }
});

NOTE Why do we need the parentheses around the return statement (line 3)? This is because of JavaScript's automatic semicolon insertion. Without the parentheses, JavaScript would ignore the following lines and return without a value. If the JSX starts on the same line as the return, then parentheses are not needed.

Taken from here.

Solution 4:[4]

Just to add to what others have said.

Using brackets around the return value is valid JavaScript, but mostly a bad thing to do.

Mostly bad because it doesn't add anything yet increases the size of the JavaScript which means that there is more to download to the browser. Yes most people have fast broadband connections, but don't lose sight of the fact that everything you put in the JavaScript file needs to be downloaded so avoid unnecessary code bloat. This probably doesn't matter if you use a tool to compact your code (minifier has already been mentioned), but not everyone does.

Sometimes it might aid readability. Hard pressed to think of an example in this case, but if the use of brackets makes your JavaScript clearer to you as the developer and thus easier to maintain then use them - even if it goes against what I said about code bloat.

Solution 5:[5]

Why would the author write return (next()); ... ?

Regarding next():

Probably because his function is something like this:

function next()
{
  var i=0;
  return function (){
    // Do something with that closured i....
  }
}

Regarding (xxx);:

It is unnecessary. Every minifier will remove it.

Example (uglifyJS):

Enter image description here

becomes:

Enter image description here

Solution 6:[6]

I tried:

var a = function() {
          return true || true
        }
console.log(a());

//return: true

var a = function() {
          return
              true || true
        }
console.log(a());

//return: undefined

var a = function() {
          return (
                   true || true
                 )
        }
console.log(a());

//return: true

Solution 7:[7]

This may be old but the return () can be used in this way:

function parseQueryString(req, res, next) {
            var id = req.param('id');
            return (id ? "Foo" : "Bar");
}

Less code, easy to read :)

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Andrew Black
Solution 2
Solution 3 geoyws
Solution 4 Matt Dell
Solution 5 Peter Mortensen
Solution 6 Hexman
Solution 7 Atieh

Related Questions