CODEWITHSUNDEEP
javascriptecmascript-6
avgvstvs
avgvstvs

Reputation: 6315

Named vs unnamed functions in javascript and understanding allocation

When you look at the ECMAScript 6 specification, I noticed something interesting.

13 Function Definition

Syntax

FunctionDeclaration : function Identifier ( FormalParameterListopt ) { FunctionBody }

FunctionExpression : function Identifieropt (FormalParameterListopt ) { FunctionBody }

These two distinct declaration types are further broken down into the following semantics definitions:

The production FunctionExpression : function ( FormalParameterListopt ) { FunctionBody } is evaluated as follows:

Return the result of creating a new Function object as specified in 13.2 with parameters specified by FormalParameterListopt and body specified by FunctionBody. Pass in the LexicalEnvironment of the running execution context as the Scope. Pass in true as the Strictflag if the FunctionExpression is contained in strict code or if its FunctionBody is strict code.

And:

The production FunctionDeclaration : function Identifier ( FormalParameterListopt ) { FunctionBody } is instantiated as follows during Declaration Binding instantiation (10.5):

Return the result of creating a new Function object as specified in 13.2 with parameters specified by FormalParameterListopt, and body specified by FunctionBody. Pass in the VariableEnvironment of the running execution context as the Scope. Pass in true as the Strict flag if the FunctionDeclaration is contained in strict code or if its FunctionBody is strict code.

Am I correct in interpreting this to mean that a declaration

function foo(){};

is defined as essentially being declared in a "function table" where all its parameters and variables are allocated on the stack when the execution context is loaded, whereas

function (){};

Is essentially nonexistent until the very moment it is parsed to be executed, with all of its variables and scope inherited from the local execution context in question?

Or in layman's terms, the named declaration gets pre-allocated and the anonymous declaration is allocated at "runtime?"

Upvotes: 2

Views: 64

Answers (2)

Jeremy J Starcher
Jeremy J Starcher

Reputation: 23863

The importance here is not the difference between named and unnamed functions, but rather FunctionDeclaration vs FunctionExpression.

A function declaration takes the form:

function foo() {...}

note the placement of the function keyword with no operators in front of it. This style is hoisted to the top of the current context and is available at run-time, allowing you to say things like:

foo();
function foo() {console.log("Foo was called");}

On the other hand, if you place any kind of an operator in front of the function keyword, such as = or ( it becomes a function expression. Function expressions are not available until they time they are evaluated.

foo(); // can't call it it here. `foo` exists due to hoisting, but it is `undefined`
var foo = function() {console.log("foo was called");}
foo();

Upvotes: 4

Amit
Amit

Reputation: 46323

A "FunctionDeclaration" is a statement, whereas a "FunctionExpression" is, an expression.

The biggest difference between a function declaration statement and a function expression is when the function object is instantiated and as a consequence, what scope is available to this function.

The function identifier ("name") is a requirement for statements and is optional for expressions.

In both cases, the function is only executed when called, but parsed as part of the static analysis of the script - for example, if a function expression contains invalid statements, a parsing error will be thrown and the script won't execute.

Upvotes: 3

Related Questions