Why does the { position affects this Javascript code?

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)

Monometallism

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.

Flock

Answer 2

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 ;

Alembic

Answer 3

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.

Elisabetta

Answer 4

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.

Heartbroken

Everything is correct except of this: "so the next line is not expected". Next line is expected, but the { foo: 'bar' }; statement is syntactically incorrect – Ritenuto

Edited to do a more explained answer for "so the next line is not expected" – Heartbroken

Okay. "Because return expects a value (or variable)" --- console.log() also expects an expression but you can split it into multiple lines. "expecting a value" doesn't mean it cannot be put into another line. – Ritenuto

Answer 5

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/

Interception

"is that the position of the brackets matters" --- it's not. A position of expression matters, not curly braces specifically. – Ritenuto

That blog posts sums it up well, thank you- I might have to re-consider my formatting – Monometallism