weird syntax error with closures in java script

Question

I am trying to understand one of the properties of js closures that says : ref from Closures store references to the outer function’s variables

function myId()
{
var userID=999;
return 
{
    getId: function()  {
        return userID;
    },
    setId: function(newId)  {
        userID = newId;
    }
};
}
var callInnerFun = myId();
console.log(callInnerFun.getId());
callInnerFun.setId(500);
console.log(callInnerFun.getId());

When i try running the above code in Node or even on the browser, i get the following error:

SyntaxError: function statement requires a name at getId: function() {

I have tried and failed to understand what am i really missing out on. Is it some syntactical error, or is it something to do with my text editor, sublime text, because, if i try running the exact same code as copied from the link given above, then things work.

Whereas in my code (above) the logic is still the same as the reference, just the indentation and the variable names have changed. Is it that changing these have broken my code ?

Typo: The `getId` `function` is trailed by an extra `}`. Also, [`return` statements don't allow line-breaks between the keyword and the value expression](http://stackoverflow.com/questions/18221963/javascript-function-fails-to-return-object-when-there-is-a-line-break-between-th). The object literal/initializer, however, allows for them after the `{`. — Jonathan Lonowski, Aug 13 '14 at 06:19
The error is because the `{...}` is being parsed as a separate statement, as a [block](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/block) rather than an object literal; with `getId:` as a [label](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/label) rather than a key; and the `function` as a [declaration](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function), which requires a name, rather than as an [expression](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/function). — Jonathan Lonowski, Aug 13 '14 at 06:29

score 1 · Accepted Answer · answered Aug 13 '14 at 06:18

You have two bugs: the first is an extra closing brace before setId. Once you remove that, change:

return 
{

to

return {

In Javascript, brace position matters since it inserts a semicolon after the return statement if you don't have one which you don't want. Also I changed the brace position in your myId definition. The final code is:

function myId() {
var userID=999;
return {
    getId: function()  {
        return userID;
    },
    setId: function(newId)  {
        userID = newId;
    }
};
}
var callInnerFun = myId();
console.log(callInnerFun.getId());
callInnerFun.setId(500);
console.log(callInnerFun.getId());

Thanks. The first bug as you mentioned was a typo while posting the code here in stack. And the secind bug made sense, as i did not know that JS auto puts in semi colons. — qre0ct, Aug 13 '14 at 06:49

score 0 · Answer 2 · edited Aug 13 '14 at 06:40

0

One '}' is extra here. And also it should be 'return {'

Change the below

getId: function()  {
    return userID;
}
},

to

getId: function()  {
    return userID;
},

Hope it helps !!

edited Aug 13 '14 at 06:40

Kevin Labécot

2,005
13
25

answered Aug 13 '14 at 06:35

user3848478

27
3

That was a typo while posting the code here in stack. – qre0ct Aug 13 '14 at 06:46

weird syntax error with closures in java script

2 Answers2