TypeError with two consecutive self-executing anonymous functions

Question

This question is inspired from the accepted answer here. Why does the following piece of code alert "first", then "second", then errors out with a TypeError?

(function() {
    alert('first');
}())


(function() {
    alert('second');
}())

The given explanation is that the returned value of the first function is trying to get called. But why did that happen? [Also, why didn't semi-colon insertion add a semi-colon after the first self-execution?]

score 6 · Accepted Answer · answered Dec 24 '11 at 15:03

6

Without semicolons it will evaluate to:

(function() {
    alert('first');
}())(function() {
    alert('second');
}())

The first function is executed, and since it does not return anything, it evaluates further to:

undefined(function() {
    alert('second');
}())

Then the second function is executed, and it returns again undefined, so:

undefined(undefined)

Which does not work of course (TypeError since undefined is not a function). Separate function calls should be separated with a semicolon, as every statement should actually be.

answered Dec 24 '11 at 15:03

pimvdb

151,816
78
307
352

1

I see now! But why didn't semi-colon insertion kick in here? – Randomblue Dec 24 '11 at 15:06
@Randomblue: It doesn't apply to the rules in the specs: http://es5.github.com/#x7.9.1. A call is defined as `CallExpression : MemberExpression Arguments` which does not require `[noLineTerminator here]`, so a semicolon should not be inserted. (This is in contrary to e.g. `return`, which does have that requirement and does have a semicolon inserted.) – pimvdb Dec 24 '11 at 15:08
@Randomblue Because it has no reason to. Semi-colons are only inserted after statements that don't make sense without them. See the rules here: http://es5.github.com/#x7.9 – Zirak Dec 24 '11 at 15:09

score 2 · Answer 2 · answered Dec 24 '11 at 15:06

ASI, Automatic Semicolon Insertion. Your code should've been written like this:

(function() {
    alert('first');
}()); //<--semicolon


(function() {
    alert('second');
}()); //<--semicolon

Instead, here's the step that are taken:

(function() {
    alert('first');
}())


(function() {
    alert('second');
}())

//now, the interpreter guesses that you mean to concatenate the two
(function() {
    alert('first');
}())(function() {
    alert('second');
}());
//it also inserts a semi-colon where it should've appeared at the end of the script

//first function doesn't return anything === returns undefined
undefined(function() {
    alert('second');
}());

//second function doesn't return anything === returns undefined
undefined(undefined);
//however, the braces stay, since they can also mean function execution

undefined is not a function, therefore it cannot be executed, therefore, you get a TypeError.

@Randomblue ASI kicks in only when a parse error would be thrown if a semi-colon isn't there. In other words, when there has to be a semi-colon, but there's something else (like a new-line character.) The rules are very well defined here: http://es5.github.com/#x7.9 — Zirak, Dec 24 '11 at 15:13

score 1 · Answer 3 · answered Dec 24 '11 at 15:07

It happened because that's the way your program was parsed. We could sumarise the program as

 (some stuff) (some more stuff)

And it's clear that this should try to call the some stuff as a function. Of course a semi-colon would fix the problem and you were hoping that semi-colon insertion would have done it automatically for you. Without knowing the detailed insertion rules, I would just say that nothing was inserted becuse the rules are specifically designed to not change otherwise well defined behaviour.

Of course, you might not consider this behaviour "well defined". But language rules never work well in every situation.

TypeError with two consecutive self-executing anonymous functions

3 Answers3