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

geoyws
  • 3,326
  • 3
  • 35
  • 47
  • FYI, that isn't plain Javascript so it isn't ECMA-262 that fully defines that format. That return statement is being processed by reactjs. – jfriend00 Aug 10 '16 at 04:30
  • If you look at the raw js that gets produced after compilation... they still use the parentheses. https://facebook.github.io/react/docs/tutorial.html#jsx-syntax – geoyws Aug 10 '16 at 04:32
  • Well, if this is a JS question about Javascript standards, then post the actual JS, not the JSX. The answer to the JS syntax is that parens are just one way to define a multiline statement. – jfriend00 Aug 10 '16 at 04:36
  • ES5 : "*When a continue, break, return, or throw token is encountered and a LineTerminator is encountered before the next token, a semicolon is automatically inserted after the continue, break, return, or throw token.*" http://www.ecma-international.org/ecma-262/5.1/#sec-7.9.1 If you add the parens on the same line as this token, their is no more *LineTerminator*. – Kaiido Aug 10 '16 at 04:36
  • Appreciate it @Kaiido. Please put that as an answer. – geoyws Aug 10 '16 at 04:39
  • 1
    ... I don't like to post a 3sec googling as an answer, Askers should search before asking... – Kaiido Aug 10 '16 at 04:40
  • @Kaiido have already searched for it and spent a good 10 minutes. On second thought, your answer isn't complete. I already know about the semicolon insertion. I'm looking for standard's explicit mention on the use parentheses to block semicolon insertion. – geoyws Aug 10 '16 at 04:41
  • Well as I said, adding the parentheses on the same line as the token will start a new expression**, thus removing the LineTerminator. *(**Actually I didn't said that but seems obvious)* – Kaiido Aug 10 '16 at 04:47
  • "New expression" Yep I just realised it is just a vanilla JS parentheses closure. Great @Kaiido thanks! – geoyws Aug 10 '16 at 04:47
  • 1
    Here's a good answer to this: http://stackoverflow.com/a/2846298/694086 – Felipe Brahm Aug 10 '16 at 06:19

2 Answers2

1

There is no specific part of the spec that handles using parens for returns. Parenthesis is just one way to create an expression.

slebetman
  • 109,858
  • 19
  • 140
  • 171
1

When a continue, break, return, or throw token is encountered and a LineTerminator is encountered before the next token, a semicolon is automatically inserted after the continue, break, return, or throw token.

http://www.ecma-international.org/ecma-262/5.1/

Looks like the parentheses here are just vanilla JS expressions wrapped in parentheses i.e return (1 + 2), except multi-line:

function x() {
    return (
        1 + 2
    );
}

*Edited to not use the word closure.

geoyws
  • 3,326
  • 3
  • 35
  • 47
  • Using the word [closure](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures) here can be a bit misleading. – noppa Aug 10 '16 at 05:16