Hallvord R. M. Steen

spot a subtle JS error here..

Thursday, October 5, 2006 9:35:16 PM

The other day I ran into weird errors while editing the Y!Mail patch in browser.js. The whole thing stopped working, and it took me a while to see the problem. Can you see it?

// need to fake someMethod
Element.prototype.someMethod=function(){
    // faking someMethod here
}
// we also have an insertBefore problem so let's fix that too
(function(oF){
    // tweaking insertBefore here
})(Element.prototype.insertBefore);

What was wrong? Hats off if you can see it without running the code..

how to use or survive WebForms2event capture explained

Comments

Robert GræsdalRobbieGee # Thursday, October 5, 2006 10:01:15 PM

~~I believe it's lacking a semicolon after the first anonymous function declaration.~~

No, I was wrong, linebreak should save that.

Robert GræsdalRobbieGee # Thursday, October 5, 2006 10:17:58 PM

AHA! Wait a second, it is related to the semicolon!

What will happen is that Element.prototype.someMethod will contain what was returned from function(){ something } with the argument to that being the result from the second anynomous declaration.

Correct? :-)

Robert GræsdalRobbieGee # Thursday, October 5, 2006 10:25:35 PM

Just to expand so my thinking is clearer to others that might read this, the interpreter will compute the result as follows:

1. Element.prototype.someMethod is to be filled, to know with what, we must compute the next statement.
1.1 function(){ faking someMethod here } is being returned as an object, but it is followed by a parenthesis, indicating we want to call that function right away.
1.1.1 In order to compute the parameter, we must compute what function(Element.prototype.insertBefore){tweaking insertBefore here} returns, which is null
1.2 We can now find what function(){faking sometMethod) returns by giving it the parameter 'null' - which it ignores and returns null.
2. Element.prototype.someMethod is now null

cwolves # Thursday, October 5, 2006 10:40:27 PM

Or to put it simplier (I hope)...

The 2nd function is being passed as an argument to the first because of the parenthesis and lack of semi-colon. Removing the parenthesis or adding the semi-colon should fix it.

Hallvord R. M. Steenhallvors # Thursday, October 5, 2006 10:44:23 PM

You're basically right. (AFAIK in your 1.1.1 above is wrong because the "insertBefore" function isn't run at this point but simply passed as an argument to the someMethod function).

It took me a while to understand this issue - sort of masked by all the lines of comments between the blocks, and by the fact that in many of the redefined functions I'm just passing arguments on to the real function without knowing what they are so it was very non-obvious where to start looking in the big Y!Mail scripts when a function that expected an HTML element received a function object

Shows why optional semi-colons maybe wasn't a good idea - they become really weird bugs in the few cases where they aren't in fact optional after all..

Robert GræsdalRobbieGee # Thursday, October 5, 2006 11:03:15 PM

hallvors (and cwolves): You're right about 1.1.1 being wrong, testing it reveals that the entire function object is being passed as a parameter. I just figured that it would go on forever as long as there were more parenthesis'. Good job finding this doozy! I'm learning so much from all this, please keep posting :-)

However, next time we meet I'm going to demand that you tip your hat at me as promised ;-P

cwolves # Friday, October 6, 2006 2:57:43 AM

RobbieGee -

What's actually happening is that the 2nd function is getting passed as a parameter to the 1st. The next set of parenthesis (Element.prototype.insertBefore) is being passed as a parameter to the result of the first function. Since the first function doesn't return a function itself, you should get an error. And actually if the 2nd set of parenthesis wasn't there, the problem would have probably never been noticed.

x=function(a){
return function(b){ alert(a+b); }
}

(a=5)(b=6);

Also note that this only happens because you're assigning the first function to a variable. If the first function was just a function (wasn't a prototype), this wouldn't happen.

João EirasxErath # Friday, October 6, 2006 4:27:08 AM

insertBefore is declared in Node, not Element

I came up with the exact same problem when making my syntax highlighter script. Now to avoid problems I ALWAYS place semicolons where there can be one.

Alexey Feldgendlerfeldgendler # Friday, October 6, 2006 5:28:02 AM

I wonder why they made the semicolons optional -- to make the grammar slightly more ambiguous?

Hallvord R. M. Steenhallvors # Saturday, October 7, 2006 3:02:39 PM

Bonus points to xErath for noticing a second bug - just typing in the demo for the sake of the post, I knew I should have copied and pasted it ;-)

feldgendler: simply to make it easier for beginners. It is in fact quite a lot easier to get things working when the browser forgives you for forgetting a semi-colon - in theory it is a great feature for a newbie-gentle scripting language.

Alexey Feldgendlerfeldgendler # Monday, October 9, 2006 7:58:32 AM

If semicolons were strictly required, a missing semicolon would be a bug which can be spotted at the very first run. In reality, a missing semicolon in an obscure place like this is a bug which can take hours to locate.

cwolves # Friday, October 13, 2006 2:40:36 PM

Although I've never encountered this before in my own code, I amazingly enough just ran into it, only what, a week after your post? Took me about a second to recognize, thanks to this discussion :-)

Number.prototype.NaN0=function(){return isNaN(this)?0:this;}

(function classNamespace(){
var C = function() {
...

:-)

Alexey Feldgendlerfeldgendler # Sunday, October 15, 2006 7:36:19 AM

Does the ECMAScript spec define how to handle such ambiguities? I didn't dive so deeply into the spec.

João EirasxErath # Wednesday, November 8, 2006 6:18:45 AM

Does the ECMAScript spec define how to handle such ambiguities? I didn't dive so deeply into the spec.

It's not an ambiguity. Removing uneeded white-space revals

function(...){
  ...
}( ... )

So you're clearly declaring a function, and calling it at the same time.

It's a matter of perspicacity.

Alexey Feldgendlerfeldgendler # Friday, November 10, 2006 6:04:58 AM

expression
(expression)

can be interpreted either as a function call or as two statements between which a semicolon has been omitted. Here is the amiguity.

Hallvord R. M. Steenhallvors # Tuesday, November 21, 2006 1:44:53 AM

xErath: what does perspicacity mean? Lovely word