Curly bracket with "return" keyword

Question

var calculator = function ()
{
   function abc() { return (2+3); }

   return {
        addFun: abc
   }
}();


var calcu = function () {
    function abc() { return (3+4); }

    return 
    {
        addFun: abc
    }
}();


$(document).ready(function () {
    alert(calculator.addFun());
    **alert(calcu.addFun());**
});

What is difference between calculator and calcu function? calcu function gives error when it execute.

Difference is only that curly bracket is next line in "calcu". It is work fine if I remove next and put curly bracket with "return" keyword.

Please explain why so?

yes, semi-colon insertion is different after a return statement than it is elsewhere... — dandavis, Jan 05 '14 at 18:41

score 5 · Answer 1 · answered Jan 05 '14 at 17:34

5

It's being parsed as this:

return; // returns undefined
// a block:
{
    addFun: abc // syntax error!
};

because of automatic semicolon insertion.

Change it to:

return {
     addFun: abc
};

answered Jan 05 '14 at 17:34

tckmn

57,719
27
114
156

Too many edits! It will become a community wiki! – Cilan Jan 05 '14 at 17:36
@Man Edits 5 minutes after posting don't count :P – tckmn Jan 05 '14 at 17:37
1

Nitpick: the error arises because `undefined` has no method named `addFun`. There's no syntax error. – Blender Jan 05 '14 at 17:51
Or put parens around what you're returning. – jfriend00 Jan 05 '14 at 17:55
@Blender Actually, `addFun` is parsed as a label and `abc` is a `ReferenceError`. But yes, technically it's not a syntax error. – tckmn Jan 05 '14 at 17:58
1

@DoorknobofSnow: Are you sure? I get `TypeError: Cannot read property 'addFun' of undefined`. – Blender Jan 05 '14 at 18:07

score 5 · Answer 2 · answered Jan 05 '14 at 17:44

It's called automatic semicolon insertion:

When a continue, break, return, or throw token is encountered and a LineTerminator is encountered before the next token, a semicolon is automatically inserted after the continue, break, return, or throw token.

Since there's a newline right after your return statement, a semicolon is inserted automatically, turning your code into:

return;
{
    addFun: abc
}

Alec Moore · Answer 3 · 2014-01-05T17:46:50.280

2

Return is a tricky keyword in JavaScript. In the first example, you are returning an anonymous object to the calculator function, and in the second example you are returning no values. JavaScript will interpret the second function like this:

var calcu = function() { 
    function abc() ...

    return; // return undefined
    {
          addFun: abc
    }

Notice the semi colon is interpreted after the return keyword and thus the calcu function will return nothing.

edited Jan 05 '14 at 17:46

answered Jan 05 '14 at 17:41

Alec Moore

1,155
2
10
20

Yep, this is the case where parens around what you're returning removes all chance of the interpreter guessing your intentions wrong. I'm often criticized for using parens around my return values, but this is exactly the case where it's needed. – jfriend00 Jan 05 '14 at 17:54

score 1 · Answer 4 · edited Jan 05 '14 at 17:36

1

return 
{
    addFun: abc
}

This is wrong because JavaScript would execute return and will get out. This should be

return {
    addFun: abc
}

edited Jan 05 '14 at 17:36

Travesty3

14,351
6
61
98

answered Jan 05 '14 at 17:36

Alex Shilman

1,547
1
11
15

@Travesty3 sorry copy paste error ;) – Alex Shilman Jan 05 '14 at 17:38
No problem. But the lack of code-styling was making your answer appear wrong. So I wanted to make sure it got fixed before you got a ton of downvotes. – Travesty3 Jan 05 '14 at 17:39

Angular University · Answer 5 · 2014-01-05T18:04:33.533

1

Have a look at linting tools such as jshint to avoid this and many other errors, here is it's output:

enter image description here

What happens is that this section:

return 
{
    addFun: abc
}

is being interpreted as two statements, a return void (the function returns void immediatelly) plus an object expression containing addFun that is not assigned to anything.

edited Jan 05 '14 at 18:04

answered Jan 05 '14 at 17:45

Angular University

42,341
15
74
81

Curly bracket with "return" keyword

5 Answers5