javascript：为什么这个return语句会导致语法错误？

Question

I'm using Apatana 3, i modified the JS code formatter a little bit to let it seem more clear, below is the code after format, it give me an error:

    copyOffset : function( index )
    {
        return
        {
            x : index, y : index
        };
    }

firebug give me:

SyntaxError: invalid label

if i change it to:

    copyOffset : function( index )
    {
        return{
            x : index, y : index
        };
    }

will be OK, Anybody who can tell me what's the diff between these two return statement?

Answer 1

The difference is that the first snippet is actually interpreted as...

copyOffset : function( index )
{
    return;
    {
        x : index, y : index
    };
}

It's called Automatic Semicolon Insertion : when JavaScript parser sees a statement that seems to be complete, but misses semicolon, it attempts to 'fix' it.

And yes, even though helpful at times, it can be quite annoying. This article explains this JavaScript feature in details.

Answer 2

Haha, this is a classical one;)

Javasript breaks on

return
{

because it treats { as a new block and implicitely inserts a semicolon:

return;
{

thus returning undefined:-D

The Problem is Javasript inserting a Semicolon at the end of a line when the statement makes sense. Since return can stand on it's own, Javascript interprets it as a complete statement and inserts the semicolon, thus breaking your code.

Actually, this is the reason, why in Javascript you alway should avoid those newlines and write:

copyOffset : function( index ){
    return{
        x : index, y : index
    };
}