How do function expressions work in Javascript in the parser?

Question

Recently I learned about the differences between these three things:

var a = function() { ... };

function a() { ... };

var a = (function() { ... })();

However, I'm trying to figure out what makes the function expression work the way it does when its parsed. That is, as far as I understand, if I included (function() {...})(); on a line in my Javascript code, it would immediately execute. Is this true?

If so, what happens when the parser sees that? Is it because the function is wrapped in the parentheses or because of the appended parenthesis, or something else? I read on the MDN docs on Table 3.7 that () and new are one way to call/create a new instance of something, so could I achieve the same result of (function() {...})(); with new Function(...);? (Disregarding the fact that new Function(); takes strings).

The third is an example of IIFE or immediately-invoked function expression. Try Googling it, or self-invoking function. — j08691
– j08691, Commented Jun 25, 2014 at 15:48
Do you want to know how the parser parses the JavaScript code? — VisioN
– VisioN, Commented Jun 25, 2014 at 15:48
stackoverflow.com/questions/336859/… and stackoverflow.com/questions/8228281/… — epascarello
– epascarello, Commented Jun 25, 2014 at 15:49
I suppose you could decompile the browser. Language parsing is a fairly well-known technique. — Robert Harvey
– Robert Harvey, Commented Jun 25, 2014 at 15:53

Community · Accepted Answer · 2017-05-23 11:57:50Z

1

if I included (function() {...})(); on a line in my Javascript code, it would immediately execute. Is this true?

Yes. It's called an immediately executed function expression.

Is it because the function is wrapped in the parentheses or because of the appended parenthesis, or something else?

The wrapping parentheses are of no significance to the execution, you could in fact omit them (when you use the result in another expression, to avoid the syntactic ambiguity with a function declaration) or place them differently. However, the "appended parenthesis" are just a plain function call: anything_that_resolves_to_a_function()

I read on the MDN docs on Table 3.7 that () and new are one way to call/create a new instance of something.

Yes. You shouldn't use new function() { … } though.

so could I achieve the same result of (function() {...})(); with new Function(...);?

No. The Function constructor is a completely different beast.

edited May 23, 2017 at 11:57

CommunityBot

11 silver badge

answered Jun 25, 2014 at 15:54

Bergi

671k162 gold badges1k silver badges1.5k bronze badges

Sign up to request clarification or add additional context in comments.

11 Comments

Alnitak Over a year ago

Unless I misunderstand what you're saying, the wrapping parentheses are significant because they're what make it an expression instead of a declaration. You can't just write function f() { } ().

Bergi Over a year ago

@Alnitak: OP is assigning to var a, so it's an expression anyway. It makes a difference only if it the top expression of an expression statement.

Alnitak Over a year ago

I think you've lost some context in your answer - sure, var a = ... is definitely an expression, but you don't refer to that, and the only previous use of function in your answer is (function() { ... })() which emphatically does need the wrapping parentheses.

Alnitak Over a year ago

Although I now know what you meant, I think your answer is still unclear - it still looks like you're referring to the earlier (function() { ... })() and not the omitted part of the OP's question.

Alnitak Over a year ago

@JoshuaSmock yes - the appended parentheses invoke the function (expression), and like a normal function call can also include parameters.

|

Collectives™ on Stack Overflow

How do function expressions work in Javascript in the parser?

1 Answer 1

11 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

11 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related