Why does the { position affects this Javascript co

Question

I spent a fair bit of time on this Javascript issue (you can tell I am a JS noob):

Take some well written Javascript code like this example of the Revealing Module Pattern:

Running it works fine. Then move the "{" to the next line (as a C# developer I set up all my environments to put curly braces on new lines) and run it again.

  return   
  {
    someMethod : myMethod,
    someOtherMethod : myOtherMethod
  };

It now gets quite a few JS errors around "13 Line breaking error 'return'." and "Uncaught SyntaxError: Unexpected token : " in Chrome Debugger.

My question is, how can something syntactically affect the Javascript like this?

I have set it up here in JSFiddle (to get it to work, move the { after "return" back on to the same line)

Answer 1

One of JavaScript’s worst features is Automatic Semicolon Insertion.

return; // a semicolon is implicitly inserted here

And this part is almost valid JavaScript, but not quite, so you get a syntax error:

{
    someMethod : myMethod,
    someOtherMethod : myOtherMethod
};

If you had tried to do this:

return
    [ 1, 2, 3,
      4, 5, 6,
      7, 8, 9 ];

it would have just returned undefined all the time, and that would have been bad. ASI sucks, but we’re stuck with it now, especially since semicolonless code has become a fad.

What does this do?

return a
     + b
     + c;

This?

return e
     / f /g;

Okay, okay, maybe that one’s a bit contrived, and maybe this isn’t entirely topical. But ASI is bad. I hope everyone gets that.

Answer 2

Javascript has some strange bits to it and one is that the position of the brackets matters - keep the opening one on the same line as the code

http://encosia.com/in-javascript-curly-brace-placement-matters-an-example/

Answer 3

Because return expects a value (or variable), when you put the curly brace in the same line you are telling return a hash but if you move the curly brace to the next line then you are telling return nothing so the next line is not expected.

EDIT The next line is not expected in the context of return.

Answer 4

Because the ECMA standard section 12.9 states you can't have a new line between the return keyword and its expression.

    ReturnStatement :
       return ;
       return [no LineTerminator here] Expression ;

Answer 5

Javascript does something called Automatic semi-colon insertion which I believe is what is affecting your results here. Basically, it sees the return statement with nothing after on the line, and thinks that's the end of the line and returns, ending the function.