3

I am quite new to JavaScript and just started some more serious development in JavaScript. I had a lot of fun implementing the Module pattern. One thing that really drove me crazy was the behavior of the 'return' statement. It is a big difference if you write 

Test = ( function()
{
    var message = "Hello World!";

    return
    {
        // Does not work
        printTest: function() { window.alert(message); }
    };
}());

or

Test = ( function()
{
    var message = "Hello World!";

    return {
        // Works well
        printTest: function() { window.alert(message); }
    };
}());

Note the curly brace after the 'return' statement.

Is that a typical stupid rookie error and is well documented somewhere?

Firebug was not able to give a hint. IE9 and Chrome did report some obscure syntax error at a later location in the code: the opening brace after the 'function' statement in "printTest: function()".

Any comments on this? Are there more such pitfalls in JavaScript?

Andreas
  • 1,551
  • 4
  • 24
  • 55
  • Although none of your examples would work since you have a semi-colon inside the property enumeration of the object to be returned. It should be right after the alert, not after the curly brace. – PatrikAkerstrand Oct 11 '11 at 08:58

4 Answers4

10

If you put your brackets to the next line, the interpreter assumes that there is a semi-colon.

So your return statement will be interpreted as:

return; 
{
   printTest: function() { window.alert(message); };
}

If I remember well, i've red about this problem in JavaScript: The Good Parts

A.3. Semicolon Insertion

JavaScript has a mechanism that tries to correct faulty programs by automatically inserting semicolons. Do not depend on this. It can mask more serious errors. It sometimes inserts semicolons in places where they are not welcome. Consider the consequences of semicolon insertion on the return statement. If a return statement returns a value, that value expression must begin on the same line as the return:

return
{
   status: true
};

This appears to return an object containing a status member. Unfortunately, semicolon insertion turns it into a statement that returns undefined. There is no warning that semicolon insertion caused the misinterpretation of the program. The problem can be avoided if the { is placed at the end of the previous line and not at the beginning of the next line:

return {
   status: true
};

"JavaScript: The Good Parts by Douglas Crockford. Copyright 2008 Yahoo! Inc., 978-0-596-51774-8."

user278064
  • 9,982
  • 1
  • 33
  • 46
  • +1 Excellent none-ambiguous answer!    As Crockford also states, this should answer the ancient curly brace *style* discussions: If one does *not* want to break style-*uniformity*, then the opening curly brace *always* comes after the statement (on the same line), *not* on a (next) blank line. – GitaarLAB Jun 14 '13 at 13:16
3

Are there more such pitfalls in JavaScript?

This made me smile :) Oh boy, you're in for a treat.

Have a look at this site for example: http://wtfjs.com/

Jakob
  • 24,154
  • 8
  • 46
  • 57
1

Yes, it's a difference. I think it actaully is a part of documentation, the subject that is to be returned has to be in the same line as the return statement. It's beacause semicolons are optional, and the expression is interpreted as

return;
{
 ....
}
usoban
  • 5,428
  • 28
  • 42
1

JavaScript does automatic semi-colon insertion. If you put the brackets on the next line after the return, the interpreter automatically inserts a semi-colon after the return, ending the statement.

Kai
  • 9,038
  • 5
  • 28
  • 28