Why does this cause a syntax error for the return statement:

var FOO = (function($)
{
    return
    {      
        init: function()
        {

        }
    }
})(jQuery);

Whereas this doesn't:

var FOO = (function($)
{
    return {      
        init: function()
        {

        }
    }
})(jQuery);

Why is there a difference?

Why does this cause a syntax error for the return statement:

var FOO = (function($)
{
    return
    {      
        init: function()
        {

        }
    }
})(jQuery);

Whereas this doesn't:

var FOO = (function($)
{
    return {      
        init: function()
        {

        }
    }
})(jQuery);

Why is there a difference?

• javascript
• jquery
• syntax
• formatting
• whitespace

• possible duplicate of What are the rules for Javascript's automatic semicolon insertion (ASI)? – Bergi Commented Aug 2, 2015 at 14:23
• @Bergi technically that question would be a duplicate of this one, since it came first ;) But the emphasis and "searchability" are different (e.g. I don't want this question deleted) – drzaus Commented Aug 4, 2015 at 17:02
• @drzaus: Duplicate closures don't need to strictly follow a temporal order - we have many canonical questions that were asked later but have higher-quality answers :-) Notice that I only wanted to link that related, very relevant post (it's not an exact dupe), I didn't (vote to) close this question. Also, closed questions don't get deleted. – Bergi Commented Aug 4, 2015 at 18:04
• @Bergi from the SO explanation of dupes > "Some duplicate questions may eventually be deleted"; unsure if it actually happens, but figured I'd "vote" to keep the question (since I found this one rather than the 'canonical') – drzaus Commented Aug 4, 2015 at 19:38
• @drzaus: Closed questions with no upvotes, no answers and few views are automatically deleted after some time. This one fulfills neither of the requirements for that :-) – Bergi Commented Aug 4, 2015 at 19:41

1 Answer 1

It's not about the whitespace, it's about automatic semicolon insertion by JavaScript.

ECMAScript specification says

Certain ECMAScript statements (empty statement, variable statement, expression statement, do-while statement, continue statement, break statement, return statement, and throw statement) must be terminated with semicolons. Such semicolons may always appear explicitly in the source text. For convenience, however, such semicolons may be omitted from the source text in certain situations. These situations are described by saying that semicolons are automatically inserted into the source code token stream in those situations.

This means that your code

var FOO = (function($)
{
    return
    {      
        init: function()
        {

        }
    }
})(jQuery);

gets translated as

var FOO = (function($)
{
    return; // <- JavaScript will insert a semicolon here.

    {      
        init: function()
        {

        }
    }
})(jQuery);

So FOO will be undefined after the function is executed.

For your other code, JS won't insert any semicolon and it will work correctly JS will insert semicolon after your literal object and it should work fine. [EDIT: Correction as pointed out by kagnax]

This means that you should always terminate your statements with semicolon. Letting JS engine insert semicolon can introduce very subtle bugs, which would take hours to debug. You can use a tool like JSLint which will warn you of missing semicolons.