Why is a semicolon required at end of line?

Question

Why does this work:

a = []
a.push(['test']);
(function() {alert('poop')})()

But this gives the error "number is not a function":

a = []
a.push(['test'])
(function() {alert('poop')})()

The only difference is the semicolon at the end of line 2. I've been writing JavaScript for a long time now. I know about automatic semicolon insertion, but I can't figure out what would be causing this error.

Worth to read: [What are the rules for Javascript's automatic semicolon insertion?](http://stackoverflow.com/questions/2846283/what-are-the-rules-for-javascripts-automatic-semicolon-insertion) — Felix Kling, Mar 02 '11 at 18:29
There are certain circumstances where semicolons are not automatically inserted, this is one of them. You should always add semicolons at the end of your lines to specifically avoid problems such as this. — jordancpaul, Mar 02 '11 at 18:24
possible duplicate of [Do you recommend using semicolons after every statement in JavaScript?](http://stackoverflow.com/questions/444080/do-you-recommend-using-semicolons-after-every-statement-in-javascript) — nawfal, Jul 23 '14 at 07:46

ChaosPandion · Accepted Answer · 2011-03-02T18:32:33.717

Take a look at this example of chained function calls.

a.push(['test'])(function() {alert('poop')})()

Look familiar? This is how the compiler/interpreter views your code.

Detail

Here is a portion of the grammar used to describe call expressions.

CallExpression : 
	MemberExpression Arguments 
	CallExpression Arguments 
	CallExpression [ Expression ] 
	CallExpression . IdentifierName

Essentially each group (...) is considered as Arguments to the original MemberExpression a.push.

a.push (['test'])                // MemberExpression Arguments 
(function() {alert('poop')})     // Arguments  
()                               // Arguments

Or more formally

CallExpression(
    CallExpression(  
        CallExpression(
            MemberExpression( a.push ),
            Arguments( (['test']) )
        ),
        Arguments( (function() {alert('poop')}) )
    ),
    Arguments( () )
)

Ah, makes perfect sense! Thanks for clearing that up! Now I can abuse the alert() function! ... — Johntron, Sep 02 '11 at 01:49

score 3 · Answer 2 · answered Mar 02 '11 at 18:23

I'm not a Javascript expert (or even a newbie :), but if you combine the second and third lines, it still looks syntactically valid:

a.push(['test'])(function() {alert('poop')})()

That's trying to treat the result of a.push(['test']) as a function, passing a function into it... and then calling the result as a function as well.

I suspect that the semi-colon is required if the two statements can be syntactically combined into a single statement, but that's not what you want.

score 1 · Answer 3 · answered Mar 02 '11 at 18:25

Because

a.push(['test'])(function() {alert('poop')})()

is a valid JavaScript expression. And if some adjacent lines can be stick together to form a valid JavaScript expression, your JavaScript engine will stick them together.

Though it is a valid JavaScript expression, a.push returns a number, which is not a function, and when you try to call something that is not a function, it returns the error you see.

score 1 · Answer 4 · answered Mar 02 '11 at 18:26

a.push(['test']) will return the length of the array, a number. Without a semicolon following, the compiler will then interpret the opening parentheses of self-invoking function following as if you're trying to execute that number as a function with arguments. Let's say it returned a length of 7, then essentially what is happening here is as if you wrote:

7 (function() {alert('poop')})();

Hence the error "number is not a function" because it doesn't know how to invoke 7 as a function.

score 1 · Answer 5 · answered Mar 02 '11 at 18:38

There are cases where white space is not required as a token separator but only used to improve readability:

White space characters are used to improve source text readability and to separate tokens (indivisible lexical units) from each other, but are otherwise insignificant. White space may occur between any two tokens […] but cannot appear within any other kind of token.

In this case the white space between a.push(['test']) and (function() {alert('poop')})() is not for token separator and thus insignificant. So it’s equivalent to this:

a.push(['test'])(function() {alert('poop')})()

And since a references an empty array with the length 0, calling a.push(['test']) appends one element to a and returns the updated value of a.length, i.e. 1:

1(function() {alert('poop')})()

And the rest is history.

score 0 · Answer 6 · answered Mar 02 '11 at 18:23

0

a.push(['test']) returns a number.

You then attempt to call the number as a function with function() {alert('poop')} as the only argument.

Hence your error, number is not a function.

answered Mar 02 '11 at 18:23

Eric

95,302
53
242
374

score 0 · Answer 7 · answered Mar 02 '11 at 18:23

The result of a.push() is the size of the returned array, in this case, 1. The enclosing parentheses around your function make the Javascript parser think that you're trying to call:

1( function() {alert('poop')} )()

Or that you're trying to call a function called 1 with an anonymous function as a parameter, then execute the return as a function.

Why is a semicolon required at end of line?

7 Answers7

Linked