CODEWITHSUNDEEP
javascriptsyntax-error
Akash Kava
Akash Kava

Reputation: 39956

Why do I get unexpected "(" token in following script?

Ok, I know what I am doing and I purposely want many multiple scripts like this to be on my page, because these scripts are not supposed to be evaluated on load, however if I set type="something else" then I do not get intellisense and validation which creates trouble while development.

<script type="text/javascript" id="s">
{
    //                <- following '(' is unexpected
    update: function (o){
        alert(o);
    }
}
</script>

However when I do this, its alright,

<script type="text/javascript" id="s">
{
    update: function x(o){
        alert(o);
    }
}
</script>

Notice the "x" before round brackets. Problem is, if I write "x" then window.x is set to this method and writing multiple scripts creates even further problem.

When I change it to,

<script type="text/javascript" id="s">
{
    update: function x(o){
        alert("s-update: " + o);
    },
    method: function x(y){
        alert("s-method: " + y);
    }
}
</script>

Then I get unexpected token ',' before method.

  1. I want to know how can I create just an JavaScript Object Notation which will be executed later on by giving ids. See working code at http://jsfiddle.net/MDJbT/, but I do get a script error if I include , and if I remove , then I get no script error but my code does not get executed, http://jsfiddle.net/2ykdD/1/.
  2. I need this in a framework which will allow us to write scripts in completely "id" independent way, so that there will not be any conflict of global methods. Both scripts have same names, but different logic. The only difference is the "id", I know which ID to refer and which method to call.
  3. This is very small part of complicated framework where ids are automatically assigned and methods are part of class hierarchy which is dynamically set in runtime, preserving scope.
  4. I do not want these scripts to be executed at all.
  5. I want these scripts to be written in such way so that Visual Studio and other editors will precisely show intellisense and give errors about syntax etc.
  6. I will execute these scripts only on action invoked by user within an eval scope by providing further method arguements.

Upvotes: 3

Views: 3273

Answers (4)

Andy E
Andy E

Reputation: 344803

{ indicates the start of a block in JavaScript, as is evident by the following piece of code (which is valid syntax):

{ var hello = "test" }

Internally, this is translated to the following sequence (remembering that variable declarations are hoisted and not block scoped):

  1. Define variable hello
  2. begin block delimited with {
  3. assign value "test" to Hello
  4. end block

Ignoring the block, it's equivalent to var hello = "test". If we apply this same logic to your code, then 

{
    //                <- following '(' is unexpected
    update: function (o){
        alert(o);
    }
}

is translated to the following sequence:

  1. begin block delimited by {
  2. define label update
  3. begin function statement
  4. throw syntax error

Ignoring the block delimiters, the code is interpreted as:

update: function (o){
    alert(o);
}

The reason for the syntax error is that a function statement must have a name. In your second example, the function statement is valid because it has a name. Both function statements have names in the 3rd but the , is invalid when following a function statement.

As others have mentioned, the problem is fixed when you wrap the whole thing in braces, because the code becomes an expression and, therefore, legal syntax.

Upvotes: 2

Linus Kleen
Linus Kleen

Reputation: 34662

The second statement is valid, because update: is interpreted as a label, not as a key of an object. You'll have to enclose the anonymous object with parentheses to make it work.

The third is invalid because a misplaced list operator (which , is interpreted as in this case).

Upvotes: 2

Andrew D.
Andrew D.

Reputation: 8220

<script type="text/javascript" id="s">
({
    update: function(o){
        alert("j-update: " + o);
    },
    method: function(y){
        alert("j-method: " + y);
    }
})
</script>

http://jsfiddle.net/MDJbT/1/

Upvotes: 2

meze
meze

Reputation: 15097

Javascript wants a hint that { ... } is an expression:

 ({
    update: function x(o){
        alert("s-update: " + o);
    },
    method: function x(y){
        alert("s-method: " + y);
    }
})

Upvotes: 5

Related Questions