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

// 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.

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.

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):

becomes:

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

While Andru's answer is popular, it is wrong that parantheses are required for multiline return statement. Here, you can see an object of foo and bar is returned with no parantheses needed.

function foo () {
  return {
    foo: 'foo',
    bar: 'bar',
  }
}
console.log(foo())

As long as the return line is not just empty space or linebreak, you can have a multiline return just fine. Otherwise Automatic Semicolon Insertion takeover and break your return statement as demonstrated by Andru.

Regarding your question, I am onboard with Darin's answer.

Check this video https://www.youtube.com/watch?v=xw5SJZnTWp4&t=224s

i noticed while trying this code which can help make a function to support currying, notice line 6 where return have wrapped in (), without parentheses this code does not have capability to return a invokeable function,

so what i feel like return () return a response in a pattern which can support IIFE when response is invoked with ()

similary method returned on line no. 6 wheather it return targetFunction or further curry(), that returns a response with a pattern which can support response to be invoked with ()

hope I am able to explain :)

const addUncurried = (a, b) => a + b;
const curry = 
    (targetFunction, collectedArguments = []) => {
          return (...currentArguments) => {
              return (allArguments => {
                return (
                    allArguments.length >= targetFunction.length 
                    ? targetFunction(...allArguments) 
                    : curry(targetFunction, allArguments)
                )
              })([
                ...collectedArguments,
                ...currentArguments,
            ])
          }
    }
        
   
const addCurried = curry(addUncurried);
const increment = addCurried(2); // 6
console.log('increment',increment(4));
console.log('addCurried',addCurried(1,4)); // 5 
console.log('addCurried',addCurried(1)(3)); // 4

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 :)