Javascript source format very strange

Question

Please see this

the "original text" on the left work perfect, the "changed text" on the right give me error

Uncaught SyntaxError: Unexpected token } MapModule.js:34
Uncaught TypeError: Cannot call method 'initialize' of undefined localhost/:103 (anonymous function) localhost/:103

I can not understand what the difference is.

if you are wondering how I have modified the file, it is simple, I just used from Aptana 3 source->format...

The code is the same except whitespace, are you sure that your compiler isn't inserting a `;` delimiter where you're not expecting one in your new white-space configuration? Otherwise the problem is elsewhere (clear cache, etc, check everything is defined) — Paul S., Jun 02 '13 at 16:52

score 2 · Answer 1 · answered Jun 02 '13 at 16:57

You've broken the return statement. You can't start an object literal on the next line after a return statement, because the parser will get confused. You have to leave the { on the same line as return, in other words.

The issue involves the problematic and controversial JavaScript "semicolon insertion" rules.

The original code also includes a stray comma at the end of the object literal. That should be removed.

score 2 · Answer 2 · edited May 23 '17 at 10:25

2

This is because JavaScript's automatic semicolon insertion (ASI) that will insert a semicolon after certain statements if you're ending them with line breaks. You can read about it in this SO question.

In your case the code has a line break at the return statement that will have a semicolon inserted. This means that:

return 
{
   initialize: initialize,
};

.. will become the following:

return;
{
   initialize: initialize,
};
// will now always return undefined

Uncaught SyntaxError: Unexpected token } MapModule.js:34

This error is because you have a trailing comma inside the object literal:

return {
    initialize: initialize, // <-- whoops
}

This is actually legal in most JS engines... except IE's. Surprisingly this is the one thing IE does according to spec. :-) To fix this, avoid trailing commas:

return {
    initialize: initialize // FIXED
}

Hope this clears some things up.

edited May 23 '17 at 10:25

Community

1
1

answered Jun 03 '13 at 11:07

Spoike

112,352
42
133
155

1

Sorry but I'm pretty sure that the `ìf` statement doesn't end prematurely because of ASI. It actually works just fine that way. – basilikum Jun 03 '13 at 11:27
@basilikum: You're correct, sorry about that confusion. Removed that part of the question. :-) – Spoike Jun 03 '13 at 11:37
Please remove the second part of your answer, it's wrong. If statements do allow line terminators between `)` and the following block, so ASI will not jump in. It's different for returns statements only because they require no line terminator to be between `return` and the optional expression. Check [the spec](http://es5.github.io/#x7.9)! – Bergi Jun 03 '13 at 11:41
@Bergi: It's been removed before your comment. – Spoike Jun 03 '13 at 12:12

basilikum · Accepted Answer · 2013-06-03T12:02:55.303

0

The return statement expects that value that you want to return to be in the same row. So this:

return {
   a:1
};

will work fine, while this:

return
{
    a:1
};

will return undefined because there is nothing behind return. What's left behind is this statement:

{
    a:1
};

This is actual a valid statement that should not produce any errors. As Spoike and Bergi already mentioned, you are receiving a syntax error because you had a trailing comma behind a:1 which suggests, that there should be another property following the property a, which isn't there.

Btw. here is a link to a video of Doug Crockford explaining this very case and also why {a:1}; is a valid statement: http://www.youtube.com/watch?v=hQVTIJBZook#t=30m38s

edited Jun 03 '13 at 12:02

answered Jun 02 '13 at 17:00

basilikum

9,714
4
38
55

That's why I like SO... I never stop learning new stuff everyday! Thanks! – Joum Jun 03 '13 at 07:28
Nope. It is because automatic semicolon insertion (ASI), not because the javascript interpreter is confused. It is an actual rule that inserts a semicolon after the return statement, leading the function to return `undefined`. – Spoike Jun 03 '13 at 11:09
@Spoike That's correct. But the statement after the return statement `{a:1};` is interpreted by some interpreters as a valid statement so that it won't result in a syntax error. OPs interpreter obviously throws an error but when I run it in Chrome, the function just silently returns `undefined` without any notification that something is wrong. – basilikum Jun 03 '13 at 11:19
It's not the statement that confuses the javascript engine, it's the trailing comma in the "object literal" – Bergi Jun 03 '13 at 11:37
1

@Bergi Yes, you're right. Good catch to you and to Spoike. Didn't notice the trailing comma. – basilikum Jun 03 '13 at 11:38

Javascript source format very strange

3 Answers3