Uncaught Syntax error: unexpected token ( even though function is valid

Question

I am trying to make a web application. I have a task controller in a separate .js file which I include in the main .html file:

<head>
  <script src = "tasks-controller.js"></script>
</head>

and the file tasks-controller.js:

tasksController = function() {
    var taskPage;
    var initialized = false;

    return
    {
        init: function(page) {
            if(!initialized)
            {
                 .... some manipulation with jQuery...    
                initialized = true;             
            }
        }
    }
} ();

Back in my main .html file I call tasks controller right after body closing element:

<script>
$(document).ready(function()
{
  tasksController.init($('#taskPage'));
}
</script>

When I test the file, in Google chrome tools, I get Uncaught SyntaxError: Unexpected token ( on line 8 of tasks-controller.js which is this line:

init: function(page)

along with another error that 'tasksController' is not defined when I call it above. Any suggestions to what I am doing wrong? Thanks!

Hmm, I don't see anything wrong in particular, unless there are magic spaces. — Ja͢ck, Jun 26 '15 at 05:26

Tushar · Answer 1 · 2015-06-26T05:36:08.637

1

The ready method is where the error is. You missed the ) of ready.

See the highlighted code and comments in the code below.

$(document).ready(function() {
    tasksController.init($('#taskPage'));
}); // The ) you've missed
// ^^^

Other problem in your code is the return statement. If you put the object to the next line of return it will always return undefined. Automatic semicolon insertion will cause the code to put semicolon after return.

So, it'll be like return;.

Use following code:

tasksController = function() {
    var taskPage;
    var initialized = false;

    return {
        init: function(page) {
            if (!initialized) {
                ....some manipulation with jQuery...
                initialized = true;
            }
        }
    };
}();

edited Jun 26 '15 at 05:36

answered Jun 26 '15 at 05:28

Tushar

85,780
21
159
179

Um, there is one there. – Scimonster Jun 26 '15 at 05:28
@Scimonster `` Don't see in this – Tushar Jun 26 '15 at 05:29
DownVoters, please add comments here – Tushar Jun 26 '15 at 05:32
I think automatic semicolon insertions happens when minified. I may be wrong. – Bhojendra Rauniyar Jun 26 '15 at 05:35
@BhojendraNepal NO! It happens for all the javascripts – Tushar Jun 26 '15 at 05:35

score 0 · Answer 2 · edited May 23 '17 at 12:22

Due to implicit semicolons, your code equals this:

return;
{
    init: function(page) {
        if(!initialized)
        {
             .... some manipulation with jQuery...    
            initialized = true;             
        }
    }
}

The return is returning nothing, and so the {} makes a new block. Now you can see why you have a syntax error.

Just change the first line to return { (no newline) and you should be good.

See Strangest language feature.

Uncaught Syntax error: unexpected token ( even though function is valid

2 Answers2