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)

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.